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?

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

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.

handle — coral-ui3-select-change-event
handle — coral-ui3-select-change-event

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 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)

handle — coral-ui3-select-change-event

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”

handle — coral-ui3-select-change-event
handle — coral-ui3-select-change-event

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


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

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

contexthub_kernel_js_notloading


contexthub_kernel_js_notloading

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


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


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

Proxy_ClientLibs_Issue_etc_readonly

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



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

touch_ui_multifield_dialog_rte_aem

touch_ui_multifield_dialog_rte_aem

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">
        <items jcr:primaryType="nt:unstructured">
            <dashboard
                jcr:primaryType="nt:unstructured"
                jcr:title="Alert"
                sling:resourceType="granite/ui/components/coral/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <columns
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <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">
                                    <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/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">
                                                    <rtePlugins jcr:primaryType="nt:unstructured">
                                                        <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="*">
                                                            <specialCharsConfig jcr:primaryType="nt:unstructured">
                                                                <chars jcr:primaryType="nt:unstructured">
                                                                    <copyright
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#169;"/>
                                                                    <trademark
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#8482;"/>
                                                                    <registered
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#174;"/>
                                                                    <emDash
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#8212;"/>
                                                                    <pound
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#163;"/>
                                                                    <nbsp
                                                                        jcr:primaryType="nt:unstructured"
                                                                        entity="&amp;#160;"/>
                                                                </chars>
                                                            </specialCharsConfig>
                                                        </misctools>
                                                        <styles
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*">
                                                            <styles jcr:primaryType="nt:unstructured">
                                                                <plainSpan
                                                                    jcr:primaryType="nt:unstructured"
                                                                    cssName="defaultSpan"
                                                                    text="Default (add span tag)"/>
                                                                <lead
                                                                    jcr:primaryType="nt:unstructured"
                                                                    cssName="lead"
                                                                    text="Lead"/>
                                                            </styles>
                                                        </styles>
                                                        <table
                                                            jcr:primaryType="nt:unstructured"
                                                            features="*"/>
                                                    </rtePlugins>
                                                    <uiSettings jcr:primaryType="nt:unstructured">
                                                        <cui jcr:primaryType="nt:unstructured">
                                                            <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]">
                                                                <popovers jcr:primaryType="nt:unstructured">
                                                                    <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>

touch_ui_multifield_dialog_rte_aem


Now the authored dialog values are stored as shown below

touch_ui_multifield_dialog_rte_aem


touch_ui_multifield_dialog_rte_aem


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


Tuesday, December 25, 2018

com.google.appengine.tools.admin.AdminException: Unable to stage app: Cannot get the System Java Compiler. Please use a JDK, not a JRE - Google SDK App Deployment

I was getting the below exception while deploying the application through google cloud SDK command line interface - gcloud app deploy appengine-web.xml

gcloud-app-deploy-no-jdk

Unable to stage:
java.lang.RuntimeException: Cannot get the System Java Compiler. Please use a JDK, not a JRE.
at com.google.appengine.tools.admin.Application.compileJspJavaFiles(Application.java:1297)
at com.google.appengine.tools.admin.Application.compileJsps(Application.java:1273)
at com.google.appengine.tools.admin.Application.populateStagingDirectory(Application.java:983)
at com.google.appengine.tools.admin.Application.createStagingDirectory(Application.java:875)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplication(AppAdminImpl.java:539)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplicationWithDefaultResourceLimits(AppAdminImpl.java:492)
at com.google.appengine.tools.admin.AppCfg$StagingAction.execute(AppCfg.java:2508)
at com.google.appengine.tools.admin.AppCfg.executeAction(AppCfg.java:363)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:211)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:118)
at com.google.appengine.tools.admin.AppCfg.main(AppCfg.java:114)
com.google.appengine.tools.admin.AdminException: Unable to stage app: Cannot get the System Java Compiler. Please use a JDK, not a JRE.
at com.google.appengine.tools.admin.AppAdminImpl.stageApplication(AppAdminImpl.java:543)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplicationWithDefaultResourceLimits(AppAdminImpl.java:492)
at com.google.appengine.tools.admin.AppCfg$StagingAction.execute(AppCfg.java:2508)
at com.google.appengine.tools.admin.AppCfg.executeAction(AppCfg.java:363)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:211)
at com.google.appengine.tools.admin.AppCfg.<init>(AppCfg.java:118)
at com.google.appengine.tools.admin.AppCfg.main(AppCfg.java:114)
Caused by: java.lang.RuntimeException: Cannot get the System Java Compiler. Please use a JDK, not a JRE.
at com.google.appengine.tools.admin.Application.compileJspJavaFiles(Application.java:1297)
at com.google.appengine.tools.admin.Application.compileJsps(Application.java:1273)
at com.google.appengine.tools.admin.Application.populateStagingDirectory(Application.java:983)
at com.google.appengine.tools.admin.Application.createStagingDirectory(Application.java:875)
at com.google.appengine.tools.admin.AppAdminImpl.stageApplication(AppAdminImpl.java:539)
... 6 more

The Java/Javac versions and the JAVA_HOME and PATH variables were configured properly.

gcloud-app-deploy-no-jdk

Also the java runtime was configured properly in appengine-web.xml

gcloud-app-deploy-no-jdk

After little struggle,  the root cause of the issue was with wrong configuration of PATH environment variable.

Other Java executables added to the PATH variable caused the SDK to choose the JRE version for deployment. 

gcloud-app-deploy-no-jdk


The issue got fixed after changing the order of PATH variable - moved up the JAVA bin path over other path configurations

gcloud-app-deploy-no-jdk