Monday, February 4, 2019

How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM)

This tutorial explains the approach to hide and show the tabs in Coral 3 Touch UI dialog.

Define Dialog

As a first step, define a Coral UI 3 Touch UI dialog (cq:dialog) with tabs and other required fields. The XML structure of the sample dialog is below

<?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="Column Component Responsive"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[customvalidation]">
    <content
        granite:class="tabtest"
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items
            jcr:primaryType="nt:unstructured"
            sling:hideChildren="[*]">
            <presets
                jcr:primaryType="nt:unstructured"
                jcr:title="Presets"
                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">
                            <title
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldDescription="Note: Titles are not available on the Advanced preset"
                                fieldLabel="Add Title to Columns?"
                                name="./title"
                                text="Add Title to Columns?"/>
                            <padding
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldDescription="check to remove padding from columns"
                                fieldLabel="Remove Padding from Columns?"
                                name="./removePadding"
                                text="Remove Padding from Columns?"/>
                            <presets
                                granite:class="presets"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldDescription="Choose Column style(Advanced for column customization)."
                                fieldLabel="Presets"
                                name="./presets">
                                <items jcr:primaryType="nt:unstructured">
                                    <option1
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(50%,50%) No Offset"
                                        value="50-50-no-offset"/>
                                    <option2
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(50%,50%) with Offset"
                                        value="50-50-with-offset"/>
                                </items>
                            </presets>
                        </items>
                    </column>
                </items>
            </presets>
            <col1
                jcr:primaryType="nt:unstructured"
                jcr:title="Column 1"
                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">
                            <mobiledialog
                                jcr:primaryType="nt:unstructured"
                                jcr:title="Mobile Break Point"
                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                <items jcr:primaryType="nt:unstructured">
                                    <visible
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                        fieldDescription="Check to hide on this device."
                                        fieldLabel="Hidden?"
                                        name="./col1/mobile/hidden"
                                        text="Hidden?"/>
                                </items>
                            </mobiledialog>
                        </items>
                    </column>
                </items>
            </col1>
            <col2
                jcr:primaryType="nt:unstructured"
                jcr:title="Column 2"
                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns">
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <mobiledialog
                                jcr:primaryType="nt:unstructured"
                                jcr:title="Mobile Break Point"
                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                <items jcr:primaryType="nt:unstructured">
                                    <visible
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                        fieldDescription="Check to hide on this device."
                                        fieldLabel="Hidden?"
                                        name="./col2/mobile/hidden"
                                        text="Hidden?"/>
                                </items>
                            </mobiledialog>
                        </items>
                    </column>
                </items>
            </col2>
            <col3
                jcr:primaryType="nt:unstructured"
                jcr:title="Column 3"
                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">
                            <mobiledialog
                                jcr:primaryType="nt:unstructured"
                                jcr:title="Mobile Break Point"
                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                <items jcr:primaryType="nt:unstructured">
                                    <visible
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                        fieldDescription="Check to hide on this device."
                                        fieldLabel="Hidden?"
                                        name="./col3/mobile/hidden"
                                        text="Hidden?"/>
                                </items>
                            </mobiledialog>
                        </items>
                    </column>
                </items>
            </col3>
            <col4
                granite:hide="{Boolean}true"
                jcr:primaryType="nt:unstructured"
                jcr:title="Column 4"
                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">
                            <mobiledialog
                                jcr:primaryType="nt:unstructured"
                                jcr:title="Mobile Break Point"
                                sling:resourceType="granite/ui/components/coral/foundation/form/fieldset">
                                <items jcr:primaryType="nt:unstructured">
                                    <visible
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                        fieldDescription="Check to hide on this device."
                                        fieldLabel="Hidden?"
                                        name="./col4/mobile/hidden"
                                        text="Hidden?"/>
                                </items>
                            </mobiledialog>
                        </items>
                    </column>
                </items>
            </col4>
        </items>
    </content>
</jcr:root>

Add a property with name granite:class to the tab element and give a unique name e.g tabtest — this class name will be used to locate the tab element in the java script.

Also add a property with name granite:class to the drop down list and give a unique name e.g (presets) — this class name will be used to handle the change event of drop down list element.

Define the Event Listener

Let us now define a even listener that will hide and show the tabs as required.

Define a cq:ClientLibraryFolder node under the component with the name clientlibs and add the below properties.

categories (String[]) — <define category name> e.g customvalidation

Create a folder with name js and add a file with name js.txt under it. Also, Add a file with name event.js under clientlibs folder.

Add the below script in event.js

This script hide the second tab(Column1) on dialog load and shows the tab on the change event of the drop down with class name .presets

