Mike Hatfield

Senior Software Engineer, Alfresco

twitter: @mikehatfield

1
What We’ll Cover
• Architecture
• Challenges to customization and extension
• Plans for improvement
• Case Study: the DoD 5015.2 Extensions
• Extension Example
• Status Indicators
• Custom Actions
• Custom Metadata
• Filters

2
3
 Custom UI
New Filters

Custom UI
New Filters

Custom UI

New Filters
4
• Consolidate scattered action configuration
• share-config-custom.xml instead of webscriptconfig
• Still possible to restrict & specialise actions on details pages
• New actions via configuration where practicable
• jar file for client-side UI assets, I18N
• CSS and JS dependencies via config (see Forms & Header)
• Leverage Repository Actions & scripts
• Custom Views
• Web-tier rendering
• Open CMIS

5
6
Custom Actions

Numerous new and overridden actions to support the DoD

requirements specification.

7
Custom Toolbar

Sensitive to current folder type. New and overridden actions.

Custom Filters
Removed unsuitable filters (user filters, tags).
One static, one dynamic (populated from list of
saved searches on the Repository).

8
“documentLibrary” container type determines components

9
10
 documentlibrary.js

connector.get("/slingshot/doclib/container/" + siteId + "/" + containerId);

"dod:filePlan"
model.doclibType = fromRepoType("dod:filePlan");
“dod5015”

documentlibrary.ftl

<@region id=doclibType+ "documentlist" scope="template" protected=true />

Surf Component Binding

template.dod5015-documentlist.documentlibrary.xml

<url>/components/documentlibrary/dod5015/documentlist</url>

11
DoD 5015.2 Method
presets.xml

<preset id="rm-site-dashboard">
<page id="site/${siteid}/dashboard">
<properties>
<pageMetadata>{"documentlibrary":{…, "type":"dod5015"}}</pageMetadata>

documentlibrary.js

page = sitedata.getPage("site/" + siteId + "/dashboard");

pageMeta = eval('(' + p.properties.pageMetadata + ')');
contentType = doclibMeta.type;

connector.get("/slingshot/doclib/container/" + siteId + "/" + containerId

+ “?type=“ + toRepoType(contentType));
”dod:filePlan”

12
Web QuickStart Method
dashlet

connector.get("/api/loadwebsitedata?site=" + siteId);

LoadWebSiteDataGet.java

NodeRefdocLib = siteService.getContainer(siteId, COMPONENT_DOCUMENT_LIBRARY);

siteService.createContainer(siteId, COMPONENT_DOCUMENT_LIBRARY,
WebSiteModel.TYPE_WEBSITE_CONTAINER, null);
or
nodeService.setType(docLib, WebSiteModel.TYPE_WEBSITE_CONTAINER);

13
 YUI Helps
YUI developers
added a number of
helper functions to
allow OO-style
JavaScript modules.

• Notice:
• constructor
• superclass
• extend
• augment
• etc…

14
Pros Cons
• Full override / replacement • Mandatory component
control on all tiers. mapping, even for “native”
• Your code can be almost components.
completely independent of • Still have to copy/paste
Alfresco’s. where <include> cannot
be used, e.g. I18N.
• Repository folder type to
component prefix issue.
• Not a 100% “clean”
override mechanism.

15
Big Development Overhead
template.dod5015-actions-common.documentlibrary.xml
template.dod5015-documentlist.documentlibrary.xml
template.dod5015-file-upload.documentlibrary.xml
template.dod5015-fileplan.documentlibrary.xml
template.dod5015-flash-upload.documentlibrary.xml
template.dod5015-html-upload.documentlibrary.xml
template.dod5015-navigation.documentlibrary.xml
template.dod5015-savedsearch.documentlibrary.xml
template.dod5015-title.documentlibrary.xml
template.dod5015-toolbar.documentlibrary.xml
template.dod5015-tree.documentlibrary.xml
…
And that’s just the browse page!

16
• Overview
• Customisations
• Status Indicators
• Custom Metadata
• New Filters
• Custom Action
• Based on Alfresco Community 3.4.b
• Need to use AMP on the Repository until refactoring work
is complete
• Share extensions via .jar and web-extension folder

17
Overview

18
19
Provide the user a quick indication of the current status of a
folder or document, e.g. aspects applied.
Calculated in evaluator.lib.js

• Repository
• evaluator.lib.js
• Share
• I18N messages
• Indicator images

20
/* Exif metadata */
if (node.hasAspect("exif:exif"))
{
status["exif"] = true;
}

/* Geographic */
if (node.hasAspect("cm:geographic"))
{
status["geographic"] = true;
}

21
1. share.jar!/org/springframework/extensions/surf/custom-slingshot-geographic-
context.xml
<bean id="geographic.custom.resources"
class="org.springframework.extensions.surf.util.ResourceBundleBootstrapCompon
ent">
<property name="resourceBundles">
<list>
<value>alfresco.messages.geographic</value>
</list>
</property>
</bean>

