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.

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

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.

Share this: