How To Handle Query Param String and Selectors in Component 

This thing can be used in any component but in my project this requirement was for Title component, where an Author can select and the default behaviour of the component or can select the dynamic type(Query Param/Selector) value.

The dialog looks something like below:

When author selects the dynamic option from the dropdown it will show the hidden tab "Dynamic Settings" and under that we have 2 options in the drop down :

• Query Param 
• URL Selector 

To show/hide this tab here is the js:

/*globals Granite,Coral*/

(function ($, document) {

    'use strict';

    //used in the dialogs

    $(document).on('dialog-ready', function () {

      init()

    });

    //refresh the page on dynamic queryParam selection

    $(document).on('dialog-success', function () {

      var modeselector = document.querySelectorAll('.tabs__show-hide');

      var typeselector = document.querySelectorAll('.core-title-dynamic-type');

      if (modeselector.length !== 0 && typeselector.length !== 0) {

        if (modeselector[0].value === 'dynamic'  && typeselector[0].value === 'queryParam') {

          window.location.reload();

        }

      }

    });

    function showHideTabListItems(initial) {

      var coralTab = $("coral-tab[data-foundation-tracking-event*='dynamic settings']");

      if (initial === 'dynamic') {

        coralTab.show();

      } else {

        coralTab.hide();

      }

    }

    function setUpShowHide(selector) {

      Coral.commons.ready(selector, function () {

        selector.on('change', function (e) {

          showHideTabListItems(e.target.value);

        });

        var initial = selector.value;

        showHideTabListItems(initial);

      })

    }

    function init() {

      Coral.commons.ready(document, function () {

        var selectors = document.querySelectorAll('.tabs__show-hide');

        var coralTab = $("coral-tab[data-foundation-tracking-event*='dynamic settings']");

        if (selectors.length !== 0) {

          if (selectors[0].value === 'default' && coralTab !== undefined) {

            coralTab.hide();

          } else if (selectors[0].value === 'dynamic' && coralTab !== undefined) {

            coralTab.show();

          }

          selectors.forEach(setUpShowHide)

        }

      })

    }

  }

)(Granite.$, document);

The Component Dialog code is here:

<?xml version="1.0" encoding="UTF-8"?>

<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"

    jcr:primaryType="nt:unstructured"

    jcr:title="Title"

    sling:resourceType="cq/gui/components/authoring/dialog"

    extraClientlibs="[core.wcm.components.title.v2.editor]"

    trackingFeature="core-components:title:v3">

    <content

        jcr:primaryType="nt:unstructured"

        sling:resourceType="granite/ui/components/coral/foundation/container">

        <items jcr:primaryType="nt:unstructured">

            <tabs

                jcr:primaryType="nt:unstructured"

                sling:resourceType="granite/ui/components/coral/foundation/tabs"

                maximized="{Boolean}true">

                <items jcr:primaryType="nt:unstructured">

                    <properties

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Properties"

                        sling:resourceType="granite/ui/components/coral/foundation/container"

                        margin="{Boolean}true">

                        <items jcr:primaryType="nt:unstructured">

                            <columns

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

                                margin="{Boolean}true">

                                <items jcr:primaryType="nt:unstructured">

                                    <column

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/coral/foundation/container">

                                        <items jcr:primaryType="nt:unstructured">

                                            <mode

                                                granite:class="tabs__show-hide"

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"

                                                fieldLabel="Mode"

                                                name="./mode">

                                                <items jcr:primaryType="nt:unstructured">

                                                    <default

                                                        jcr:primaryType="nt:unstructured"

                                                        text="Default"

                                                        value="default"/>

                                                    <dynamic

                                                        granite:hide="${cqDesign.disableDynamic}"

                                                        jcr:primaryType="nt:unstructured"

                                                        text="Dynamic"

                                                        value="dynamic"/>

                                                </items>

                                            </mode>

                                            <title

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldDescription="Leave empty to use the page title."

                                                fieldLabel="Title"

                                                name="./jcr:title"/>                                            

                                            <link

                                                granite:hide="${cqDesign.linkDisabled}"

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/include"

                                                path="/mnt/overlay/core/wcm/components/commons/editor/dialog/link/v1/link/edit/link"/>

                                            <id

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldDescription="HTML ID attribute to apply to the component."

                                                fieldLabel="ID"

                                                name="./id"/>

                                        </items>

                                    </column>

                                </items>

                            </columns>

                        </items>

                    </properties>

                    <dynamic-settings

                        granite:hide="${cqDesign.disableDynamic}"

                        jcr:primaryType="nt:unstructured"

                        jcr:title="Dynamic Settings"

                        sling:resourceType="granite/ui/components/coral/foundation/container"

                        margin="{Boolean}true"

                        size="L">

                        <items jcr:primaryType="nt:unstructured">

                            <columns

                                jcr:primaryType="nt:unstructured"

                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"

                                margin="{Boolean}true">

                                <items jcr:primaryType="nt:unstructured">

                                    <column

                                        jcr:primaryType="nt:unstructured"

                                        sling:resourceType="granite/ui/components/coral/foundation/container">

                                        <items jcr:primaryType="nt:unstructured">

                                            <dynamic-type

                                                granite:class="core-title-dynamic-type"

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"

                                                fieldLabel="Type"

                                                name="./dynamicType">

                                                <items jcr:primaryType="nt:unstructured">

                                                    <query-param

                                                        jcr:primaryType="nt:unstructured"

                                                        text="Query Param"

                                                        value="queryParam"/>

                                                    <url-selector

                                                        jcr:primaryType="nt:unstructured"

                                                        text="URL Selector"

                                                        value="urlSelector"/>

                                                </items>

                                            </dynamic-type>

                                            <preceding-text

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldDescription="Text before the dynamic text "

                                                fieldLabel="Preceding text"

                                                name="./precedingText"/>

                                            <trailing-text

                                                jcr:primaryType="nt:unstructured"

                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"

                                                fieldDescription="Text after the dynamic text"

                                                fieldLabel="Trailing text"

                                                name="./trailingText"/>

                                        </items>

                                    </column>

                                </items>

                            </columns>

                        </items>

                        <granite:data

                            jcr:primaryType="nt:unstructured"

                            dep-value="dynamic"/>

                    </dynamic-settings>

                    <styletab

                        jcr:primaryType="nt:unstructured"

                        sling:resourceType="granite/ui/components/coral/foundation/include"

                        path="/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"/>

                </items>

            </tabs>

        </items>

    </content>

</jcr:root>