This document summarizes useful functions in the Alfresco JavaScript utilities (Alfresco.util). It describes functions for array manipulation, string formatting, date conversion, DOM manipulation, YUI widget creation, AJAX requests, and more. It also discusses several Alfresco components like DataTable, Location, Favorite, and InsituEditor that leverage these utility functions.

1. alfresco.js / share.js
Hidden gems in Alfresco Client-Side Javascript
2013-06-27 - Florian Maul (fme AG)

2. Alfresco.util: Object functions
• arrayToObject, deepCopy, dotNotation*

3. Alfresco.util: Array manipulation
• findInArray
• arrayContains
• arrayRemove
• arrayIndex

4. Alfresco.util: Strings / Formatting
• pad, trim, combinePaths

5. Alfresco.util: Date conversion

6. Alfresco.util: DOM / HTML
• getScrollPosition = function()
• insertAtCursor = function(el, txt)
• selectText = function(elTextbox, nStart, nEnd)
• isVisible = function (el)
• decodeHTML = function(html)
• encodeHTML = function(text, justified)
• encodeURIPath = function(text)activateLinks = function(text)
• tweetToHTML = function(text)setSelectedIndex = function(selectEl, value)
• setSelectedClass = function(parentEl, selectEl, selectClass)
• useAsButton = function(el, callbackFn, callbackObj, callbackScope)
 Helper function to listen for mouse click and keyboard enter events on an
• element.generateDomId = function(p_el, p_prefix)
 Returns a unique DOM ID for dynamically-created content. Optionally applies the new
ID to an element.

7. Alfresco.util: YUI
• createYUIButton = function(p_scope, p_name, p_onclick, p_obj,
p_oElement)
• disableYUIButton = function(p_button)
• enableYUIButton = function(p_button)
• createTwister = function(p_controller, p_filterName, p_config)
• createYUIPanel = function(p_el, p_params, p_custom)
• createInfoBalloon = function(p_context, p_params)
• createBalloon = function(p_context, p_params)
• createInsituEditor = function(p_context, p_params, p_callback)
• findEventClass = function(p_eventTarget, p_tagName)
• hasEventInterest = function(p_eventGroup, p_args)

8. Editor that is used for inline editing in the document library
for document names and tags:
Alfresco.util.createInsituEditor(context, params, callback);
Alfresco.util: Insitueditor

9. Alfresco.util: Insitueditor

10. Alfresco.util.PopupManager

11. A.u.PopupManager.displayForm
Alfresco.util.PopupManager.displayForm({
title:"Form Title",
properties:{
itemKind:"type",
mode:"create",
itemId:"cm:content",
destination:"workspace://SpacesStore/34c94d94-6418-42dc-9bc7-038693990408",
success: function() {
console.log(
"Node Created.");}
}
}
);

12. A.u.PopupManager.displayWebscript
• Display the html contents of a webscript in a
Dialog
• If you need OK, Cancel Buttons you have to
provide them in the HTML
Alfresco.util.PopupManager.displayWebscript({
title: "Index",
url: Alfresco.constants.PROXY_URI +"index",
properties:{}
});

13. Alfresco.util.Ajax
• Use Alfresco Ajax for CSRF support!
 Alfresco.util.Ajax.jsonGet
 Alfresco.util.Ajax.jsonPost
 Alfresco.util.Ajax.jsonPut
 Alfresco.util.Ajax.jsonDelete
• All use:  jsonRequest()

14. Alfresco.util.Ajax.jsonGet
Alfresco.util.Ajax.jsonGet({
url: Alfresco.constants.PROXY_URI + "index",
successCallback: {
fn: function(result) {
console.log(result.serverResponse.responseText);
},
scope: this
}
});

15. More URL helpers

16. Alfresco.util.getVar / setVar
Alfresco.util.setVar("fme", "it's possible");
Alfresco.util.getVar("fme");
Caution: Data is stored as a JSON object on window.name and survives page
requests but it is NOT available when the user opens a new tab!
(It‘s used internally for tracking if flash is available in the browser)

