1. Developing Great Dashlets Will Abson – @wabson

2. About Me Project Lead, Share Extras Alfresco Developer and previously Solutions Engineer DevCon 2011 – Customizing Share Best Practices - with Jeff Potts Dashlet Challenge Judge 2011 & 2012

3. In this presentation…

4. …we’ll take your dashlets From This

5. …we’ll take your dashlets From ThisTo This

6. What Makes a Great Dashlet? Summarise information in meaningful ways Configurable Responsive user interface Rich controls

7. Event Scheduling by Bertrand Forest

8. Social Tops Dashlet by Sébastien Le Marchand

9. JMX Statistics Dashlet by Chris Paul

10. Now Let’s Get our Hands Dirty!

11. Agenda The Basics Hello World Utilising UI Components Title Bar Actions Dashlet Resizers YUI Buttons Dom Manipulation Event Listeners User Preferences Popup Notifications

12. Agenda Demo

13. Additional Topics Utilising UI Components (ctd.) Configuration dialogues Fetching Data Dashlets that access the Alfresco Repository Dashlets that access third party services

14. Example Project Source Code Each stage in the walk-through is available in GitHub Corresponds to a different branch https://github.com/wabson/great-dashlets I will demonstrate using a local repository

15. Hello World Dashlet for 4.2 Based on Share Extras ‘Sample Dashlet’ Displays a configurable message to the user Demonstrates structure of a basic dashlet Web-tier web script Client-side assets Best practice Displays static / semi-dynamic text We will go further!

16. Hello World Dashlet for 4.2

17. Hello World Example 1 https://github.com/wabson/great- dashlets/tree/helloworld1

18. Hello World Example 1

19. Hello World Example 2 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashletsconfigalfrescosite-webscriptscomsomecocomponentsdashlets helloworld.get.desc.xml helloworld.get.config.xml helloworld.get.js helloworld.get.html.ftl helloworld.get.properties

20. Hello World Example 1 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.html.ftlconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.html.ftl

21. Title Bar Actions New in Alfresco 4.0 Replaces action links previously placed in dashlet toolbars e.g. ‘Configure’ action Actions may point to a link in the same or a new window/tab or trigger custom YUI or Bubbling events To use, create an instance of Alfresco.widget.DashletTitleBarActions More info http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.widget.DashletTitleBarActions.ht mlhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.widget.DashletTitleBarActions.ht ml

22. Hello World Example 2 https://github.com/wabson/great- dashlets/tree/helloworld2

23. Hello World Example 2 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.jsconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.js

25. Hello World Example 2 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.html.ftlconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.html.ftl

26. Dashlet Resizers Allows resizing of user dashlets or site dashlets by Site Managers Resizing is persistent Height attribute stored in component configuration To use, create an instance of Alfresco.widget.DashletResizer Must supply HTML ID and component ID More info http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.widget.DashletResizer.htmlhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.widget.DashletResizer.html

27. Hello World Example 3 https://github.com/wabson/great- dashlets/tree/helloworld3

28. Hello World Example 3 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.jsconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.js

29. Dashlet Client-side Components Up until now we have used standard re-usable classes (or widgets) Most dashlets will require us to define our own custom dashlet classes to implement the behaviour required To do this, extend Alfresco.component.Base to add your own implementation Implementation should be held in custom client-side JS files, which we need to include in the page Once we have done this we can create an instance of the client-side component on the page

30. Hello World Example 4 https://github.com/wabson/great- dashlets/tree/helloworld4

31. Hello World Example 4 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.jsconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.js

32. Hello World Example 4 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.html.ftlconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.html.ftl

33. Hello World Example 4 great-dashletsgreat-dashlets / source / web / someco / components / dashlets / hello-world.jssourcewebsomeco componentsdashletshello-world.js

34. Hello World Example 4

36. Push Button Controls YUI2 provides a range of different button types http://developer.yahoo.com/yui/button/ Alfresco.util provides a handy function for setting up push buttons {YAHOO.widget.Button} Alfresco.util.createYUIButton(p_scope, p_name, p_onclick, p_obj, p_oElement) Button element must be declared in HTML Easier to use this if the standard component markup is used But we could use YAHOO.widget.Button() directly http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.util.html#.createYUIButtonhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.util.html#.createYUIButton

