Add richtext field to a Touch UI Dialog - AEM 6.2

Question

I am setting up a dialog that has the following fields - 1. A field to accept image as an input 2. A field to accept a title 3. A field that will accept richtext.

Please note that I do not want to enable inplace editing. I just want to add a richtext field (with all features enabled) in my dialog and use the data entered in this field in my component.

I am able to implement 1. and 2. but dont know how to go about 3.

Here is my code -

<?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="Section Container"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/tabs"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <Styling
                jcr:primaryType="nt:unstructured"
                jcr:title="Styling"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <question_single
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="Please enter the Question"
                                fieldLabel="Question for Single"
                                name="./question_single"/>
                            <question_couple
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="Please enter the Question"
                                fieldLabel="Question for Couple Applicants"
                                name="./question_couple"/>
                            <page_header
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldDescription="Please enter page header"
                                fieldLabel="Page Header"
                                name="./page_header"/>
                        </items>
                    </column>
                </items>
            </Styling>
            <image
                jcr:primaryType="nt:unstructured"
                jcr:title="Image Properties"
                sling:resourceType="granite/ui/components/foundation/section">
                <layout
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                    margin="{Boolean}false"/>
                <items jcr:primaryType="nt:unstructured">
                    <column
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <items jcr:primaryType="nt:unstructured">
                            <file
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/fileupload"
                                autoStart="{Boolean}false"
                                class="cq-droptarget"
                                fieldLabel="Image asset"
                                fileNameParameter="./image/fileName"
                                fileReferenceParameter="./image/fileReference"
                                mimeTypes="[image]"
                                multiple="{Boolean}false"
                                name="./image/file"
                                title="Upload Image Asset"
                                uploadUrl="${suffix.path}"
                                useHTML5="{Boolean}true"/>
                            <title
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/foundation/form/textfield"
                                fieldLabel="Title"
                                name="./image/jcr:title"/>

                        </items>
                    </column>
                </items>
            </image>
        </items>
    </content>
</jcr:root>

Please ignore the fields in the first tab. richtext field needs to be added to the second tab.

Please help! Thanks in Advance!

Answer 1

Adobe recommends to use the richtext field using the InPlaceEditing/Full Screen Editing instead of adding the fields in the dialog as the complete functionality is covered by In-place/Full-screen editing.

Click Here for the reference from Adobe Docs.

However, if you really wish to use the RTE field inside your dialog, you can make use of the sling:resourceType="cq/gui/components/authoring/dialog/richtext" property to do the same.

See sample code below (the code refers to a richtext field in the touch UI dialog, simply put this piece of code in your touch UI dialog xml at the relevant place to make the dialog work).

<description
    jcr:primaryType="nt:unstructured"
    sling:resourceType="cq/gui/components/authoring/dialog/richtext"
    name="./rteTextPropertyName"
    useFixedInlineToolbar="{Boolean}true">
    <rtePlugins jcr:primaryType="nt:unstructured">
        <subsuperscript
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <format
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <justify
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <spellcheck
            jcr:primaryType="nt:unstructured"
            features="*"/>
        <misctools
            jcr:primaryType="nt:unstructured"
            features="[specialchars]">
            <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>
    </rtePlugins>
    <uiSettings jcr:primaryType="nt:unstructured">
        <cui jcr:primaryType="nt:unstructured">
            <inline
                jcr:primaryType="nt:unstructured"
                toolbar="[format#bold,format#italic,format#underline,#paraformat,image#imageProps,#justify,#lists,links#modifylink,links#unlink,findreplace#find,findreplace#replace,subsuperscript#subscript,subsuperscript#superscript,spellcheck#checktext,misctools#specialchars]">
                <popovers jcr:primaryType="nt:unstructured">
                    <justify
                        jcr:primaryType="nt:unstructured"
                        items="[justify#justifyleft]"
                        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"/>
                </popovers>
            </inline>
        </cui>
    </uiSettings>
</description>

P.S.: I have added only a few RTE plugins keeping the length of the sample code in mind. You can add other plugins as needed.

Make sure to provide the correct context if reading the property in sightly (in here html), see below:

${properties.rteTextPropertyName @context = 'html'}