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>
