Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
SOLVED

How do you create or customize workflow task types? or - Customizing tasks for projects

Avatar

Level 2

AEM has a Product Photo Shoot Project, with a Product Photo Shoot workflow. I want to edit/customize the dialog for the tasks in this workflow. For Example, I'd like to add fields/tabs to the Upload Photo Shoot task, or create my own custom step. I've tried overriding some code, in apps, but I can't get the workflow wizards to point to the right places.

I can't seem to find proper documentation on how to edit/override the existing one or create a new tasktype such as 'dam:uploadnewshoot'. Any help or pointers on this?

1 Accepted Solution

Avatar

Correct answer by
Level 2

I figured out how to accomplish what I needed. And I guess my title wasn't completely on point.

The overlay in /apps does work. I thought it wasn't working initially, but turns out I wasn't editing what I thought I was editing. Anyway, here is more detail on what I was trying to do and how I did it.

Customize an Existing Task Dialog

In this case I want to add a new button to control the task next to the 'Complete' and 'Update' buttons. This is assuming I've already created a client library with JavaScript to handle the button click.

  • Create an overlay in /apps for cq/core/content/projects/showtasks/uploadtaskdetails
    • I created a package in my local instance of /libs/cq/core/content/projects and copied it into /apps in my Maven project
  • Open /apps/cq/core/content/projects/showtasks/uploadtaskdetails/.content.xml for editing
    • This is just editing Granite Touch UI nodes.
  • In the XML, edit jcr:content > head > clientlibs and add your client library to the 'clientlibs' attribute.
    • This will load your custom JS for this task.
  • Now go to jcr:content > body > content > header > items > default > items.
  • Copy the 'update' element/node, paste it at the end of the parent element 'items'. This should make a new sibling element to update and complete.
  • Rename the new element 'stepback'.
  • Change the text and title attributes to 'Step Back'
  • Update the icon attribute to 'coral-Icon--undo'
  • Update the formId attribute to a form that you will be using (defined elsewhere or maybe by your clientlib).

You can deploy this and will now have a Step Back button in the action bar. This will update existing workflows/tasks as well. [img]ProjectsCustomButton.png[/img]

Create a New Task Type

Not going to get into too much detail. The workflows for projects have a script that defined the tasktype. It usually looks like this:

task.setProperty("taskTypeName","dam:uploadphotoshoot");

In this example, we're creating a new task type of 'dam:customtaskitem'

  • Create an overlay in /apps for cq/core/content/projects
    • I created a package in my local instance of /libs/cq/core/content/projects and copied it into /apps in my Maven project. 
  • Open /apps/cq/core/content/projects/.content.xml for editing
  • In the XML, navigate to jcr:root > tasktypes > dam
  • Create a new element called 'customtaskitem' as a child of the 'dam' element.
    • It is easy enough to copy an existing element, paste it and rename/edit it.
  • Update the url attribute for your new element to have a value of '/apps/cq/core/content/projects/showtasks/customtaskitem.html'
  • Now create '/apps/cq/core/content/projects/showtasks/customtaskitem'
    • Copy one of the other nodes in 'showtasks' and rename it
  • Open /apps/cq/core/content/projects/showtasks/customtaskitem/.content.xml and edit the UI as described in the 'Customize...' section above.
  • Go to the Product Photo Shoot workflow model.
  • From the Projects category in the sidekick, add the 'Create a Role Based Project Task'
    • The non-Role Based option will work too.
  • In the Advanced tab of the dialog, in the 'Script' field, add 
    task.setProperty("taskTypeName","dam:customtaskitem");

Now when you start a new Photo Shoot Workflow to a project, your new custom task will appear with your customized dialog.

This is what I got to work, and it didn't seem to have any negative side affects that I could see. I'd be open to any better/cleaner solutions if any.

View solution in original post

4 Replies

Avatar

Level 2

