> To get started Granite UI common attributes, we will need to add the following xml namespace to your cq:dialog / .content.xml.
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/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"
xmlns:granite="http://www.adobe.com/jcr/granite/1.0"
jcr:primaryType="nt:unstructured"
jcr:title="Properties"
extraClientlibs="[helloworld.clientlibs]"
sling:resourceType="cq/gui/components/authoring/dialog">
<content
jcr:primaryType="nt:unstructured"
granite:class="cq-dialog-helloworld-comp"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text"
name="./text"/>
</items>
</column>
</items>
</content>
</jcr:root>
> Observe result by open Inspect Element in browser.
> How to hide coral field in Touch UI dialogs. Using class "granite:class" and set value is hidden. The css for class hidden will be written in scope globally.
/core
/core/scripts/main/main.ts
/core/scripts/main/postCss.ts <import '../../postCss/base.pcss';>
/core/postCss
/core/postCss/base.pcss <@import "styles/styles.pcss";>
/core/postCss/styles/styles.pcss
In additional, folder core will be configure in package.json like this:
{
"name": "aem-maven-archetype",
"version": "1.0.0",
"description": "Generates an AEM Frontend project with Webpack",
"repository": {
"type": "git",
"url": "https://github.com/adobe/aem-project-archetype"
},
"private": true,
"main": "src/core/site/main.ts",
"license": "SEE LICENSE IN LICENSE.txt",
"scripts": {
"dev": "webpack --mode development --color --env dev --config webpack/webpack.dev.js && clientlib --verbose",
....
}
Hence, in folder src of ui.front-end module, we can structure SPA that make senses for front-end developers and using webpack to deploy to ui.app in AEM.
In general, two folder author and core is one of structure in my demo project. We can totally change. In typically, file styles.css will declare css that apply in scope globally of project.
.hidden {
display: none;
}
Thus, granite:class will be implemented as below and custom javascript.
<content
jcr:primaryType="nt:unstructured"
granite:class="cq-dialog-helloworld-comp"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
granite:class="randomID hidden"
name="./randomID"/>
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text"
name="./text"/>
</items>
</column>
</items>
</content>
----------> CUSTOM JAVASCRIPT
$(document).on("dialog-ready", function () {
const $formElement = $(this).find('coral-dialog form.foundation-form');
if (!isTargetDialog($formElement, DIALOG_RESOURCE_TYPE)) {
console.debug("Ignore the listener, not a ", DIALOG_RESOURCE_TYPE, " dialog.");
return;
} else {
const el = $formElement.find("input.randomID");
el.val((new Date().getTime()));
console.log(el.val());
}
});
Open CRXDE|Lite and observe node was saved as randomID field. That is perfectly for implementation.
> Use granite:hidden can replace hidden in granite:class. Here is an example and the result has the same as above.
<content
jcr:primaryType="nt:unstructured"
granite:class="cq-dialog-helloworld-comp"
sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
granite:class="randomID"
granite:hidden="true"
name="./randomID"/>
<text
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text"
name="./text"/>
</items>
</column>
</items>
</content>
Beside, you can add title or id in coral field by granite:id or granite:title as below
<items jcr:primaryType="nt:unstructured">
<column
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<id
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
granite:class="randomID"
granite:hidden="true"
name="./randomID"/>
<text
granite:id="123456"
granite:title="Granite Title"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
fieldLabel="Text"
name="./text"/>
</items>
</column>
</items>
> Use granite:data to provide data-* attributes for your components. There many ways to use granite:data and in term of specific cases, you can see some examples as below
SELECTOBOX
<coraldropdownfield
granite:class="cq-dialog-dropdown-showhide"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/select"
fieldLabel="Show hide toggle"
name="./showhidedropdown">
<granite:data
jcr:primaryType="nt:unstructured"
cq-dialog-dropdown-showhide-target=".demo-showhide-target"/>
<items jcr:primaryType="nt:unstructured">
<hide
jcr:primaryType="nt:unstructured"
text="Hide container"
value="hide"/>
<show
jcr:primaryType="nt:unstructured"
text="Show container"
value="show"/>
</items>
</coraldropdownfield>
<extrafieldcontainer
granite:class="hide demo-showhide-target"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="show"/>
<items jcr:primaryType="nt:unstructured">
<sample
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Sample"
name="./sample"/>
</items>
</extrafieldcontainer>
Note: In Term of using showhidetargetvalue was that mean show the target element that contains the selected value as data-showhidetargetvalue attribute.
Thus, cq-dialog-dropdown-showhide-target=".text-showhide-target" was means data-cq-dialog-dropdown-showhide-target=".text-showhide-target".
As you can write custom Javascript based data-cq-dialog-dropdown-showhide-target (cqDialogDropDownShowhideTarget) and keep showhidetargetvalue as default.
(function (document, $) {
"use strict";
$(document).on("foundation-contentloaded", function (e) {
showHide($(".cq-dialog-dropdown-showhide", e.target));
});
$(document).on("change", ".cq-dialog-dropdown-showhide", function (e) {
showHide($(this));
});
$(document).on("selected", ".cq-dialog-dropdown-showhide", function(e) {
showHide($(this));
});
function showHide(el){
el.each(function(i, element) {
let target = $(element).data("cqDialogDropdownShowhideTarget");
if ($(element).data("select")) {
let value = $(element).data("select").getValue();
$(target).not(".hide").addClass("hide");
/* data-showhidetargetvalue attribute */
if(value)
$(target+'.'+value).removeClass("hide");
} else if($(element).is('input:checkbox')) {
// data-showhidetargetvalue attribute
if($(element).is(':checked')){
$(target).removeClass( "hide" );
}else{
$(target).addClass( "hide" );
}
}
})
}
})(document, Granite.$);
Note: showhidetargetvalue will get data based granite:class="cq-dialog-" target which coral fields. In here, we will set show/hide as the example above.
CHECKBOX
<coralcheckboxfield jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
granite:class="cq-dialog-checkbox-showhide"
text="Enable Status Label Text Tooltip"
value="{Boolean}true"
uncheckedValue="{Boolean}false"
name="./chkshowhide">
<granite:data jcr:primaryType="nt:unstructured"
cq-dialog-checkbox-showhide-target=".sample-showhide-target" />
</coralcheckboxfield>
<extrafieldcontainer
granite:class="sample-showhide-target"
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/coral/foundation/container">
<granite:data
jcr:primaryType="nt:unstructured"
showhidetargetvalue="true"/>
<items jcr:primaryType="nt:unstructured">
<sample
jcr:primaryType="nt:unstructured"
sling:resourceType="granite/ui/components/foundation/form/textfield"
fieldLabel="Sample"
name="./sample"/>
</items>
</extrafieldcontainer>
---------------------> CUSTOM JAVASCRIPT
(function (document, $) {
"use strict";
$(document).on("foundation-contentloaded", function (e) {
checkboxShowHideHandler($(".cq-dialog-checkbox-showhide", e.target));
});
$(document).on("change", ".cq-dialog-checkbox-showhide", function (e) {
checkboxShowHideHandler($(this));
});
function checkboxShowHideHandler(el) {
el.each(function (i, element) {
if($(element).is("coral-checkbox")) {
Coral.commons.ready(element, function (component) {
showHide(component, element);
component.on("change", function () {
showHide(component, element);
});
});
} else {
var component = $(element).data("checkbox");
if (component) {
showHide(component, element);
}
}
})
}
function showHide(component, element) {
var target = $(element).data("cqDialogCheckboxShowhideTarget");
var $target = $(target);
if (target) {
$target.addClass("hide");
if (component.checked) {
$target.removeClass("hide");
}
}
}
})(document, Granite.$);
Note: cqDialogCheckboxShowhideTarget as generated from cq-dialog-checkbox-showhide-target=".sample-showhide-target".