In the second Surf Code Camp lab, you'll write a little user profile dashlet. This one is slightly more complex than the hello world dashlet because it makes remote calls to the Repository tier. Full solution source code is at http://ecmarchitect.com/images/green-energy-code-camp.zip

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

2. 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

3. 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

4. 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

5. 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

6. 2 – Profile Viewer Dashlet
profile-viewer.get.js
var username = quot;adminquot;;
// call over to Alfresco and fetch some content
var connector = remote.connect(quot;alfrescoquot;);
var data = connector.get(quot;/api/people?filter=quot; + username);
// create json object from data
var json = eval('(' + data + ')');
// set our user onto the model
for(var i = 0; i < json[quot;peoplequot;].length; i++)
{
var user = json[quot;peoplequot;][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

7. 2 – Profile Viewer Dashlet
profile-viewer.get.html.ftl
<div class=quot;dashletquot;>
<div class=quot;titlequot;>Profile Viewer</div>
<div class=quot;bodyquot;>
<p valign=quot;topquot;>
<img src=quot;${url.context}/proxy/alfresco/${avatar}quot; class=quot;profilequot; />
<span class=quot;profile-labelquot;>User Name</span>
<a class=quot;profile-namequot; href=quot;${link}quot;>
${firstName} ${lastName}
</a>
</p>
</div>
</div>
07/11/08 7

8. 2 – Profile Viewer Dashlet
profile-viewer.get.head.ftl
<style type=quot;text/cssquot;>
.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

9. 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

10. 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

11. 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

12. 5 – Current User
profile-viewer.get.js
var username = context.user.id;
// call over to Alfresco and fetch some content
var connector = remote.connect(quot;alfrescoquot;);
var data = connector.get(quot;/api/people?filter=quot; + username);
// create json object from data
var json = eval('(' + data + ')');
// set our user onto the model
for(var i = 0; i < json[quot;peoplequot;].length; i++)
{
var user = json[quot;peoplequot;][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

13. 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

14. 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