Alfresco Surf Code Camp

Lab 2: User profile dashlet for Share

07/11/08 2

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

Hands-on Lab

07/11/08 3

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

Directories

07/11/08 4

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

1 - Preparation

07/11/08 5

profile-viewer.get.desc.xml

<webscript> <shortname>Profile Viewer</shortname> <description>Profile Viewer</description> <family>user-dashlet</family> <url>/demo/profileviewer</url></webscript>

2 – Profile Viewer Dashlet

07/11/08 6

profile-viewer.get.js

var username = "admin";

// call over to Alfresco and fetch some contentvar connector = remote.connect("alfresco");var data = connector.get("/api/people?filter=" + username);

// create json object from datavar json = eval('(' + data + ')');

// set our user onto the modelfor(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;

}}

2 – Profile Viewer Dashlet

07/11/08 7

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>

2 – Profile Viewer Dashlet

07/11/08 8

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>

2 – Profile Viewer Dashlet

07/11/08 9

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=

3 – Test it manually

07/11/08 10

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

4 – View it in Share

07/11/08 11

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

5 – Current User

07/11/08 12

profile-viewer.get.js

var username = context.user.id;

// call over to Alfresco and fetch some contentvar connector = remote.connect("alfresco");var data = connector.get("/api/people?filter=" + username);

// create json object from datavar json = eval('(' + data + ')');

// set our user onto the modelfor(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;

}}

5 – Current User

07/11/08 13

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

6 – View it in Share

07/11/08 Optaros and Client confidential. All rights reserved. 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