Your SlideShare is downloading. ×

Tech talk live share extras extension modules feb 13


Published on

Slide deck to accompany Episode 62 of Alfresco's Tech Talk Live webinar series.

Slide deck to accompany Episode 62 of Alfresco's Tech Talk Live webinar series.

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. Using Share Extensibility Modules in Share Extras Will Abson (@wabson)
  • 2. Agenda•  Introduction•  Custom Doclib Views•  Customizing Custom Views•  Customizing Dashlets•  Customizing Document Details page
  • 3. About Me•  Integrations Engineer @ Alfresco•  Founder and Lead of Share Extras•  Creator of Site Geotagged Content Add-on
  • 4. Recap – Share Extensibility•  TTL by Dave Draper, May 2012•  Share Customizations Live by Dave Draper and Erik Winlöf, Alfresco DevCon, Nov 2012
  • 5. Extensibility Main Points•  Declare modules in site-data/extensions•  Change component behaviors by modifying the script model via a controller .js extension•  Add HTML markup before, after, or instead of the default component content via @region directive –  As of 4.2.b, many components support adding markup into the component via the @markup directive
  • 6. Extensibility Main Points•  Add additional client-side dependencies via .head.ftl extensions, or (in 4.2) using the @script and @link directives in a .html.ftl extension•  Add or override UI labels with additional .properties files
  • 7. Site Geotagged Content•  Visualize Geotagged Content in Share –  Using Google Maps•  Tika provides automatic extraction of Geographic info from files –  e.g. EXIF data in digital photos
  • 8. Site Geotagged ContentOriginally just a Site Dashlet
  • 9. Site Geotagged ContentNow also a Custom Doclib View
  • 10. Custom DocLib Views•  Allows us to add in our own views, which can be selected by the user•  Requires Alfresco 4.0.2 / 4.2.a or later•  More information on blog post by Ray Gauss II•  Implemented as client-side renderer classes
  • 11. Geographic Renderer•  Built on top of the thumbnail renderer•  We need to define –  Module definition –  Additional HTML markup (via Freemarker) –  Component controller extension –  Client-side renderer class –  CSS, icon, labels
  • 12. Renderer Module Definitionorg_sharextras_doclib-geo-view.xml<extension> <modules> <module> <id>Document List Geographic View</id> <customizations> <customization> <targetPackageRoot>org.alfresco</targetPackageRoot> <sourcePackageRoot>org.sharextras.customization.doclib-geo-view</sourcePackageRoot> </customization> </customizations> </module> </modules></extension>
  • 13. Renderer HTML Markupcomponents/documentlibrary/documentlist.get.html.ftl<@markup id="customDocLibView" target="documentListContainer" action="after"> <div id="${args.htmlid}-geo" class="alf-geo documents"></div> <div id="${args.htmlid}-geo-empty" class="hidden"> <div class="yui-dt-liner"></div> </div> <div id="${args.htmlid}-geo-item-template" class="alf-geo-item hidden”>...</div> ... <script type="text/javascript">//<![CDATA[ YAHOO.Bubbling.subscribe("postSetupViewRenderers", function(layer, args) { var scope = args[1].scope; var geoViewRenderer = new ${geoRendererClass}("geo") geoViewRenderer.zoomLevel = ${preferences.zoomLevel!15}; = "${(!)?js_string}"; geoViewRenderer.mapTypeId = "${(preferences.mapTypeId!)?js_string}"; scope.registerViewRenderer(geoViewRenderer); }); //]]></script></@>
  • 14. Renderer Controller Extensioncomponents/documentlibrary/documentlist.get.jsmodel.viewRendererNames.push("geo");model.geoRendererClass ="Extras.DocumentListGMapsGeoViewRenderer";
  • 15. Renderer Client-side Classsource/web/extras/components/documentlibrary/documentlist-geo.jsExtras.DocumentListGMapsGeoViewRenderer = functionDocumentListGMapsGeoViewRenderer_constructor(name){ ...}YAHOO.extend(Extras.DocumentListGMapsGeoViewRenderer,Extras.DocumentListGeoViewRendererBase,{ setupRenderer: function DL_GVR_setupRenderer(scope) {...}, renderView: function DL_GVR_renderView(scope, sRequest, oResponse,oPayload) {...}}
  • 16. Demo•  Site Geotagged Content Dashlet•  Site Geographic View
  • 17. Introducing Leaflet•  A great alternative to Google Maps•  Open Source•  Mobile-friendly•  Plugin a wide range of mapping providers
  • 18. Changing the View Behaviour•  We’ll use a second module for this –  Order is important!•  We need to provide –  Module definition –  A further webscript controller extension
  • 19. Renderer Override Moduleorg_sharextras_doclib-geo-view-leaflet.xml<extension> <modules> <module> <id>Document List Geographic View</id> <customizations> <customization> <targetPackageRoot>org.alfresco</targetPackageRoot> <sourcePackageRoot>org.sharextras.customization.doclib-geo-view-leaflet</sourcePackageRoot> </customization> </customizations> </module> </modules></extension>
  • 20. Renderer Override ControllerExtensioncomponents/documentlibrary/documentlist.get.jsmodel.geoRendererClass ="Extras.DocumentListLeafletGeoViewRenderer";
  • 21. Demo•  Site Geographic View with Leaflet
  • 22. Changing other Components•  The same approach is valid for most OOTB components, which populate the model.widgets object –  The @createWidgets Freemarker directive new in 4.2 then renders the widget markup•  To demonstrate this, let’s also change the dashlet behavior
  • 23. Demo•  Site Geotagged Content Dashlet with Leaflet
  • 24. Custom DocLib Previewers•  The ability to ‘intervene’ between the widget configuration being declared and it being rendered is incredibly useful in other places, too!•  Let’s look at the PdfJs viewer included in the Media Viewers add-on as an example
  • 25. Previewer Controller Extensioncomponents/documentlibrary/documentlist.get.jsif (model.widgets) // Protection for older versions{ for (var i = 0; i < model.widgets.length; i++) { var widget = model.widgets[i]; if ( == "WebPreview") { // Insert new pluginCondition(s) at start of the chain var conditions = [{...}]; var oldConditions = eval("(" + widget.options.pluginConditions + ")"); // Add the other conditions back in for (var j = 0; j < oldConditions.length; j++) { conditions.push(oldConditions[j]); } // Override the original conditions model.pluginConditions = jsonUtils.toJSONString(conditions); widget.options.pluginConditions = model.pluginConditions; }}
  • 26. Demo•  PdfJs Viewer
  • 27. More Information•• talk-live-on-share-extensibility• author/ddraper/