Share Dashlet Using YUI

Dashlet is part of alfresco share dashboard.Alfresco provides some out of box dashlets like "My Task", "RSS Feed", "Web View","My Calendar", "My Sites" and many other dashlets are available.You can test all this dashlet by adding it in your dashboard.User can add dashlets on two places. One of them is User Dashboard and other is Site Dashboard.

Technically , Dashlet is nothing but webscript.Webscript which created in alfresco share.

Developer can create both kind of dashlet which can be added on both places User Dashboar as well as SiteDashboard.

For creating dashlet you will need to have basic knowledge of webscript. If you dont have any knowledge regarding same you can follow below link for deep knowledge.

https://wiki.alfresco.com/wiki/Web_Scripts

For creating dashlet in alfresco share you will need to create below files, Its not required to create all files.It depends on you requirement, and how you want to make behave your share dashlet. The importance of all files is explained as below.

FileType	Description	Suffix
Descriptor	Dashlet descriptor contains the definition of dashlet.For example ,family of dashlet,URL of dashlet etc…	*get.desc.xml
Javascript Controller	Controller of dashlet from where information are passed to template engine(freemarker)	*.js
Template Type	It renderes the output.	.html.ftl
Header	Includes style sheet and client side javascript.(deprecated)	*.head.ftl
YUI Script	Client side javascript module.	SampleDashlet.js

Above are the files which are used for creating dashlet. Below is an simple dashlet.

sample.get.desc.xml

sample.get.js

sample.get.html.ftl

sample.get.head.ftl(deprecated)

sample.js

Here please not the difference between sample.js and sample.get.js. sample.js is client side javascript file while sample.get.js is server side javascript file. Many people get confused in this.This is the first thing which you should remember while developing a dashlet.

Below is an example for simple dashlet in alfresco.

sample.get.desc.xml

    Sample Dashlet

    Provide Search of people and display in a list

    user-dashlet

    /components/dashlets/member-directory

  

sample.get.js

model.name="Krutik";

SampleDashlet.js

model.name="Krutik";

sample.get.html.ftl

<#assign id = args.htmlid?html>
<@markup id="js">

  <@script type="text/javascript" src="${url.context}/res/components/sample-dashlet/SampleDashlet.js" group="dashlets"/>
</@>

<@markup id="widgets">
    <@createWidgets group="dashlets"/>
</@>

<@markup id="html">

        



Sample Dashlet




Click me



The user dashboard displays when users arrive to a dashboard of user, and contains dashlets. A dashlet offers a quick view into the content or activities of the user. You can use the out-of-the-box dashlets or add your own custom dashlets in to your dashboard.

    





By ${name}

    






</@>   

SampleDashlet.js

(function()
{
   /**

    * YUI Library aliases
*/

      Event = YAHOO.util.Event;
var Dom = YAHOO.util.Dom,


    * Alfresco Slingshot aliases
/**
    */

   var $html = Alfresco.util.encodeHTML,
$combine = Alfresco.util.combinePaths;


   Alfresco.dashlet.SampleDashlet = function SampleDashlet_constructor(htmlId)
{

   };
return Alfresco.dashlet.SampleDashlet.superclass.constructor.call(this, "Alfresco.dashlet.SampleDashlet", htmlId);


   YAHOO.extend(Alfresco.dashlet.SampleDashlet, Alfresco.component.Base,
/**
    * Extend from Alfresco.component.Base and add class implementation
    */
   {
      /**

      options:
* Object container for initialization options
       *
       * @property options
       * @type object
       */
      {
       
      },
      

        Event.addListener(this.id + "-link", "click", this.onLinkClick, this, true);
onReady: function SampleDashlet_onReady()
      {

     var link = Dom.get(this.id + "-link");     
        console.log("Dashlet Ready");



},
      onLinkClick: function SampleDashlet_onLinkClick(e)
      {
       alert("Clicked...");
       return false;
      }
   });
})();

Once user clicks on click me link.