Customize cq:dialog!

[jezwn]

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.

[Ankur_Khare]

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

[jezwn]

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.

[Ankur_Khare]

Ok I understood your requirement.

I haven't implemented such a form in a cq dialog.

Will check on this..

[jezwn]

Okay cool

[Nirmal_Jose]

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.

[arunpatidar · Accepted 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.

[jezwn]

How to add clientlibs to cq:dialog?

[arunpatidar]

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"

}