37. Dom Manipulation YAHOO.util.Dom provides a range of static methods for locating and manipulating Dom elements YAHOO.util.Dom.get() YAHOO.util.Dom.getAttribute() YAHOO.util.Dom.addClass() Once we have an HTML element in our hands we can Set its content ( innerHTML ) Add sibling and child elements Alfresco.util builds on these functions http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.util.htmlhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.util.html

38. Hello World Example 5 https://github.com/wabson/great- dashlets/tree/helloworld5

39. Hello World Example 5 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.html.ftlconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.html.ftl

40. Hello World Example 5 great-dashletsgreat-dashlets / source / web / someco / components / dashlets / hello-world.jssourcewebsomeco componentsdashletshello-world.js

41. Dashlet Toolbars Filters are usually implemented using YUI ‘menu’ buttons Or could be ‘split’ buttons if clickable too Like push buttons we create in HTML Activate the button using Alfresco.util.createYUIButton Need to provide a function to handle the click event Actions usually implemented as HTML links (with icons) Could be a hyperlink to another page or wired to a function using YAHOO.util.Event.addListener()

42. Hello World Example 6 https://github.com/wabson/great- dashlets/tree/helloworld6

43. Hello World Example 6 great-dashletsgreat-dashlets / config / alfresco / site-webscripts / com / someco / components / dashlets / hello- world.get.html.ftlconfigalfrescosite-webscriptscomsomecocomponentsdashletshello- world.get.html.ftl

44. Hello World Example 6 great-dashletsgreat-dashlets / source / web / someco / components / dashlets / hello-world.jssourcewebsomeco componentsdashletshello-world.js

45. Hello World Example 6

46. User Preferences Allow us to store user-specific configuration properties, e.g. last filter state Properties are stored using JSON in a hierarchical structure, e.g. {com: {someco: {someapp: {foo: “bar”}}}} Implemented in Alfresco.service.Preferences Dashlets should create a class instance in their constructor Provide callback functions when loading and saving data http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.service.Preferences.htmlhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.service.Preferences.html

47. Hello World Example 7 https://github.com/wabson/great- dashlets/tree/helloworld7

48. Hello World Example 7 great-dashletsgreat-dashlets / source / web / someco / components / dashlets / hello-world.jssourcewebsomeco componentsdashletshello-world.js

49. Hello World Example 7

51. User Notifications and Prompts Notifications appear briefly and then fade out Prompts require the user to confirm something By default a single button is shown We can provide multiple buttons, e.g. ‘Yes’, ‘No’ Other functions – get user input, display web scripts, display forms Implemented using static methods on Alfresco.util.PopupManager http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.service.Preferences.htmlhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.service.Preferences.html

52. Hello World Example 8 https://github.com/wabson/great- dashlets/tree/helloworld8

53. Hello World Example 8 great-dashletsgreat-dashlets / source / web / someco / components / dashlets / hello-world.jssourcewebsomeco componentsdashletshello-world.js

54. Demo

55. Get Latest Document Dashlet Original implementation by Jeff Potts http://ecmarchitect.com/archives/2012/05/04/1592 http://ecmarchitect.com/archives/2012/05/15/1599 Improvements by Rik Taminaars Further improvements for these examples A more advanced dashlet Fetches data from the repository Configurable per-instance using a config dialogue

56. Loading Repository Data Credit: Jeff Potts

57. Loading Repository Data Data is loaded using a custom repository web script returning JSON data But you could re-use existing web scripts Data loading in web-tier – Alfresco.util.Ajax See http://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.util.Ajax.htmlhttp://sharextras.org/jsdoc/share/community- 4.2.b/symbols/Alfresco.util.Ajax.html Data loading in client-side component How do we reload data?

58. Get Latest Document Example 1 https://github.com/wabson/great- dashlets/tree/getlatestdoc2

59. Dashlet Configuration Dialogues Allows the dashlet to be tailored to different situations Configurable by users (user dashlets) or Site Managers (site dashlets) Same storage mechanism as Dashlet Resizer Implement using Alfresco.module.SimpleDialog instance (docs)docs Must include client-side files for this class Must provide a web script to implement the UI Optionally, we can provide a custom form target Most dashlets will use the default modules/dashlet/config/{id} target

60. Get Latest Document Example 2 https://github.com/wabson/great- dashlets/tree/getlatestdoc2

61. More Information https://github.com/wabson/great-dashlets http://sharextras.org/ http://sharextras.org/jsdoc/share/