Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

'touchUiDialogPath' property invalid or missing on /etc/workflow/dialogs/DateTimePicker

Avatar

Level 2

I am trying to set dialog in dynamic participant step. I assigned participant dynamically and chose dialog path but it is giving me this error when I try to complete action assigned.

Screen Shot 2020-06-05 at 4.50.11 PM.png

 

I followed steps of 'DIALOG PARTICIPANT STEP - TOUCH-OPTIMIZED UI' from https://helpx.adobe.com/ca/experience-manager/6-3/sites/developing/using/workflows-step-ref.html#Par... but still getting this error. The structure of the dialog looks like this. 
Screen Shot 2020-06-05 at 4.55.32 PM.png

 

The path to dialog I am providing is '/etc/workflow/dialogs/DateTimePicker'. As per the error, I assume that I need to have touchUiDialogPath somewhere in the new DateTimePicker component. If yes, where should I add and what should be the value for the touchUiDialogPath? I want to provide datepicker from granite/ui/components/coral/foundation/form/datepicker. If I directly add 'granite/ui/components/coral/foundation/form/datepicker' path in dialog path of the dynamic participant step, I see same error.

 

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @chintan97,

We should locate the cq:dialog node to the dialog path property. In this case, add "/etc/workflow/dialogs/DateTimePicker/cq:dialog" which should help solve the issue. 

Regarding other related queries,

  • In order to have a segregation of code from OOB paths (/libs, /etc) , we can create within /apps
    • Something like "/apps/your project/workflow/dialogs/any meaningful name/cq:dialog"
  • OOB Datepicker:
    • OOB datepicker resource (/libs/granite/ui/components/coral/foundation/form/datepicker) holds the logic responsible for rendering date picker. In particular it has <coral-datepicker> to render the picker widget and its related attributes.
    • It will not have dialog. Instead, it is used for creating and hence rendering dialog fields

View solution in original post

9 Replies

Avatar

Correct answer by
Community Advisor

Hi @chintan97,

We should locate the cq:dialog node to the dialog path property. In this case, add "/etc/workflow/dialogs/DateTimePicker/cq:dialog" which should help solve the issue. 

Regarding other related queries,

  • In order to have a segregation of code from OOB paths (/libs, /etc) , we can create within /apps
    • Something like "/apps/your project/workflow/dialogs/any meaningful name/cq:dialog"
  • OOB Datepicker:
    • OOB datepicker resource (/libs/granite/ui/components/coral/foundation/form/datepicker) holds the logic responsible for rendering date picker. In particular it has <coral-datepicker> to render the picker widget and its related attributes.
    • It will not have dialog. Instead, it is used for creating and hence rendering dialog fields

Avatar

Level 2

I am sorry that I forgot to mention that I also tried keeping /etc/workflow/dialogs/DateTimePicker/cq:dialog as a dialog path but it throws same error. However, to note the dialog box is shown in next dynamic participant step instead of the one in which I have mentioned the dialog path. Inside the '/etc/workflow/dialogs/DateTimePicker/cq:dialog' property I have 3 properties, jcr:primaryType: nt:unstructured, jcr:title: Date and Time picker, sling:resourceType: cq/gui/components/authoring/dialog. Am I missing any property?

Screen Shot 2020-06-08 at 8.50.10 AM.png

 

Avatar

Community Advisor

Hi @chintan97,

Can you elaborate on this point - "However, to note the dialog box is shown in next dynamic participant step instead of the one in which I have mentioned the dialog path."

You mean the dialog shows up fine without this error in next dynamic participant step?

 

Regarding the dialog structure, dialog node and its properties seems to be fine. Can you cross check if 

  • DateTimepicker node (parent of cq:dialog) is of type cq:Component
  • And check if all the dialog field resource types are of type Coral UI 3 or Coral UI 2 completely but not mix of both.

Avatar

Level 2
Hi @Vijayalakshmi_S , Thanks for quick reply. By "However, to note the dialog box is shown in next dynamic participant step instead of the one in which I have mentioned the dialog path" I mean that the dialog tries rendering inside next dynamic participant step instead of the one in which I mentioned dialog path. However, it shows same error in that step too and it fails rendering. Regarding the dialog structure, The DateTimePicker node is of type cq:Component only. And the dialog field resources are of 'granite/ui/components' only. I followed https://helpx.adobe.com/ca/experience-manager/6-3/sites/developing/using/workflows-step-ref.html#Par... for dialog creation

