Customize cq:dialog! | Community
Skip to main content
jezwn
jezwn
Level 5
November 24, 2019
Solved

Customize cq:dialog!

  • November 24, 2019
  • 8 replies
  • 6463 views

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.
    Best answer by arunpatidar

    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.

    8 replies

    Ankur_Khare
    Community Advisor
    Ankur_KhareCommunity Advisor
    Community Advisor
    November 25, 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

    jezwn
    jezwnAuthor
    Level 5
    November 25, 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.

    Ankur_Khare
    Community Advisor
    Ankur_KhareCommunity Advisor
    Community Advisor
    November 25, 2019

    Ok I understood your requirement.

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

    Will check on this..

    jezwn
    jezwnAuthor
    Level 5
    November 25, 2019

    Okay cool

    Nirmal_Jose
    Adobe Employee
    Nirmal_JoseAdobe Employee
    Adobe Employee
    November 25, 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.

    arunpatidar
    Community Advisor
    arunpatidarCommunity AdvisorAccepted solution
    Community Advisor
    November 30, 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.

    Arun Patidar
      jezwn
      jezwnAuthor
      Level 5
      November 30, 2019

      How to add clientlibs to cq:dialog?

      arunpatidar
      Community Advisor
      arunpatidarCommunity Advisor
      Community Advisor
      December 1, 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"

      }

      Arun Patidar
      Terms & ConditionsAccessibility statement

      Loading footer...