17. Alfresco.Location component
• Renders the Breadcrumb
l = new Alfresco.Location("template_x002e_title_x002e_repository");
l.setOptions({rootNode:"workspace://SpacesStore/743b079b-a847-4fc2-9a38-
5b3f38638784"});
l.displayByNodeRef("workspace://SpacesStore/2fc3c755-3e4a-4730-a22e-604c2092746b");

18. Alfresco.Favorite component
• Component to render a Favorite link with action:
f = new Alfresco.Favourite("page_x002e_title_x002e_user_x007e_admin_x007e_dashboard");
f.setOptions({
nodeRef : "workspace://SpacesStore/f3bb5d08-9fd1-46da-a94a-97f20f1ef208"
});
f.render();

19. Alfresco.Like component
• Render a „like“ link with like action (Ajax reload)
l = new Alfresco.Like("page_x002e_title_x002e_user_x007e_admin_x007e_dashboard");
l.setOptions(nodeRef : "workspace://SpacesStore/f3bb5d08-9fd1-46da-a94a-
97f20f1ef208");
l.render();

20. Alfresco.logger
Use cheat code:
Ctrl, Ctrl, Shift, Shift

21. Alfresco.constants (1/2)
• Alfresco.constants.DEBUG = true;
• Alfresco.constants.AUTOLOGGING = false;
• Alfresco.constants.PROXY_URI = window.location.protocol + "//" + window.location.host +
"/share/proxy/alfresco/";
• Alfresco.constants.PROXY_URI_RELATIVE = "/share/proxy/alfresco/";
• Alfresco.constants.PROXY_FEED_URI = window.location.protocol + "//" + window.location.host +
"/share/proxy/alfresco-feed/";
• Alfresco.constants.THEME = "fmeTheme";
• Alfresco.constants.URL_CONTEXT = "/share/";
• Alfresco.constants.URL_RESCONTEXT = "/share/res/";
• Alfresco.constants.URL_PAGECONTEXT = "/share/page/";
• Alfresco.constants.URL_SERVICECONTEXT = "/share/service/";
• Alfresco.constants.URL_FEEDSERVICECONTEXT = "/share/feedservice/";
• Alfresco.constants.USERNAME = "admin";
• Alfresco.constants.SITE = "";
• Alfresco.constants.PAGEID = "";
• Alfresco.constants.PORTLET = false;
• Alfresco.constants.PORTLET_URL = unescape("");
• Alfresco.constants.JS_LOCALE = "en_US";

22. Alfresco.constants (2/2)
Alfresco.constants.URI_TEMPLATES =
{
"sitedashboardpage": "/site/{site}/dashboard",
"sitepage": "/site/{site}/{pageid}",
"userdashboardpage": "/user/{userid}/dashboard",
"userpage": "/user/{userid}/{pageid}",
"userprofilepage": "/user/{userid}/profile",
"userdefaultpage": "/user/{pageid}",
"consoletoolpage": "/console/{pageid}/{toolid}",
"consolepage": "/console/{pageid}"
};
Alfresco.constants.HELP_PAGES =
{
"share-help": "http://docs.alfresco.com/4.1/topic/com.alfresco.enterprise.doc/topics/sh-uh-welcome.html",
"share-tutorial": "http://docs.alfresco.com/4.1/topic/com.alfresco.enterprise.doc/topics/alfresco-video-
tutorials.html"
};

23. Alfresco.Share
Alfresco.Share.postActivity("swsdp",
"file-liked",
"inv I200-109.png",
"document-details", {
nodeRef: "workspace://SpacesStore/
723a0cff-3fce-495d-baa3-a3cd245ea5dc"});

24. Alfresco.component.SimpleDocList
• Component to create document lists
• e.g. used in My Documents dashlet

25. Alfresco.component.Base

26. Alfresco.component.Base
(function()
{
FME.MyComponent = function(htmlId, options)
{
this.name = "FME.MyComponent";
this.id = htmlId;
this.setOptions(options);
FME.MyComponent.superclass.constructor.call(this,
this.name, this.id,
["button", "container", "connection", "dragdrop", "json" ]);
return this;
};
YAHOO.lang.extend(FME.MyComponent, Alfresco.component.Base,
{
onReady: function FMC_onReady() {
// add you initialization here
}
});
})();

27. Alfresco.component.Base
• Creates Button and adds listeners
<button type="alfresco-button" name=".onRenameClick"
value="${nodeRef}">${msg("button.rename")}</button>
• Creates Links and creates events
<a href="#" name"@metaDataRefresh"
class="${args.htmlid?js_string}"
rel="${nodeRef}">${msg("link.metaDataRefresh“)}</a>

28. Alfresco.util.DataTable

29. Alfresco.util.DataTable
dt = new Alfresco.util.DataTable(
{
dataTable:
{
container: "template_x002e_people-finder_x002e_people-finder_x0023_default-body",
columnDefinitions:
[
{ key: "name", sortable: false, formatter: function(elCell, oRecord, oColumn, oData) {
elCell.innerHTML = oRecord.getData("fileName");
}
},
{ key: "type", sortable: false, formatter: function(elCell, oRecord, oColumn, oData) {
elCell.innerHTML = oRecord.getData("node").type;
}
}
]
},
dataSource:
{
url:
"/share/service/components/documentlibrary/data/doclist/all/node/alfresco/company/home/Data%20Dictionary?filter=path&size=50&po
s=1&sortAsc=true&sortField=cm%3Aname&libraryRoot=alfresco%3A%2F%2Fcompany%2Fhome&view=browse",
config:
{
responseSchema:
{
resultsList: "items",
metaFields:
{
paginationRecordOffset: "startIndex",
totalRecords: "totalRecords",
totalRecordsUpper : "totalRecordsUpper"
}
}
}
},
paginator:
{
config:
{
containers: ["global_x002e_header_x0023_default-userItems"],
rowsPerPage: 10
}
}
});

30. Alfresco.util.ComponentManager
• Some Alfresco components are registered with the Component Manager:

31. Alfresco.Deferred
• Wait for multiple events and execute a callback:

32. Alfresco.util.bind()
• Changes the this context of a function (binds it to a specific object)

33. Questions, Feedback …?
33

34. #237191 - © fme AG34