Using Share Extensibility Modules in Share Extras
Will Abson (@wabson)
Agenda
• Introduction • Custom Doclib Views • Customizing Custom Views • Customizing Dashlets • Customizing Document Details page
About Me
• Integrations Engineer @ Alfresco • Founder and Lead of Share Extras • Creator of Site Geotagged Content Add-on
Recap – Share Extensibility
• TTL by Dave Draper, May 2012 • Share Customizations Live by Dave
Draper and Erik Winlöf, Alfresco DevCon, Nov 2012
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
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
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
Site Geotagged Content
Originally just a Site Dashlet
Site Geotagged Content
Now also a Custom Doclib View
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
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
Renderer Module Definition org_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>
Renderer HTML Markup components/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}; geoViewRenderer.center = "${(preferences.center!'')?js_string}"; geoViewRenderer.mapTypeId = "${(preferences.mapTypeId!'')?js_string}";
scope.registerViewRenderer(geoViewRenderer); }); //]]></script> </@>
Renderer Controller Extension components/documentlibrary/documentlist.get.js
model.viewRendererNames.push("geo"); model.geoRendererClass = "Extras.DocumentListGMapsGeoViewRenderer";
Renderer Client-side Class source/web/extras/components/documentlibrary/documentlist-geo.js Extras.DocumentListGMapsGeoViewRenderer = function DocumentListGMapsGeoViewRenderer_constructor(name) {
...
}
YAHOO.extend(Extras.DocumentListGMapsGeoViewRenderer, Extras.DocumentListGeoViewRendererBase,
{
setupRenderer: function DL_GVR_setupRenderer(scope) {...},
renderView: function DL_GVR_renderView(scope, sRequest, oResponse, oPayload) {...}
}
Demo
• Site Geotagged Content Dashlet • Site Geographic View
Introducing Leaflet
• A great alternative to Google Maps
• Open Source • Mobile-friendly • Plugin a wide range
of mapping providers
leafletjs.com
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
Renderer Override Module org_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>
Renderer Override Controller Extension components/documentlibrary/documentlist.get.js
model.geoRendererClass = "Extras.DocumentListLeafletGeoViewRenderer";
Demo
• Site Geographic View with Leaflet
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
Demo
• Site Geotagged Content Dashlet with Leaflet
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
Previewer Controller Extension components/documentlibrary/documentlist.get.js if (model.widgets) // Protection for older versions { for (var i = 0; i < model.widgets.length; i++)
{ var widget = model.widgets[i]; if (widget.id == "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;
} }
Demo
• PdfJs Viewer
More Information
• http://sharextras.org • http://www.slideshare.net/alfresco/tech-
talk-live-on-share-extensibility • http://blogs.alfresco.com/wp/developer/
author/ddraper/