Not quite what I was looking for. See the Documentation of the Product Photo Shoot workflow (https://docs.adobe.com/docs/en/aem/6-1/author/projects/managing-product-information.html#Workflow Tasks Details). Specifically, there is the "Upload Photo Shoot Task". You can see a screenshot of the dialog that appears. I want to customize that. So far I've found that the contents for that dialog are at /libs/cq/core/content/projects/showtasks/uploadtaskdetails/jcr:content/body/content, but I don't think I can simply override it in /apps.

Avatar

Level 10

This is different from overlaying a component. This workflow is part of a built-in worflow product feature.  If you want to try and modify it - i suggest installing CQ on a dev sandbox machine (on a box where if you make a mistake, it will not affect anything - you can re-install). Then code the under changes under libs. What you are looking for would not be documented as its not a typical use case.  

Or you can try and re-create the workflow and then develop the dialog to meet you business requirements.  

Avatar

Correct answer by
Level 2

I figured out how to accomplish what I needed. And I guess my title wasn't completely on point.

The overlay in /apps does work. I thought it wasn't working initially, but turns out I wasn't editing what I thought I was editing. Anyway, here is more detail on what I was trying to do and how I did it.

Customize an Existing Task Dialog

In this case I want to add a new button to control the task next to the 'Complete' and 'Update' buttons. This is assuming I've already created a client library with JavaScript to handle the button click.

  • Create an overlay in /apps for cq/core/content/projects/showtasks/uploadtaskdetails
    • I created a package in my local instance of /libs/cq/core/content/projects and copied it into /apps in my Maven project
  • Open /apps/cq/core/content/projects/showtasks/uploadtaskdetails/.content.xml for editing
    • This is just editing Granite Touch UI nodes.
  • In the XML, edit jcr:content > head > clientlibs and add your client library to the 'clientlibs' attribute.
    • This will load your custom JS for this task.
  • Now go to jcr:content > body > content > header > items > default > items.
  • Copy the 'update' element/node, paste it at the end of the parent element 'items'. This should make a new sibling element to update and complete.
  • Rename the new element 'stepback'.
  • Change the text and title attributes to 'Step Back'
  • Update the icon attribute to 'coral-Icon--undo'
  • Update the formId attribute to a form that you will be using (defined elsewhere or maybe by your clientlib).

You can deploy this and will now have a Step Back button in the action bar. This will update existing workflows/tasks as well. [img]ProjectsCustomButton.png[/img]

Create a New Task Type

Not going to get into too much detail. The workflows for projects have a script that defined the tasktype. It usually looks like this:

task.setProperty("taskTypeName","dam:uploadphotoshoot");

In this example, we're creating a new task type of 'dam:customtaskitem'

  • Create an overlay in /apps for cq/core/content/projects
    • I created a package in my local instance of /libs/cq/core/content/projects and copied it into /apps in my Maven project. 
  • Open /apps/cq/core/content/projects/.content.xml for editing
  • In the XML, navigate to jcr:root > tasktypes > dam
  • Create a new element called 'customtaskitem' as a child of the 'dam' element.
    • It is easy enough to copy an existing element, paste it and rename/edit it.
  • Update the url attribute for your new element to have a value of '/apps/cq/core/content/projects/showtasks/customtaskitem.html'
  • Now create '/apps/cq/core/content/projects/showtasks/customtaskitem'
    • Copy one of the other nodes in 'showtasks' and rename it
  • Open /apps/cq/core/content/projects/showtasks/customtaskitem/.content.xml and edit the UI as described in the 'Customize...' section above.
  • Go to the Product Photo Shoot workflow model.
  • From the Projects category in the sidekick, add the 'Create a Role Based Project Task'
    • The non-Role Based option will work too.
  • In the Advanced tab of the dialog, in the 'Script' field, add 
    task.setProperty("taskTypeName","dam:customtaskitem");

Now when you start a new Photo Shoot Workflow to a project, your new custom task will appear with your customized dialog.

This is what I got to work, and it didn't seem to have any negative side affects that I could see. I'd be open to any better/cleaner solutions if any.