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/