How to create wizards in grante UI and design it i

Question

As i am new to AEM development, I want to know how to create wizards in AEM and how to design those using coral UI. As i have created wizard and it contains two step view:

               source  --->   select

I have designed this two step wizard and i have to show different items on each step.This steps are nothing but nodes under my createfragment page.

1) Source: I am having two radio buttons lets suppose selecting gender like male and female. I have created node for source and under source items, created two radio buttons.

Functionality: Through the selected radio button i have to open next container which have further items like name, address. I have different items under my wizard for male and female options so that container for the particular value is shown to user depending upon selection of gender either male or female. With in source user needs to select only 1 radio button and depending on selected value the user will show items from select nodes items like maleform and femaleform.

2) Select: This node should contains two sub-nodes under items and this forms has different functionality as per user selection. I want to show first node from item (maleform) on selection of male radio button on the other hand show (femaleform) second node items on female selection.

My Node structure is like:

 + wizard      
      - sling:resourceType = "granite/ui/components/coral/foundation/wizard"
    - items
      + source
       - sling:resourceType = "granite/ui/components/foundation/container"
          - items
             + male
              - sling:resourceType ="granite/ui/components/foundation/form/radio" 
              - name:gender
              - value:male
             + female
              - sling:resourceType ="granite/ui/components/foundation/form/radio" 
              - name:gender
              - value:female
      + select
        - sling:resourceType = "granite/ui/components/foundation/container"
          - items
             + maleform
               - sling:resourceType ="granite/ui/components/foundation/form/text" 
             + femaleform
               - sling:resourceType ="granite/ui/components/foundation/form/text" 

On the basis of user selection, I want to render two separate form components which are on two different pages.

For eg: If user selects male radio button, I want to display male form and similarly for the female one.

Please help me as I have to render two different pages using coral or granite UI in AEM.

Answer 1

If you're able to determine whether to show panels or not on the server side, you can use the granite/ui/components/foundation/renderconditions/simple widget to check a condition. Query your default AEM installation for examples, the condition is set in the expression property of the granite:rendercondition node. This sample checks the QueryString, but you can check other things such as the suffix using Expression Language (EL), for example: ${requestPathInfo.suffix == "/my/suffix"}.

<wizard>
    <items jcr:primaryType="nt:unstructured">
        ...
        <male
            jcr:primaryType="nt:unstructured"
            jcr:title="Male"
            sling:resourceType="granite/ui/components/coral/foundation/wizard/lazycontainer"
            src="...">
            <parentConfig jcr:primaryType="nt:unstructured">
                <next
                    granite:class="foundation-wizard-control"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/button"
                    disabled="{Boolean}true"
                    text="Next"
                    variant="primary">
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        foundation-wizard-control-action="next"/>
                </next>
            </parentConfig>
            <granite:rendercondition
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/renderconditions/simple"
                expression="${querystring == &quot;gender=male&quot;}"/>
        </male>
        <female
            jcr:primaryType="nt:unstructured"
            jcr:title="Female"
            sling:resourceType="granite/ui/components/coral/foundation/wizard/lazycontainer"
            src="...">
            <parentConfig jcr:primaryType="nt:unstructured">
                <next
                    granite:class="foundation-wizard-control"
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/coral/foundation/button"
                    disabled="{Boolean}true"
                    text="Next"
                    variant="primary">
                    <granite:data
                        jcr:primaryType="nt:unstructured"
                        foundation-wizard-control-action="next"/>
                </next>
            </parentConfig>
            <granite:rendercondition
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/renderconditions/simple"
                expression="${querystring == &quot;gender=female&quot;}"/>
        </femail>
    </items>
</wizard>

Otherwise, on the clientside you can simply show and hide widgets with JavaScript. The two widgets don't necessarily need to be two different steps in a wizard. In fact, it might be better if they weren't, that way your wizard progress indicator will just show one step and you can alter the display within that step.

CSS to start the fields hidden:

.gender-male-fieldset, .gender-female-fieldset {
    display: none;
}

JavaScript that runs when the dialog opens and shows/hides fieldsets when radio buttons are clicked. This is a simple example, you can write something much more reusable:

$(document).on("dialog-ready", function() {
    var $maleRadio = $('.gender-male-radio'),
        $femaleRadio = $('.gender-female-radio'),
        $maleFieldset = $('.gender-male-fieldset'),
        $femaleFieldset = $('.gender-female-fieldset');

    $maleRadio.click(function(){
      $maleFieldset.show();
      $femaleFieldset.hide();
    })

    $femaleRadio.click(function(){
      $maleFieldset.hide();
      $femaleFieldset.show();
    })
});

The Touch UI Dialog with radio buttons and fieldsets for male and female genders. Each widget has a custom CSS class to be used with your jQuery selectors:

<gender
    jcr:primaryType="nt:unstructured"
    class="gender"
    sling:resourceType="granite/ui/components/foundation/form/radiogroup"
    fieldLabel="Gender">
    <items jcr:primaryType="nt:unstructured">
        <option1
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            class="gender-male-radio"
            name="./gender"
            text="Male"
            value="male"/>
        <option2
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/radio"
            class="gender-female-radio"
            name="./gender"
            text="Female"
            value="female"/>
    </items>
</gender>
<male
    jcr:primaryType="nt:unstructured"
    jcr:title="Male"
    class="gender-male-fieldset"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
        <headingText
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/textfield"
            fieldLabel="Male fields"
            name="./maleText"/>
    </items>
</male>
<female
    jcr:primaryType="nt:unstructured"
    jcr:title="Female"
    class="gender-female-fieldset"
    sling:resourceType="granite/ui/components/foundation/form/fieldset">
    <items jcr:primaryType="nt:unstructured">
        <headingText
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/textfield"
            fieldLabel="Female fields"
            name="./femaleText"/>
    </items>
</female>