Workflow status diagram in the document details

One of the cool things Activiti has since its beginnings is the workflow diagram. This diagram is created during the workflow definition, typically using Eclipse's Activiti plugin. During a workflow's lifetime that diagram gets updated indicating the state of the workflow by highlighting the current task.

Activiti Workflow Diagram

The workflow above is waiting in the "Review Task" for a user to perform an action. At the current Alfresco implementation, this image is only available in the workflows' instance page (quite hidden!). It's useful for users to know about the status of a document, and what a better way than showing that little diagram? That gives user a context of the document's state and the path that has to follow to complete the workflow.

So I wrote a little Share extension that shows that diagram in the documents' details page anytime a document belongs to one or more workflows. The final result looks like the image below, and the code can be found in GitHub.

Activiti Diagram Document details

The intention of this blog post was to show how easily the workflow diagram can be retrieved to be shown anywhere. 

The code

The hardest thing was finding out what was the URL to call to retrieve the image from. Thanks to tools such as "Developer Tools" from Chrome, or Firebug, that's a job that takes 2 minutes.

Once I found out the URL, then I added a new region to the page template and defined the component in the template instance, pointing it to a URL:

web-extension/templates/org/alfresco/document-details.ftl

...
<@region id="document-workflow-diagram" scope="template"/> <@region id="document-actions" scope="template"/> <@region id="document-tags" scope="template"/> <@region id="document-links" scope="template"/> <@region id="document-metadata" scope="template"/> ...

 

web-extension/site-data/template-instances/document-details.xml

...

      
         document-workflow-diagram
         /bataon/components/document-details/document-workflow-diagram
	 
            {nodeRef}
         
      
...

 

The next thing is creating the webscript that renders the component we specified in the template. This webscript was quickly done and based on the existing document-workflows webscript. The only thing that I changed was the Freemarker template to render the image:

web-extension/site-webscripts/com/bataon/components/document-details/document-workflows.get.html.ftl

...
<#if workflows?size > 0>
<#list workflows as workflow>
${workflow.title?html}
${workflow.title?html}
...

Add new comment