Embed Size (px)
DESCRIPTION
Alfresco Share provides a lot of helpers and tools for client side Javascript. This is a collection of some of the most important pieces.
Citation preview
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
alfresco.js / share.js Hidden gems in Alfresco Client-Side Javascript
2013-06-27 - Florian Maul (fme AG)
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util: Object functions
• arrayToObject, deepCopy, dotNotation*
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util: Array manipulation
• findInArray
• arrayContains
• arrayRemove
• arrayIndex
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util: Strings / Formatting
• pad, trim, combinePaths
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util: Date conversion
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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.
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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)
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170 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
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util: Insitueditor
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util.PopupManager
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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.");}
}
}
);
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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:{}
});
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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()
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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
}
});
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
More URL helpers
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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)
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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");
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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();
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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();
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.logger
Use cheat code:
Ctrl, Ctrl, Shift, Shift
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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";
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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"
};
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.Share
Alfresco.Share.postActivity("swsdp",
"file-liked",
"inv I200-109.png",
"document-details", {
nodeRef: "workspace://SpacesStore/
723a0cff-3fce-495d-baa3-a3cd245ea5dc"});
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.component.SimpleDocList
• Component to create document lists
• e.g. used in My Documents dashlet
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.component.Base
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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
}
});
})();
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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>
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util.DataTable
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
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
}
}
});
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util.ComponentManager
• Some Alfresco components are registered with the Component Manager:
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.Deferred
• Wait for multiple events and execute a callback:
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Alfresco.util.bind()
• Changes the this context of a function (binds it to a specific object)
230/0/0
178/178/178
205/205/205
206/144/144
144/206/153
216/221/234
170/182/204
69/101/140
118/139/170
Questions, Feedback …?
33
#237191 - © fme AG 34
