Alfresco Surf Code Camp
Lab 2: User profile dashlet for Share

Hands-on Lab
Objectives
• To learn about remote connections from within Surf Components
• To practice the retrieval and manipulation of JSON data via FTL
Notes
• Alfresco Share is an Alfresco Surf-powered application
• Dashlets are web components
07/11/08 2

Directories
Alfresco Share web application
• /opt/alfresco/tomcat/webapps/share
site-data
• /WEB-INF/classes/alfresco/site-data
site-webscripts
• /WEB-INF/classes/alfresco/site-webscripts
templates
• /WEB-INF/classes/alfresco/templates
07/11/08 3

1 - Preparation
Go to the Share directory:
• /opt/alfresco/tomcat/webapps/share
Navigate to the site-webscripts directory
• /WEB-INF/classes/alfresco/site-webscripts
Create a folder called demo
Navigate into the demo directory
• /WEB-INF/classes/alfresco/site-webscripts/demo
Create a Web Script:
• profile-viewer
07/11/08 4

2 – Profile Viewer Dashlet
profile-viewer.get.desc.xml
<webscript>
<shortname>Profile Viewer</shortname>
<description>Profile Viewer</description>
<family>user-dashlet</family>
<url>/demo/profileviewer</url>
</webscript>
07/11/08 5

2 – Profile Viewer Dashlet
profile-viewer.get.js
var username = \"admin\";
// call over to Alfresco and fetch some content
var connector = remote.connect(\"alfresco\");
var data = connector.get(\"/api/people?filter=\" + username);
// create json object from data
var json = eval('(' + data + ')');
// set our user onto the model
for(var i = 0; i < json[\"people\"].length; i++)
{
var user = json[\"people\"][i];
if(user.userName == username)
{
model.avatar = user.avatar;
model.link = user.url; // does this come back /person?
model.userName = user.userName;
model.firstName = user.firstName;
model.lastName = user.lastName;
}
}
07/11/08 6

2 – Profile Viewer Dashlet
profile-viewer.get.html.ftl
<div class=\"dashlet\">
<div class=\"title\">Profile Viewer</div>
<div class=\"body\">
<p valign=\"top\">
<img src=\"${url.context}/proxy/alfresco/${avatar}\" class=\"profile\" />
<span class=\"profile-label\">User Name</span>
<a class=\"profile-name\" href=\"${link}\">
${firstName} ${lastName}
</a>
</p>
</div>
</div>
07/11/08 7

2 – Profile Viewer Dashlet
profile-viewer.get.head.ftl
<style type=\"text/css\">
.profile-label
{
font-size: 12px;
font-family: Verdana;
font-weight: bold;
color: black;
padding: 4px;
}
.profile-name
{
font-size: 12px;
font-family: Verdana;
color: black;
padding: 4px;
}
A.profile-name
{
text-decoration: none;
}
IMG.profile
{
float:left;
}
</style>
07/11/08 8

3 – Test it manually
Browse to
• http://labs3c:8080/share/service/index
Click on ‘Refresh’ to reset the Web Scripts cache
Add it as a dashlet onto your Share Dashboard
Test your dashlet in Share
• http://labs3c:8080/share
Repository tier web script
• http://labs3c:8080/alfresco/service/api/people?filter=
07/11/08 9

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
07/11/08 10

5 – Current User
Sneak peak of Alfresco Surf API
Web Components have special variables available to
them
context
• the request context
context.user
• the current user
context.user.id
• the current user id
07/11/08 11

5 – Current User
profile-viewer.get.js
var username = context.user.id;
// call over to Alfresco and fetch some content
var connector = remote.connect(\"alfresco\");
var data = connector.get(\"/api/people?filter=\" + username);
// create json object from data
var json = eval('(' + data + ')');
// set our user onto the model
for(var i = 0; i < json[\"people\"].length; i++)
{
var user = json[\"people\"][i];
if(user.userName == username)
{
model.avatar = user.avatar;
model.link = user.url;
model.userName = user.userName;
model.firstName = user.firstName;
model.lastName = user.lastName;
}
}
07/11/08 12

6 – 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
• Create a test user and try out your dashboard
07/11/08 13

Wrap-up
In this lab, you...
• Created another Share dashlet
• Added content to HEAD by naming one of the web script files with
“.head.ftl”
• Made a remote call to the repository using the out-of-the-box
“alfresco” endpoint
• Retrieved JSON by invoking a web script on the repository tier
• Used a built-in root object to determine the current user's
username
07/11/08 Optaros and Client confidential. All rights reserved. 14