Customize cq:dialog! | Community
Skip to main content
jezwn
jezwn
Level 5
Nov 24, 2019 11:38 AM UTC
Solved

Customize cq:dialog!

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    Nov 30, 2019 4:53 PM UTC

    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.

    Arun Patidar
    View reply

    8 replies

    arunpatidar
    arunpatidar
    New Participant
    Dec 1, 2019 1:54 PM UTC

    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"

    }

    Translate
    Arun Patidar
    jezwn
    jezwnAuthor
    Level 5
    Nov 30, 2019 5:03 PM UTC

    How to add clientlibs to cq:dialog?

    Translate
    arunpatidar
    arunpatidarAccepted solution
    New Participant
    Nov 30, 2019 4:53 PM UTC

    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.

    Translate
    Arun Patidar
      Nirmal_Jose
      Nirmal_Jose
      Employee
      Nov 25, 2019 12:37 PM UTC

      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.

      Translate
      jezwn
      jezwnAuthor
      Level 5
      Nov 25, 2019 11:35 AM UTC

      Okay cool

      Translate
      Ankur_Khare
      Ankur_Khare
      New Participant
      Nov 25, 2019 11:32 AM UTC

      Ok I understood your requirement.

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

      Will check on this..

      Translate
      jezwn
      jezwnAuthor
      Level 5
      Nov 25, 2019 10:41 AM UTC

      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.

      Translate
      Ankur_Khare
      Ankur_Khare
      New Participant
      Nov 25, 2019 6:08 AM UTC

      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

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...