Avatar

Community Advisor

Hi @chintan97,

I tried this in my local and could reproduce the issue.

As the error message implies, i added a property named "touchUiDialogPath" with value being path to the dialog on the component node and it worked fine. 

 

dynamicparticipantdialog.png

 

Below is the findings in the process of debugging:

  • Pathfield in Dialog Participant Step component lets us choose till cq:dialog node(or the path it lists is to the utmost depth of the node) -> We are able to choose the exact cq:dialog node and displays fine as we execute the workflow
  • Pathfield in Dynamic Participant Step has the path displayed till the component node alone / no means to choose the cq:dialog node. (no filter property on OOB Dynamic Participant Step component's Pathfield resource)
  • As I observed the same error as you mentioned while completing the step + we haven't provided the dialog node given the pathfield set up => I added this property and it worked fine. 

Please try the below from your end.

  • Add this property to the component node.
  • In your workflow model -> Dynamic Participant step -> Dialog Tab -> Choose the path via path panel (it will let you choose till component node) -> Sync your changes
  • Make some amends to the page -> trigger the WF

Avatar

Level 2

Thanks @Vijayalakshmi_S , The datepicker is being shown now to the assignee. However, can you please mention where the data for that datepicker is saved. I tried following https://helpx.adobe.com/ca/experience-manager/6-3/sites/developing/using/workflows-step-ref.html#Par... and added name as './datetimepicker'. But I don't see any data associated with the datepicker for the instance under /var/workflow/instances. I do see other data for the instance like assignee, model, comment and all. The code for cq:dialog is as below. Also, the datepicker goes away as soon as I select date or click somewhere else. I assume it is because the data is not being saved anywhere.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root
jcr:primaryType="nt:unstructured"
jcr:title="Date Time Picker Component Component"
sling:resourceType="cq/gui/components/authoring/dialog">

<content jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<layout jcr:primaryType="nt:unstructured"
margin="false"
sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
/>
<items jcr:primaryType="nt:unstructured">
<column jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/container">
<items jcr:primaryType="nt:unstructured">
<date jcr:primaryType="nt:unstructured"
fieldLabel="Date Time Picker"
name="datetimepicker"
sling:resourceType="granite/ui/components/coral/foundation/form/datepicker"
/>
</items>
</column>
</items>
</content>

</jcr:root>

Avatar

Community Advisor

Hi @chintan97,

 

Thanks for the confirmation. "name" property of the value is to be mentioned without (./) and this will be saved in workItem's metaData node.

(under /var/workflow/instances -> history/respective step node/workItem/metaData)

 

Think Datepicker is not working within Dialog Injection - selecting any date within the picker closes the entire dialog fields added. So far there is no error as evident from console logs. 

However will continue to debug and will respond once I have an update. 

 

Also, your dialog has mix of Coral UI 2 and Coral UI 3 fields - Either use 2 or 3 and not both

Here is the high level difference between the two - https://myaemlearnings.blogspot.com/2018/03/difference-bw-granite-ui-components.html

 

Avatar

Level 2

Hi @Vijayalakshmi_S , thanks for a quick reply. Actually the issue is resolved now. I didn't have latest AEM service pack 6.5.2 installed. After installing it, the date picker is working as expected and the data is being stored for workflow instance.

I have marked the answer as accepted. Can you please edit the main answer from thread. Thanks again for help

Avatar

Community Advisor

Hi @chintan97,

For the original/initial issue in displaying dialog fields in the Dynamic Participant step (as evident with error message) will be resolved by adding that property - touchUiDialogPath on component node irrespective of the service pack. (You can cross verify by removing the property and triggering the WF again)

Now as part of the issue with Datepicker field - This got resolved with help of Service pack - 6.5.2 per your note, Thanks for updating. 

Note : I had textfield, tagspicker and datepicker in my dialog - Issue I had is with datepicker. 

 

Given this, I will leave it your consent of marking the respective answer correct.