Optaros Surf Code Camp Lab 2

  • 3,679 views
Uploaded on

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 …

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

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • tried the first dashlet in Optaros Surf Code Camp Lab 2 but user was undefined

    using Alfresco EE 3.2 any ideas?

    received error message:
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
3,679
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
208
Comments
1
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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