(function (document, $, Coral) {
var $doc = $(document);
$doc.on('foundation-contentloaded', function(e) {
var coralTab = $(".tabtest coral-tablist coral-tab");
    coralTab[1].hide();
console.log(coralTab[1].get);
$('.presets', e.target).each(function (i, element) {
Coral.commons.ready(element, function (component) {
$(component).on("change",function (event) {
var coralTab = $(".tabtest coral-tablist coral-tab");
                     coralTab[1].show();
});
});
});
});
})(document, Granite.$, Coral);

Add the below content inside js.txt

#base=js

event.js

Add the below property in cq:dialog node

extraClientlibs String[] — customvalidation(the client library defined in the previous step)

Author the component to a page

Second tab(Column 1) is hided on dialog load

Second tab(Column 1) is shown on the change event of drop down values.

The granite:hidden property can be added to the dialog properties to hide the tab but the hidden tab will not be able to un-hide from script as the hided tab will not be loaded to the browser.

Sample Dialog

https://github.com/techforum-repo/youttubedata/blob/master/aem/hide-show-touchui-tabs-1.0.zip

Follow @albinsblog

Saturday, February 2, 2019

How to handle the Coral UI 3 Select(Drop down) change event in Touch UI dialog’s?

This tutorial explains the approach to handle the change event of Coral UI 3 Select(Drop down) in Touch UI dialog’s.

Define Dialog

As a first step, define a Coral UI 3 Touch UI dialog (cq:dialog) with required fields. The XML structure of the sample dialog is below

<?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="Column Component Responsive"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[customvalidation]">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/tabs">
        <items
            jcr:primaryType="nt:unstructured"
            sling:hideChildren="*">
            <presets
                jcr:primaryType="nt:unstructured"
                jcr:title="Presets"
                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">
                            <title
                                granite:class="title"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldDescription="Note: Titles are not available on the Advanced preset"
                                fieldLabel="Add Title to Columns?"
                                name="./title"
                                text="Add Title to Columns?"/>
                            <padding
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                fieldDescription="check to remove padding from columns"
                                fieldLabel="Remove Padding from Columns?"
                                name="./removePadding"
                                text="Remove Padding from Columns?"/>
                            <presets
                                granite:class="presets"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldDescription="Choose Column style(Advanced for column customization)."
                                fieldLabel="Presets"
                                name="./presets">
                                <items jcr:primaryType="nt:unstructured">
                                    <option1
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(50%,50%) No Offset"
                                        value="50-50-no-offset"/>
                                    <option2
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(50%,50%) with Offset"
                                        value="50-50-with-offset"/>
                                    <option3
                                        jcr:primaryType="nt:unstructured"
                                        text="2 Column(60%,40%)"
                                        value="60-40"/>
                                    <option10
                                        jcr:primaryType="nt:unstructured"
                                        text="Advanced"
                                        value="Advanced"/>
                                </items>
                            </presets>
                            <colnums
                                granite:class="columns"
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                fieldDescription="Choose the number of column(s) will be created."
                                fieldLabel="Columns"
                                name="./columns">
                                <items jcr:primaryType="nt:unstructured">
                                    <_x0031_
                                        jcr:primaryType="nt:unstructured"
                                        text="1"
                                        value="1"/>
                                    <_x0032_
                                        jcr:primaryType="nt:unstructured"
                                        text="2"
                                        value="2"/>
                                </items>
                            </colnums>
                        </items>
                    </column>
                </items>
            </presets>
        </items>
    </content>
</jcr:root>

Add a property with name granite:class to the required elements — this class names will be used to locate the dialog elements in the java script.

Define the Event Listener

Let us now define a even listener that will hide and show the tabs as required.

Define a cq:ClientLibraryFolder node under the component with the name clientlibs and add the below properties.

categories (String[]) — <define category name> e.g customvalidation

Create a folder with name js and add a file with name js.txt under it. Also, Add a file with name event.js under clientlibs folder.

Add the below script in event.js

(function (document, $, Coral) {
var $doc = $(document);
	$doc.on('foundation-contentloaded', function(e) {


      if($('.presets coral-select-item:selected').val()!='Advanced')
      {

		 $('.columns').parent().addClass("hide");

      }


	$('.presets', e.target).each(function (i, element) {

		Coral.commons.ready(element, function (component) {

			$(component).on("change",function (event) {

				if(component.value=='Advanced')
				{
					$('.columns').parent().removeClass("hide");
					$('.title').prop('checked', true);
				}else
				{
					$('.columns').parent().addClass("hide");
					$('.title').prop('checked', false);
				}
			});
		});


	});
	});
})(document, Granite.$, Coral);

This script hide drop down with class name “.columns” on dialog load, register a change event on the drop down with class name “.presets”.

On-change of the value in the drop down with class name “.presets”, if the selected value is ‘Advanced’ then un-hide the drop down with class “.columns “ and also select the checkbox with class name “.title”

