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

2 comments:

  1. Greetings!
    Where did you put the "lead" css class that's being referenced at:

    jcr:primaryType="nt:unstructured"
    cssName="lead"


    I have trouble making the css apply.
    Thanks!

    ReplyDelete