1. share.jar!/alfresco/messages/geographic.properties
tip.geographic=Geo Location
tip.exif=EXIF Metadata

22
status[”exif"] = true;
status["geographic"] = true;

share.jar!/META-INF/components/documentlibrary/images
1.exif-indicator-16.png
2.geographic-indicator-16.png

23
Rendered entirely by the web browser from JSON data.

• Repository
• item.lib.ftl
• Maybe also JavaScript logic
• Share
• I18N messages
• Override cell renderer

24
1. alfresco.amp!/WEB-
INF/classes/alfresco/templates/webscripts/org/alfresco/slingshot/documentli
brary/item.lib.ftl

<#if node.hasAspect("cm:geographic")>
“geolocation”:
{
"latitude": ${(node.properties["cm:latitude"]!0)?c},
"longitude": ${(node.properties["cm:longitude"]!0)?c}
},
</#if>

<#if node.hasAspect(”exif:exif")>
“exif”:
{
…
},
</#if>

25
1. shared/classes/alfresco/web-extension/site-
webscripts/org/alfresco/components/documentlibrary/actions-
common.get.head.ftl

<@script type="text/javascript" src="$

{page.url.context}/res/components/geographic/geographic-
extension.js"></@script>

26
1. Override fnRenderCellDescription

share.jar!/META-INF/components/geographic/geographic-extension.js

YAHOO.util.Event.onContentReady("alf-hd", function()
{
if (Alfresco.DocumentList)
{
Alfresco.DocumentList.prototype.fnRenderCellDescription = function DL_fnRenderCellDescription()
{
…
if (record.exif)
{
desc += scope.msg(“detail.exposure”) + record.exif.exposureTime;
}
…
}
}
}

27
Allow easy filtering by any Repository logic, most commonly
a Lucene or Alfresco FTS search query.

• Repository
• filters.lib.js
• Share
• I18N messages
• Filter webscriptconfig

28
1. shared/classes/alfresco/web-extension/site-
webscripts/org/alfresco/components/documentlibrary/filter.get.config.x
ml

<filters>
…
<filter id="geo" label="link.geo-located" />
<filter id="exif" label="link.exif" />
…
</filters>

29
1. alfresco.amp!/WEB-
INF/classes/alfresco/templates/webscripts/org/alfresco/slingshot/documentli
brary/filters.lib.js

case "geo":
filterQuery = "+PATH:\"" +
parsedArgs.rootNode.qnamePath + "//*\"";
filterQuery += "+ASPECT:\"cm:geographic\"";
filterParams.query = filterQuery
break;

case "exif":
filterQuery = "+PATH:\"" +
parsedArgs.rootNode.qnamePath + "//*\"";
filterQuery += "+ASPECT:\"exif:exif\"";
filterParams.query = filterQuery
break;

30
Can be configured to only appear if a folder or document is
in a particular state and/or the user has the correct
permission(s) and/or the page is within a Site context and/or
the action is on the browse or details page.

• Repository
• evaluator.lib.js
• Action processing (optional)
• Share
• I18N messages
• Action configuration
• Client-side logic & images

31
/* Geographic */
if (node.hasAspect("cm:geographic"))
{
status["geographic"] = true;
permissions["geographic"] = true;
}

32
1. shared/classes/alfresco/web-extension/site-
webscripts/org/alfresco/components/documentlibrary/documentlist.get.config.x
ml
2. shared/classes/alfresco/web-extension/site-
webscripts/org/alfresco/components/document-details/document-
actions.get.config.xml
3. etc…

<actionSet id="document">
…
<action type="simple-link" id="onActionGeographic"
permission="geographic" href="{geographicUrl}"
label="actions.document.geographic" />
</actionSet>

33
1. shared/classes/alfresco/web-extension/site-
webscripts/org/alfresco/components/documentlibrary/actions-
common.get.head.ftl

<@link rel="stylesheet" type="text/css" href="$

{page.url.context}/res/components/geographic/geographic-
extension.css" />

2. share.jar!/META-INF/components/geographic/geographic-extension.css

.doclist .onActionGeographica
{
background-image: url(pin.png) !important;
}

34
var override = Alfresco.DocumentList || Alfresco.DocumentActions;

// Store reference to getActionUrls() function to allow extension.

vargetActionUrls_geographic = override.prototype.getActionUrls;

override.prototype.getActionUrls = function(recordData)
{
varactionUrls = getActionUrls_geographic.apply(this,
arguments);
actionUrls["geographicUrl"] = Alfresco.util.siteURL(
"geographic-map?nodeRef=" + recordData.nodeRef);
return actionUrls;
};

35
36
37
• Consolidate scattered action configuration
• New actions via configuration where practicable
• Remove references to non-core Share code
• Leverage Repository Actions & scripts
• Custom Views

38
• Feedback

39
wiki.alfresco.com/wiki/Share
blogs.alfresco.com/wp/mikeh/

40