Developing a custom workflow dialog in AEM

dialog
Photo by Jason Leung on Unsplash

We sometimes need to capture data during a workflow step in AEM and this can easily be achieved with out of the box components. Furthermore, we can choose if the captured data is stored on page properties or on the workflow’s work item.

Building the dialog

The first step is to build a dialog, the same way you build a Touch UI dialog. Here’s an example:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Publish"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <myText
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                        fieldLabel="Text"
                        name="myText"
                        required="{Boolean}true"/>
                </items>
            </column>
        </items>
    </content>
</jcr:root>
dialog tree
Dialog tree

Workflow step

The next step is to add the previously created dialog to the workflow step.

You will need to add a Dialog Participant Step or a Dynamic Participant Step to your workflow depending on your needs. On my example, I’m adding a Dialog Participant Step.

Participant steps
Participant Steps

In the participant step set the dialog path to the path where the dialog was created, e.g. /apps/example/workflow-dialog-example/cq:dialog

Workflow step dialog configuration
Workflow step dialog configuration

Where is the data stored?

Depending on the name of the field, the data can be either stored on the page properties, if the workflow is applied to a page, or on the workflow itself.

If the field’s name parameter starts with ./jcr:content/ (e.g. ./jcr:content/myText) then it will be stored on the workflow payload (page properties node). If you want to achieve this, you will need to ensure that the workflow user has write permissions on the workflow payload path.

Page properties node
Page properties node

If the field name is the property name (e.g. myText) it will be stored on the workflow instance’s work item metadata node. 

Workflow history metadata
Workflow history metadata

Conclusion

Depending on your requirements you can decide where you would like to store the collected information. When you store on the workflow instance you will likely have to create custom processors in order to use the information collected.  Storing in the page properties can be very helpful as the data can then be shown to the author in the page properties by adding a custom field. 

Get in touch on LinkedIn or leave comments for any questions or suggestions.

Leave a Reply