In Techno
Let me tell you this up front, I’ve never accepted the way of using Yahoo YUI2 in Alfresco Share. Wherever I had the possibility to include jQuery I tried to it and sometimes failed horribly.

So let’s get to how to yes and yes include jQuery without breaking stuff in Alfresco Share since 4.2.e/f with the new Dojo/Aikau JavaScript framework in place as an AMD package. (…..)

The old way of doing this:
<@markup id=”js”>
<#– JavaScript Dependencies –>
<@script src=”${url.context}/res/jquery/jquery-1.11.1.min.js” group=”console”/>
<@script src=”${url.context}/res/jquery/jquery-ui-1.11.1.custom/jquery-ui.min.js” group=”console”/>

The new way of doing it right:
<@markup id=”js”>
<#– JavaScript Dependencies –>

Yep no more imports at the top of the page, instead you’ll include it within your <script> tag within the Freemarker. Like this:
 <script type=”text/javascript”>//<![CDATA[
{name : ‘jquery’, location : ‘jquery’, main : ‘jquery-1.11.1.min’},
{name : ‘jquery-ui’, location : ‘jquery/jquery-ui-1.11.1.custom’, main : ‘jquery-ui.min’}


The syntax is different than a normal import.
dojoConfig.packages.push({name : ‘<variable name within Dojo>’, location : ‘<folder where library is from /res position>’, main : ‘<name of the file without the extension>’});

Global declaration
Doing the import for every custom file is repetitive and mostly the user already has a bunch of jquery libraries in it’s cache, so if you’re using jQuery more than one place I’d recommend using to declare it globally.

What does this mean?
If you look at the source of any page and the first <script declaration will be the initialization of the AMD packages for Dojo.
var dojoConfig = {
baseUrl: “/share/res/”,
tlmSiblingOfDojo: false,
async: true,
parseOnLoad: false,
packages: [{
name: “alfresco”, location: “js/alfresco”
}, {
name: “surf”, location: “js/surf”
}, {
name: “dojo”, location: “js/lib/dojo-1.9.0/dojo”
}, {
name: “dijit”, location: “js/lib/dojo-1.9.0/dijit”
}, {
name: “dojox”, location: “js/lib/dojo-1.9.0/dojox”
}] };

So you want jQuery to be in that place instead of defining it everywhere. This is done by changing the share-config-custom.xml:
<config evaluator=”string-compare” condition=”WebFramework”>
<package name=”jquery” location=”jquery” main=”jquery-1.11.1.min”/>

This should be working, but it’s not working in 4.2.e/f unless you rename the library file to the variable name like /jquery/jquery.js then it gets picked up. I filed a JIRA issue and it’s already fixed in 5.0.x.

Finally using the library
The problem with calling dojoConfig.packages.push is that it isn’t pushed in the global variable so you’ll need to use the newly pushed config in the code, like this:

require(dojoConfig,[“jquery“, “jquery-ui“], function(jquery){
//YESS this works, don’t need it though
//jquery( document ).ready(function() {

var propertiesSave = jquery(“#${el}-contezza-save”); { + “contezza/admin/properties”, {property: propertiesOption.val(), value: jquery(“#${el}-contezza-value”).val()}, function(data){
//OMG can I do this?? yes you can
text : “${message(‘message.success’)}”
}).fail(function(e) {
text : “${message(‘message.failure’)}”

So what you see here is a jQuery Ajax Post to a webscript and on fail & success it will show a default Alfresco YUI Dialog popup like you’d normally do.

Sure we can use the jQuery-UI dialogs, but then I need to do heavy CSS-ing to match the default dialogs used in Alfresco. So with simple substitution of code your life can be made easier with this.

TIP: when using normal input fields/buttons/etc you’ll need to look at the styling. The best what I do is just add the specific styles YUI does and use <button instead of <input type=”button” to match the default styling.

Recent Posts

Start typing and press Enter to search