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
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
17. Introducing Leaflet
• A great alternative to
Google Maps
• Open Source
• Mobile-friendly
• Plugin a wide range
of mapping providers
leafletjs.com
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
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
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 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;
}
}