Alfresco Liferay and Ajax

From AlfrescoWiki

Jump to: navigation, search

==Simple Ajax==

Utilizing Alfresco's URL addressability features, provides some excellent possibilities with Ajax. Essentially we are able to write scripts within alfresco and have them called from any other Ajax'able container, such as Liferay.

For instance I'm using lots of Liferay functionality to build a project management status reporting tool. The project status lines in the real world are actually structured Liferay content, however I'm here to do some really useful Ajax stuff with Alfresco and show you that, rather than give a big lesson on Liferay.

When reporting the project status I needed a line something like this:

Image:Projectstatus.png (Sorry as I write this I could not upload the image) 

Project    Project Manager   Documentation
Fickle     Joe Bloggs        one document

Basically the one document comment is generated from within alfresco. It is done in this case as a FreeMarker template. Liferay 4.2 comes bundled with the prototype.js AJAX library, so we are using some of it's event handler code.

A Liferay article 

<script type="text/javascript" language="JavaScript">
function getDocumentLink(url) {
  var params = 'mimetype=text/xml';
  var ajax = new Ajax.Updater(
{success: 'docResults'},
url,
{method: 'get', parameters: params, onFailure: reportError});
}

function reportError(request) {
  $F('docResults') = "Error";
}
</script>

<table cellspacing="2" cellpadding="3" width="100%" summary="" border="0">
    <tbody>
        <tr style="COLOR: rgb(255,255,255); BACKGROUND-COLOR: rgb(0,31,64)">
            <td><strong>Project</strong></td>
            <td><strong>Project Manager</strong></td>
            <td><strong>Documentation</strong></td>
        </tr>
        <tr style="COLOR: rgb(0,31,64); BACKGROUND-COLOR: rgb(255,255,255)">
            <td><strong>Fickle</strong></td>
            <td><a href="mailto:joe.bloggs@xxxxxxx.com">Joe Bloggs</a></td>
            <td>
            <div id="docResults">Waiting for results</div>
            <script type="text/javascript" language="JavaScript">
getDocumentLink('/alfresco/template/workspace/SpacesStore/cfbafa38-9edd-11db-adcb-d5343c3763db/workspace/SpacesStore/2594524d-9edd-11db-adcb-d5343c3763db/sample.xml');
</script></td>
        </tr>

You can see this is just an HTML article which Liferay embeds via one of it's portlets.

The Alfresco link is the all important URL addressability feature. We are using the /template URL which then takes the node id of the folder I have all my published documents in, followed by the node id of the script. This works, even with NTLM for me!!

doc_count.ftl 

<#assign template="243e602c-9edd-11db-adcb-d5343c3763db">
<#assign target="/alfresco/template/workspace/SpacesStore/${space.id}/workspace/SpacesStore/${template}" >
<a href="javascript:void(window.open('${target}','Documents','resizable=yes,location=no,menubar=no,scrollbars=yes,status=no,toolbar=no,fullscreen=no,dependent=no,width=800,height=400,left=100,top=100'))">

<#if space.children?size = 0>
No documents
<#elseif space.children?size = 1>
one document
<#else>
${space.children?size} documents
</#if>
</a>

I store this in a space called Company Home/projects/templates

If you look back at the alfresco FreeMarker template, you can see a little more JavaScript in it, plus a further node id from alfresco. These simply link to another template which lists some basic document details and provides links to the documents. The JavaScript pops this link up in a small window for me. The script ID for listing the files is hard-coded but alfresco can dynamically add in the node id for the folder which was originally templated using the document count script.

doc_list.ftl 

<html><head></head>
<body>
<#-- Table of docs in a specific folder -->
<h3>${space.name} documents for ${space.parent.name} </h3>
<table cellpadding=2 border=0 style="BORDER: 1px;">
   <tr>
      <td></td>
      <td><b>Name</b></td>
      <td><b>Last Published</b></td>
      <td><b>Categories</b></td>
   </tr>
   <#list space.childrenByXPath[".//*[subtypeOf('cm:content')]"] as child>
         <tr>
            <td><a href="/alfresco${child.url}" target="new"><img src="/alfresco${child.icon16}" border=0></a></td>
            <td><a href="/alfresco${child.url}" target="new">${child.properties.name}</a></td>
            <td>${child.properties["cm:modified"]?string("dd-MMM-yyyy hh:mm")}</td>
              <td>
             <#if child.properties["cm:categories"]?exists>
              <#list child.properties["cm:categories"] as prop>
                ${prop}<br/>
             </#list>
            </#if>
           </td>
         </tr>
   </#list>
</table>
</body>
</html>

If you can get all of the above working, it should be no problem for you to create the Liferay article as structured content and provide the folder ID as one of the fields in that content. You have many options for storing the alfresco node ids in Liferay. I've not played around with the alfresco portlets to see if you can perhaps use these to allow users to select the folders relevant to the projects.

I hope this was interesting and demonstrates the tip of the iceberg of the power of these two systems combined together.

-Paul

Retrieved from "http://wiki.alfresco.com/wiki/Alfresco_Liferay_and_Ajax"