How to implement a Share Dashlet ?

What is a Dashlet ?

A Dashlet is a web component in Share which offers a quick view into the content or activities of the site.

Some OOTB Share Dashlets are:

Site Activities dashlet, 

Calendar dashlet,

Recently Modified Documents dashlet.

Dashlets basically consist of Spring Web Scripts that belong to a specific family.

1) Dashlets that you intend to make available for placement onto the user dashboard should be placed into the user-dashlet family.

2) Dashlets that you intend to make available for placement onto a site dashboard should be placed into the site-dashlet family.

3) Dashlets that you intend to make available for placement on both dashboards should be placed into the dashlet family.

A Web Script is simply a service bound to a URI which responds to HTTP methods such as GET, POST, PUT and DELETE.

To know, in detail about Web Script, please go through, http://wiki.alfresco.com/wiki/Web_Scripts

hello-world.get.desc.xml

Knowledge Base
A summary of all knowledge base articles
site-dashlet
/components/dashlets/helloworld

A High level diagram of the processes involved in communication between the Dashlet in the Share User Interface, the Surf WebScript and the Alfresco WebScript over HTTP.

 

Dashlets can also be created without accessing Alfresco Content Repository.

E.g. Pulling in a feed from an external RSS feed like Facebook Feeds.

Let us create one Site Dashlet, which will give us folders information created in a particular site.

For that, we will create a Data Webscript in Alfresco, which will provide given site's folder information in JSON format.

In Share, we will create a Presentation Webscript, which will access this Data Webscript result and will present into Share.

Steps for creating a Data Webscript in Alfresco:

1) Preparation

Create following files under 

[tomcat\shared\classes\alfresco\extension\templates\webscripts\com\alfresco\slingshot\documentlibrary]

1) folderInfo.get.desc.xml

2) folderInfo.get.js

3) folderInfo.get.json.ftl

folderInfo.get.desc.xml

   Site Folder Information
   List down site folders
   /slingshot/doclib/folderInfo/{site}
   argument
   user

folderInfo.get.js

//Get siteId from webscript URL
var siteId = url.templateArgs.site;

if(siteId != null)
{
 //Make a query to search all folders under 
 //give Site's documentLibrary
var searchQuery = "PATH:\"/app:company_home/st:sites/cm:" +  siteId  +  "/cm:documentLibrary//*\" AND TYPE:\"cm:folder\"";

 //Create a search parameter
 var queryPara = {
      query: searchQuery,
   };
 //Get search result      
 var nodeList = search.query(queryPara);

 model.folderNameList = nodeList;
}

folderInfo.get.json.ftl

{

 "folderlist": [

  <#if folderNameList?exists> 

          <#list folderNameList as folderName>
           {
                   "name" : "${ folderName.properties["cm:name"]}",
                    "title"   : "${ folderName.properties["cm:title"]}",
                    "creator" : "${ folderName.properties["cm:creator"]}",
                    "createdDate"  : "${ folderName.properties["cm:created"]?date}",
                    "modifiedDate" : "${ folderName.properties["cm:modified"]?date}",
                    "modifier"  : "${ folderName.properties["cm:modifier"]}"

          } <#if folderName _has_next>,< /#if>
          < /#list>
  < /#if>
 ]

}

2) Test it manually

• Browse to

http://localhost:8080/alfresco/service/index

• Click on ‘Refresh’ to reset the Web Scripts cache

•    Hit the webscript URL - http://localhost:8080/alfresco/service/slingshot/doclib/folderInfo/demoproject

           (NOTE : demoproject site should be created in Share)

• Check the JSON response.

Steps for creating a Presentation Webscript in Share:

1) Preparation

Create a site-dashlet under

 [tomcat\shared\classes\alfresco\web-extension\site-webscripts\ com\alfresco\components\dashlets]

1)    site-info.get.desc.xml

2)    site-info.get.js

3)    site-info.get.html.ftl

4)    site-info.get.properties

site-info.get.desc.xml

   Site Folder Info
   
Component used to list site’s folder information
   
   site-dashlet
   /components/dashlets/site-folder-info

 

site-info.get.js

var siteId;
if(page.url.templateArgs.site != "" && page.url.templateArgs.site != null)
{
 //Get siteId from URL
 siteId = page.url.templateArgs.site;

 /**
         * Connect to alfresco and pass the URL 
  * of the webscript to get JSON object
  */
 var result = remote.call("/slingshot/doclib/folderInfo/" + siteId);

 //parse JSON text to produce javascript object
 var data = eval('(' + result + ')');

 //Pass object to FTL using 'model'
 model.folderInfo = data["folderlist"];

}

site-info.get.html.ftl

           
                   ${msg("header.siteinfo")}
           
           <#if folderInfo?exists && folderInfo?size > 0>

                          <#list folderInfo as folder>
  
         <#assign detail = msg("org.alfresco.folder.created","${folder.name}", "${folder.creator}" , "${folder.createdDate?date}")>
    
                           
     ${detail}
    
     

    
< /#list>

         <#else>
          ${msg("no.folder")}
         < /#if>
         

site-info.get.properties

header.siteinfo=Site Folder Information
no.folder=No folder has been added
org.alfresco.folder.created= --  {0} folder has been created by {1} on {2}

2) View it in Share

• Browse to:

http:// localhost:8080/share

• Log in as:

admin/admin

• Click on ‘Customize Dashboard’

• Click ‘Add Dashlets’

• You should see your new dashlet ‘Site Folder Info’

• Try adding it to your dashboard page