1. #SummitNow Workflow Dashboard Custom Dashlet (Replacement for My Tasks) 14 November 2013 Bill Young, Flatirons Solutions

2. #SummitNow Overview Justification Problem Analysis Solution

3. #SummitNow Justification Overview of All Active Workflows More Workflow Detail Single Point of Control Tabular Representation Column Ordering Column Filtering

4. #SummitNow Workflow Details Workflow Type Task Status Task Owner Task Start Date/Time Workflow Diagram

5. #SummitNow Problem Analysis OOTB Features on Different Screens Some Features Not Available Custom Dashlet to Unify Needs Modify My Tasks - Insufficient

6. #SummitNow Solution Dashlet Screenshot Dashlet Template Java Webscript Dashlet JavaScript

7. #SummitNow Dashlet Screenshot

8. #SummitNow Dashlet Template

9. #SummitNow Dashlet Template workflowstatus.get.desc.xml Workflow Status Display status of running workflows user-dashlet /components/dashlets/workflowstatus

10. #SummitNow Dashlet Template workflowstatus.get.head.ftl

11. #SummitNow Dashlet Template workflowstatus.get.html.ftl //<![CDATA[ (function(){ new Flatirons.dashlet.WorkflowStatus("${jsid}").setOptions( { maxItems: ${maxItems!"50"}, }).setMessages(${messages}); new Alfresco.widget.DashletResizer("${id}", "${instance.object.id}"); })(); //]]> ${msg("dashlet.title")} style="height: ${args.height}px;" > Loading...

12. #SummitNow Webscript UML and Java code

13. #SummitNow UML

14. #SummitNow Java Code public abstract class AbstractWorkflowWebscript extends AbstractWebScript { /** Service Registry */ private ServiceRegistry serviceRegistry; /** Cache manager */ private CacheManager cacheManager;... Getters/Setters...

15. #SummitNow Java Code public void execute(final WebScriptRequest req, final WebScriptResponse res) throws IOException { IWorkflowWebscriptModelBuilder modelBuilder = new WorkflowStatusModelBuilder(getServiceRegistry(), getCacheManager(), schedulersMap, solrURL, req.getParameter("username")); res.getWriter().write(modelBuilder.getJSONResponse()); }

16. #SummitNow UML

17. #SummitNow Java Code public interface IWorkflowWebscriptModelBuilder { /** * Get the collection of workflow information. * * @return JSON representation for workflow information */ String getJSONResponse(); }

18. #SummitNow Java Code public String getJSONResponse() { JSONObject jsonObj = new JSONObject(); jsonObj.put("data", makeDataArray()); return jsonObj.toString(); }

19. #SummitNow Java Code protected JSONArray makeDataArray() { JSONArray jsonArray = new JSONArray(); // get workflow and task information Map >> workflowsMap = getWorkflowsMap(workflowService.getActiveWorkflows()); for (String workflowName : workflowsMap.keySet());) { // Iterate the workflows Map > tasksMap = workflowsMap.get(workflowName); for (String taskName : tasksMap.keySet()) {// Iterate Tasks/Paths // Process the list of JSON Objects representing the workflow instances for (JSONObject dataObject : tasksMap.get(taskName)) { if (dataObject != null) { jsonArray.add(dataObject); } return jsonArray; }

20. #SummitNow JSON Response "workflowData": [ { "workflowName": "activiti$FlatironsCustomEdit", "taskName": "adwf$directorProcessSelectionEditTask", "lastCompletedTask": "", "taskId": "activiti$17844", "taskTitle": "Director Choice", "owneruserName": "byoung", "ownerfirstName": "Bill", "ownerlastName": "Young", "isPooled": true, "isEditable": true, "isSystemTask": false, "isExecutingTask": false, "isQueuedTask": false, "isFailedTask": false, "initiatoruserName": "byoung", "initiatorfirstName": "Bill", "initiatorlastName": "Young", "workPackageName": "Summit C", "count": "46", "startDate": 1382814274000,... },... ]

21. #SummitNow JSON Response "prefs": { "numItemsDisplayed": "-1", "filterValues": [ "", "", "Actions", "Bill%20Young%20%28byoung%29", "Work Package", "Count", "", "Last Activity" ], "sortValues": [ "sorting", "sorting", "sorting_disabled", "sorting", "sorting", "sorting_disabled", "sorting", "sorting_desc" ] }

