The Share Document Library provides a number of out-of-the-box default actions and displays basic, essential metadata for documents and folders. This session will show you how to add custom metadata and status indicators, modify the available actions and wire-up new filters. We'll also look at how the Document Library was extended for the DoD 5015.2 Records Management Fileplan browser. You will need to be familiar with basic Surf concepts as well as JavaScript and Freemarker to follow the webscript customization. Familiarity with YUI 2.x and CSS will aid understanding during this session.

1. Customizing the Document Library 1 Mike Hatfield Senior Software Engineer, Alfresco twitter: @mikehatfield

4. Extension Example Status Indicators Custom Actions Custom Metadata Filters

5. Architecture 3

8. Register event handlers

9. Extract URL arguments

10. Bubbling Event  “changeFilter”

11. onChangeFilter: updateDocList()

12. Webscript URL (via proxy)  YUI DataSource

13. Repository webscripts execute for given filter & params

14. Bubbling Event  “filterChanged”

16. onChangeFilter: Build data webscript URL

17. History Manager  multiNavigate()

18. onHistoryManagerFilterChanged: updateDocList()

19. Webscript URL (via proxy)  YUI DataSource

20. Repository webscripts execute for given filter & params

21. Bubbling Event  “filterChanged”

24. Custom ViewsWeb-tier rendering Open CMIS

25. Case Study: DoD 5015.2 Extensions 12

26. Case Study: DoD 5015.2 Extensions 13 Custom Actions Numerous new and overridden actions to support the DoD requirements specification.

27. Case Study: DoD 5015.2 Extensions 14 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).

28. Case Study: DoD 5015.2 Extensions 15 “documentLibrary” container type determines components

29. Case Study: DoD 5015.2 Extensions 16

30. Template: documentlibrary 17 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>

31. Creating the Container 18 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”

32. Creating the Container 19 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);

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

35. Mandatory Component Mapping 22 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!

38. Need to use AMP on the Repository until refactoring work is complete

40. DemoOut-of-the-box Share 25

42. evaluator.lib.js

43. Share

44. I18N messages

46. Share: Indicator images 28 status[”exif"] = true; status["geographic"] = true; share.jar!/META-INF/components/documentlibrary/images exif-indicator-16.png geographic-indicator-16.png

47. Share: Add I18N messages 29 share.jar!/org/springframework/extensions/surf/custom-slingshot-geographic-context.xml <bean id="geographic.custom.resources" class="org.springframework.extensions.surf.util.ResourceBundleBootstrapComponent"> <property name="resourceBundles"> <list> <value>alfresco.messages.geographic</value> </list> </property> </bean> share.jar!/alfresco/messages/geographic.properties tip.geographic=Geo Location tip.exif=EXIF Metadata

49. item.lib.ftl

50. Maybe also JavaScript logic

51. Share

52. I18N messages

54. Share: Reference extension JavaScript 32 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>

55. Share: Override cell renderer 33 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; } … } } }

57. filters.lib.js

58. Share

59. I18N messages

61. Repository: Filter webscript override 36 alfresco.amp!/WEB-INF/classes/alfresco/templates/webscripts/org/alfresco/slingshot/documentlibrary/filters.lib.js case "geo": filterQuery = "+PATH:quot;" + parsedArgs.rootNode.qnamePath + "//*quot;"; filterQuery += "+ASPECT:quot;cm:geographicquot;"; filterParams.query = filterQuery break; case "exif": filterQuery = "+PATH:quot;" + parsedArgs.rootNode.qnamePath + "//*quot;"; filterQuery += "+ASPECT:quot;exif:exifquot;"; filterParams.query = filterQuery break;

63. evaluator.lib.js

64. Action processing (optional)

65. Share

66. I18N messages

67. Action configuration

69. Share: Action configuration 39 shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/documentlibrary/documentlist.get.config.xml shared/classes/alfresco/web-extension/site-webscripts/org/alfresco/components/document-details/document-actions.get.config.xml etc… <actionSet id="document"> … <action type="simple-link" id="onActionGeographic" permission="geographic" href="{geographicUrl}" label="actions.document.geographic" /> </actionSet>

70. Share: CSS and JS dependencies 40 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" /> share.jar!/META-INF/components/geographic/geographic-extension.css .doclist .onActionGeographica { background-image: url(pin.png) !important; }

71. Share: Proxy JavaScript function 41 var override = Alfresco.DocumentList || Alfresco.DocumentActions; // Store reference to getActionUrls() function to allow extension. vargetActionUrls_geo = override.prototype.getActionUrls; override.prototype.getActionUrls = function(recordData) { varactionUrls = getActionUrls_geo.apply(this, arguments); actionUrls["geographicUrl"] = Alfresco.util.siteURL( "geographic-map?nodeRef=" + recordData.nodeRef); return actionUrls; };

72. DemoNew Extensions 42

73. The End Result 43

75. New actions via configuration where practicable

76. Remove references to non-core Share code

77. Leverage Repository Actions & scripts