If the value is other than ‘Advanced’ then hide drop down with class “.columns “ and un-select the checkbox with class name “.title”

Add the below content inside js.txt

#base=js
event.js

Add the below property in cq:dialog node

extraClientlibs String[] — customvalidation(the client library defined in the previous step)

Author the component to a page

On dialog load, the drop down with class name “.columns” hided

On change of value in the drop down with class name “.presets”, if the selected value is ‘Advanced’ then un-hide the drop down with class “.columns” and also select the checkbox with class name “.title”

If the value is other than ‘Advanced’ then hide drop down with class “.columns “ and un-select the checkbox with class name “.title”

Sample Dialog — https://github.com/techforum-repo/youttubedata/blob/master/aem/handle-coral-ui3-select-change-event-1.0.zip

Follow @albinsblog

Friday, February 1, 2019

/etc/cloudsettings/default/contexthub.kernel.js is not loading in Adobe Experience Manager(AEM) 6.4

The /etc/cloudsettings/default/contexthub.kernel.js(The ContextHub library) is not loading upgrading the AEM environment to 6.4 version.

The below exception is thrown in the error log

01.02.2019 21:05:44.636 *ERROR* [10.153.113.29 [1549055144628] GET /etc/cloudsettings/default/contexthub.kernel.js HTTP/1.1] org.apache.sling.servlets.resolver.internal.SlingServletResolver Original error null

The issue is resolved after changing the value of sling:resourceType from /libs/granite/contexthub/cloudsettings/components/baseconfiguration to granite/contexthub/cloudsettings/components/baseconfiguration in /etc/cloudsettings/default/contexthub

Refer https://forums.adobe.com/message/10907246 for additional details

Follow @albinsblog

Tuesday, January 29, 2019

Proxy ClientLibs not working through Dispatcher: com.adobe.granite.ui.clientlibs.impl.ClientLibraryProxyServlet Proxy request to /etc.clientlibs/clientlibs/granite/jquery.min.js not supported. - AEM 6.4

The proxy ClientLibs are not working through Dispatcher, but the same is accessible via direct publisher e.g /etc.clientlibs/clientlibs/granite/jquery.min.js

The path /etc.clientlibs was allowed in dispatcher as shown below but still it was not accessible through dispatcher domains.

/0012 { /type "allow" /method "GET" /url "/etc.clientlibs/*" }

Based on the analysis the request was reaching publisher but it was rejected from publisher

29.01.2019 19:26:17.200 *INFO* [10.153.113.41 [1548789977199] GET /etc.clientlibs/clientlibs/granite/jquery.min.js HTTP/1.1] com.adobe.granite.ui.clientlibs.impl.ClientLibraryProxyServlet Proxy request to /etc.clientlibs/clientlibs/granite/jquery.min.js not supported.

The issue is resolved after granting the READ access to 'anonymous' user for the /etc node

Please make sure only the required folder under /etc is allowed from dispatcher
e.g

/0012 { /type "allow" /method "GET" /url "/etc.clientlibs/*" }

/0026 { /type "allow" /url "* /etc/designs/*" }

/0027 { /type "allow" /url "* /etc/adobe-mbox/*" }

/0107 { /type "allow" /url "/etc/tags*json" }

Follow @albinsblog

Tuesday, January 8, 2019

Create Touch UI Multifield Dialogs with RTE using Granite/Coral3 components - AEM(Adobe Experience Manager) 6.4

Create Touch UI Multifield Dialog's with RTE using Granite/Coral3 components in AEM 6.4

This post explain the details on creating Touch UI Multifiled Dialog's with RTE using Granite/Coral3 components

Create the cq:dialog with following content(Configure the required plugins and styles for RTE field)

<?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"

jcr:primaryType="nt:unstructured"

jcr:title="dialog"

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

<content

jcr:primaryType="nt:unstructured"

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

<dashboard

jcr:primaryType="nt:unstructured"

jcr:title="Alert"

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

<columns

jcr:primaryType="nt:unstructured"

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

<dashdata

jcr:primaryType="nt:unstructured"

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

composite="{Boolean}true"

fieldDescription="Click the '+' to add a new data"

fieldLabel="Author Alert">

<field

jcr:primaryType="nt:unstructured"

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

name="./alertdata">

<column

jcr:primaryType="nt:unstructured"

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

<title

jcr:primaryType="nt:unstructured"

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

fieldLabel="Title"

key="title"

name="./title"/>

<description

jcr:primaryType="nt:unstructured"

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

fieldLabel="Description"

key="description"

name="./description"

useFixedInlineToolbar="{Boolean}true">

<format

jcr:primaryType="nt:unstructured"

features="*"/>

<justify

jcr:primaryType="nt:unstructured"

features="*"/>

<lists

jcr:primaryType="nt:unstructured"

features="*"/>