22. #SummitNow Dashlet JavaScript YUI plus jQuery Data Tables if ((typeof Flatirons == "undefined") || !Flatirons) { var Flatirons = {}; } /** * Flatirons top-level dashlet namespace. * * @namespace Flatirons * @class Flatirons.dashlet */ Flatirons.dashlet = Flatirons.dashlet || {};

23. #SummitNow Dashlet JavaScript /** * Dashboard WorkflowStatus component. * * @namespace Flatirons.dashlet * @class Flatirons.dashlet.WorkflowStatus */ (function() { /** * YUI Library aliases */ var Dom = YAHOO.util.Dom, Event = YAHOO.util.Event, Selector = YAHOO.util.Selector; /** * Alfresco Slingshot aliases */ var $html = Alfresco.util.encodeHTML, $siteURL = Alfresco.util.siteURL;

24. #SummitNow Dashlet JavaScript /** * Dashboard WorkflowStatus constructor. * * @param {String} htmlId The HTML id of the parent element * @return {Flatirons.dashlet.WorkflowStatus} The new component instance * @constructor */ Flatirons.dashlet.WorkflowStatus = function WorkflowStatus_constructor(htmlId) { Flatirons.dashlet.WorkflowStatus.superclass.constructor.call(this, "Flatirons.dashlet.WorkflowStatus", htmlId, [ "button", "container", "datasource", "datatable", "paginator", "history", "animation" ]); return this; };

25. #SummitNow Dashlet JavaScript /** * Extend from Alfresco.component.Base */ YAHOO.extend(Flatirons.dashlet.WorkflowStatus, Alfresco.component.Base); /** * Augment prototype with Common Workflow actions to reuse createFilterURLParameters */ YAHOO.lang.augmentProto(Flatirons.dashlet.WorkflowStatus, Alfresco.action.WorkflowActions);

26. #SummitNow Dashlet JavaScript /** Augment prototype with main class implementation, ensuring overwrite is enabled */ YAHOO.lang.augmentObject(Flatirons.dashlet.WorkflowStatus.prototype, { /** * Object container for initialization options * @property options * @type object */ options : { /** * Maximum number of tasks to display in the dashlet. * @property maxItems * @type int * @default 50 */ maxItems : 50, },

27. #SummitNow Dashlet JavaScript /** Fired by YUI when parent element is available for scripting */ onReady : function WorkflowStatus_onReady() { // Set event listeners to notice when anything is // changed so that change can be saved to prefs. $('#wfstatus-tasks-table_length').live('change', function(event) { WorkflowStatus_updatePrefs(); }); $('#wfstatus-tasks-table thead tr th').live('click', function(event) { WorkflowStatus_updatePrefs(); }); $('#wfstatus-tasks-table thead tr th span input').live( 'propertychange keyup input paste', function(event) { WorkflowStatus_updatePrefs(); });

28. #SummitNow Dashlet JavaScript $("#wfstatus-loading").show(); var msgRef = this; var cur_call = $.ajax({ dataType : 'json', url : Alfresco.constants.PROXY_URI + 'flatirons/workflowstatus?username=‘ + Alfresco.constants.USERNAME, method : 'get', cache : false, success : function(data) { /* build table */ }, error : function(xhr, ajaxOptions, error) { /* show error */ } }); }

29. #SummitNow Dashlet JavaScript var prefsItem = data.data[0].prefs; var workflowDataItem = data.data[0].workflowData; for (var itemIndex in workflowDataItem) { var item = workflowDataItem[itemIndex]; // build cells from workflow item row = ' ' + workflowType + task + actions + initiator + workPackage + countInfo + claimant + lastActivityTime + ' '; // put row in table } // attach data table behavior var resTable = $('#wfstatus-tasks-table').dataTable({... });

30. #SummitNow Dashlet JavaScript /** * Post the JSON map of user preferences to the Alfresco user preferences webscript * * @method: WorkflowStatus_updatePrefs */ function WorkflowStatus_updatePrefs() { var prefs = {}; prefs.numItemsDisplayed = $('#wfstatus-tasks-table_length').find(":selected").val();... this.preferencesService = new Alfresco.service.Preferences(); var config = { failureCallback : {... }, successCallback : {... } }; this.preferencesService.set("com.flatirons.workflow.status.preferences", prefs, config); };

31. #SummitNow Demo

32. #SummitNow Other Considerations Table Load Time User Preferences Column Width Adjustments

33. #SummitNow Contributors Sri Patil, Senior Developer, Flatirons April Eggers, Developer, Flatirons

34. #SummitNow Questions

35. #SummitNow