Customize cq:dialog!

Avatar

Avatar

jezwn

Avatar

jezwn

jezwn

24-11-2019

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.

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

30-11-2019

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.

Answers (7)

Answers (7)

Avatar

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831

Avatar

Arun_Patidar

MVP

Total Posts

2.9K

Likes

1.0K

Correct Answer

831
Arun_Patidar
MVP

01-12-2019

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"

}

Avatar

Avatar

jezwn

Avatar

jezwn

jezwn

30-11-2019

How to add clientlibs to cq:dialog?

Avatar

Avatar

Nirmal_Jose

MVP

Avatar

Nirmal_Jose

MVP

Nirmal_Jose
MVP

25-11-2019

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.

Avatar

Avatar

jezwn

Avatar

jezwn

jezwn

25-11-2019

Okay cool

Avatar

Avatar

Ankur_Khare

MVP

Avatar

Ankur_Khare

MVP

Ankur_Khare
MVP

25-11-2019

Ok I understood your requirement.

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

Will check on this..

Avatar

Avatar

jezwn

Avatar

jezwn

jezwn

25-11-2019

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.

Avatar

Avatar

Ankur_Khare

MVP

Avatar

Ankur_Khare

MVP

Ankur_Khare
MVP

24-11-2019

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