Is it possible to customize cq:dialog in a way that it takes input just like google forms, multiple form pages and depending on the choice made it would take to the corresponding? For example opening the cq:dialog the user must be shown some choices to select from, and depending on the selection the user is to be directed to the corresponding fields and so on. The thing I'm looking for is a form like structure with next and back options and a final submit.
Solved! Go to Solution.
I would recommend you to use tabs resource type to create container to take input.
Now for your requirements :
1. hide all the tab expect the current tab using javascript to inject hide class.
2. Add next and previous button using javascript of dialog load event.
3. Add event handler on next button to remove hide class from next tab and add hide class to other tabs.
4. Add event handler on previous button to remove hide class from previos tab and add hide class to other tabs
5. To save only specific data make other data empty.(or use @Delete hint)
I know this is the lot of customization.
Hi,
Could you please be more clear here, exactly what you are trying to achieve.
What ever i could understand-
1. In a cq dialog if you want to have a dropdown on selecting one of the values you can redirect user to a respective page thats possible.
2. Now i couldnt understand regarding form like behaviour in cq dialog could u pls explain that
Views
Replies
Total Likes
Okay lemme be clear on that. At first the cq: dialog must show with certain fields to enter values and a 'next' option which takes the user to the next screen of the dialog where user is supposed to enter some other data and so on.
eg: First the dialog is shown with text fields to enter two values and a NEXT button. Upon clicking NEXT, the user is taken to a view with four fileds and a SUBMIT button, inside the dialog.
Views
Replies
Total Likes
Ok I understood your requirement.
I haven't implemented such a form in a cq dialog.
Will check on this..
Views
Replies
Total Likes
Okay cool
Views
Replies
Total Likes
Hi,
We can change the visibility of the fields based on other field values eg. https://techrevel.blog/2017/10/30/toggle-field-visibility-based-on-dropdowns-value-coral-3/
If the preconditions are known earlier, we can use renderconditions - AEM Granite Custom Render Conditions - Adobe Experience Manager | AEM/CQ | Apache Sling
Usually cq:dialog make a single request to store the updated value back to JCR. If you have a big select of fields which is beyond a component, you can try for a custom widget which an do a sling POST servlet request back with a single JSON with all the field values. It might be better to rethink the use case as this seems going away from best practices.
Views
Replies
Total Likes
I would recommend you to use tabs resource type to create container to take input.
Now for your requirements :
1. hide all the tab expect the current tab using javascript to inject hide class.
2. Add next and previous button using javascript of dialog load event.
3. Add event handler on next button to remove hide class from next tab and add hide class to other tabs.
4. Add event handler on previous button to remove hide class from previos tab and add hide class to other tabs
5. To save only specific data make other data empty.(or use @Delete hint)
I know this is the lot of customization.
How to add clientlibs to cq:dialog?
Views
Replies
Total Likes
You can create client libs of category cq.authoring.dialog.
If you want to apply clientlibs only for that particular dialog then use extraClientlibs
e.g.
cq: dialog: {
jcr: primaryType: "nt:unstructured",
jcr: title: "Page",
extraClientlibs: ["category1","category2"],
mode: "edit",
sling: resourceType: "cq/gui/components/authoring/dialog"
}
Views
Replies
Total Likes
Views
Likes
Replies