<paraformat

jcr:primaryType="nt:unstructured"

features="*"/>

<links

jcr:primaryType="nt:unstructured"

features="*"/>

<image

jcr:primaryType="nt:unstructured"

features="*"/>

<findreplace

jcr:primaryType="nt:unstructured"

features="*"/>

<subsuperscript

jcr:primaryType="nt:unstructured"

features="*"/>

<spellcheck

jcr:primaryType="nt:unstructured"

features="*"/>

<misctools

jcr:primaryType="nt:unstructured"

features="*">

<copyright

jcr:primaryType="nt:unstructured"

entity="&#169;"/>

<trademark

jcr:primaryType="nt:unstructured"

entity="&#8482;"/>

<registered

jcr:primaryType="nt:unstructured"

entity="&#174;"/>

<emDash

jcr:primaryType="nt:unstructured"

entity="&#8212;"/>

<pound

jcr:primaryType="nt:unstructured"

entity="&#163;"/>

<nbsp

jcr:primaryType="nt:unstructured"

entity="&#160;"/>

</chars>

</specialCharsConfig>

</misctools>

<styles

jcr:primaryType="nt:unstructured"

features="*">

<plainSpan

jcr:primaryType="nt:unstructured"

cssName="defaultSpan"

text="Default (add span tag)"/>

<lead

jcr:primaryType="nt:unstructured"

cssName="lead"

text="Lead"/>

</styles>

<table

jcr:primaryType="nt:unstructured"

features="*"/>

</rtePlugins>

<inline

jcr:primaryType="nt:unstructured"

toolbar="[format#bold,format#italic,format#underline,#justify,#lists,subsuperscript#subscript,subsuperscript#superscript,links#modifylink,links#unlink,links#anchor,#image,findreplace#find,findreplace#replace,spellcheck#checktext,misctools#specialchars,misctools#sourceedit,#styles,#paraformat,table#table]">

<justify

jcr:primaryType="nt:unstructured"

items="[justify#justifyleft,justify#justifycenter,justify#justifyright]"

ref="justify"/>

<lists

jcr:primaryType="nt:unstructured"

items="[lists#unordered,lists#ordered,lists#outdent,lists#indent]"

ref="lists"/>

<paraformat

jcr:primaryType="nt:unstructured"

items="paraformat:getFormats:paraformat-pulldown"

ref="paraformat"/>

<styles

jcr:primaryType="nt:unstructured"

items="styles:getStyles:styles-pulldown"

ref="styles"/>

</popovers>

</inline>

</cui>

</uiSettings>

</description>

<checkaction

jcr:primaryType="nt:unstructured"

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

defaultChecked="{Boolean}false"

key="checkaction"

name="checkaction"

text="Click for action button"

uncheckedValue="{Boolean}false"

value="{Boolean}true"/>

</items>

</column>

</items>

</field>

</dashdata>

</items>

</columns>

</items>

</dashboard>

</items>

</content>

</jcr:root>

Now the authored dialog values are stored as shown below

Refer the following post for retrieving the dialog values - https://www.albinsblog.com/2018/12/how-to-enable-authors-to-override-or-add-metatags-aem.html

Follow @albinsblog

Blog posts around Oracle SOA Suite,Adobe Experience Manager(AEM),Dispatcher and Web technologies

Pages

Monday, February 4, 2019

How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM)

How to hide/show tabs in Coral 3 Touch UI dialog — Adobe Experience Manager(AEM)

Define Dialog

Define the Event Listener

Saturday, February 2, 2019

How to handle the Coral UI 3 Select(Drop down) change event in Touch UI dialog’s?

How to handle the Coral UI 3 Select(Drop down) change event in Touch UI dialog’s?

Define Dialog

Define the Event Listener

Friday, February 1, 2019

/etc/cloudsettings/default/contexthub.kernel.js is not loading in Adobe Experience Manager(AEM) 6.4

/etc/cloudsettings/default/contexthub.kernel.js is not loading in Adobe Experience Manager(AEM) 6.4

Tuesday, January 29, 2019

Proxy ClientLibs not working through Dispatcher: com.adobe.granite.ui.clientlibs.impl.ClientLibraryProxyServlet Proxy request to /etc.clientlibs/clientlibs/granite/jquery.min.js not supported. - AEM 6.4

Proxy ClientLibs not working through Dispatcher: com.adobe.granite.ui.clientlibs.impl.ClientLibraryProxyServlet Proxy request to /etc.clientlibs/clientlibs/granite/jquery.min.js not supported. - AEM 6.4

Tuesday, January 8, 2019

Create Touch UI Multifield Dialogs with RTE using Granite/Coral3 components - AEM(Adobe Experience Manager) 6.4

Create Touch UI Multifield Dialog's with RTE using Granite/Coral3 components in AEM 6.4