Alfresco Surf Code Camp
Lab 1: Hello World Dashlet for Share

Hands-on Lab
Objectives
• Build a custom dashlet for Alfresco Share
• Select dashlet from configure dashboard page
• Add it to your dashboard to view it
Notes
• Alfresco Share is an Alfresco Surf-powered application
• Dashlets are web components
12/01/09 2

Directories
Alfresco Share web application ($SHARE_HOME)
• /opt/alfresco/tomcat/webapps/share
site-data
• $SHARE_HOME/WEB-INF/classes/alfresco/site-data
site-webscripts
• $SHARE_HOME/WEB-INF/classes/alfresco/site-webscripts
templates
• $SHARE_HOME/WEB-INF/classes/alfresco/templates
12/01/09 3

1 - Preparation
Navigate to the site-webscripts directory
• $SHARE_HOME/WEB-INF/classes/alfresco/site-webscripts
Create a folder called demo
Navigate into the demo directory
• $SHARE_HOME/WEB-INF/classes/alfresco/site-webscripts/demo
Create a Web Script:
• helloworld
12/01/09 4

2 – Hello World Dashlet
helloworld.get.desc.xml
<webscript>
<shortname>Hello World Dashlet</shortname>
<description>Hello World Dashlet</description>
<family>user-dashlet</family>
<url>/demo/helloworld</url>
</webscript>
helloworld.get.js
model.body = \"All your base are belong to us!\";
helloworld.get.html.ftl
<div class=\"dashlet\">
<div class=\"title\">Hello World</div>
<div class=\"body\">${body}</div>
</div>
12/01/09 5

3 – Test it manually
Browse to
• http://labs3c:8080/share/service/index
Click on ‘Refresh’ to reset the Web Scripts cache
Test your dashlet
• http://labs3c:8080/share/service/demo/helloworld
12/01/09 6

4 – View it in Share
Browse to
• http://labs3c:8080/share
Log in
• admin/admin
Click on ‘Customize Dashboard’
Click ‘Add Dashlets’
You should see your new dashlet
• Try adding it to your dashboard page
12/01/09 7

5 – Web Script Configuration
Configuration files for Web Scripts
Allows Web Scripts to store configuration files in
associated XML
Let's give it a shot with our Hello World Dashlet
12/01/09 8

5 – Web Script Configuration
helloworld.get.config.xml
<properties>
<title>Hello World</title>
</properties>
helloworld.get.html.ftl
<div class=\"dashlet\">
<div class=\"title\">${config.script[\"properties\"][\"title\"]}</div>
<div class=\"body\">${body}</div>
</div>
12/01/09 9

6 – Test it manually
Browse to
http://labs3c:8080/share/service/index
●
Click on ‘Refresh’ to reset the Web Scripts cache
Test your dashlet
http://labs3c:8080/share/service/demo/helloworld
●
12/01/09 10

Wrap-up
In this lab, you...
• Created a simple Share Dashlet
• The Dashlet was a good old fashioned web script
• The web script read a parameter from a config file
12/01/09 Optaros and Client confidential. All rights reserved. 11