AEM 65 - TouchUI Composite Multifield with Coral3 RTE (RichText) Field

Goal

Create a sample Composite Multifield configuration with Rich Text Editor widget cq/gui/components/authoring/dialog/richtext , read and render data on page using HTL (Sightly) script

Demo | Package Install | Github


RTE Configuration



RTE in Multifield



Data Saved in CRX

Solution

1) Login to CRXDe Lite http://localhost:4502/crx/de/index.jsp and create the RTE field configuration in component cq:dialog e.g. /apps/eaem-touchui-rte-composite-multifield/sample-rte-composite-multifield/cq:dialog/content/items/column/items/products/field/items/column/items/text

<?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="65 RTE Composite Multi Field"
    sling:resourceType="cq/gui/components/authoring/dialog">
<content
        jcr:primaryType="nt:unstructured"
        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">
<products
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                        composite="{Boolean}true"
                        fieldLabel="Products">
<field
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/coral/foundation/container"
                            name="./products">
<items jcr:primaryType="nt:unstructured">
<column
                                    jcr:primaryType="nt:unstructured"
                                    sling:resourceType="granite/ui/components/coral/foundation/container">
<items jcr:primaryType="nt:unstructured">
<product
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                            fieldDescription="Name of Product"
                                            fieldLabel="Product Name"
                                            name="./product"/>
<path
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathbrowser"
                                            fieldDescription="Select Path"
                                            fieldLabel="Path"
                                            name="./path"
                                            rootPath="/content"/>
<text
                                            jcr:primaryType="nt:unstructured"
                                            sling:resourceType="cq/gui/components/authoring/dialog/richtext"
                                            name="./text"
                                            useFixedInlineToolbar="{Boolean}true">
<rtePlugins jcr:primaryType="nt:unstructured">
<format
                                                    jcr:primaryType="nt:unstructured"
                                                    features="bold,italic"/>
<justify
                                                    jcr:primaryType="nt:unstructured"
                                                    features="-"/>
<links
                                                    jcr:primaryType="nt:unstructured"
                                                    features="modifylink,unlink"/>
<lists
                                                    jcr:primaryType="nt:unstructured"
                                                    features="*"/>
<paraformat
                                                    jcr:primaryType="nt:unstructured"
                                                    features="*">
<formats jcr:primaryType="nt:unstructured">
<default_p
                                                            jcr:primaryType="nt:unstructured"
                                                            description="Paragraph"
                                                            tag="p"/>
<default_h1
                                                            jcr:primaryType="nt:unstructured"
                                                            description="Heading 1"
                                                            tag="h1"/>
<default_h2
                                                            jcr:primaryType="nt:unstructured"
                                                            description="Heading 2"
                                                            tag="h2"/>
<default_h3
                                                            jcr:primaryType="nt:unstructured"
                                                            description="Heading 3"
                                                            tag="h3"/>
</formats>
</paraformat>
<tracklinks
                                                    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,links#modifylink,links#unlink,#paraformat]">
<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"/>
</popovers>
</inline>
<dialogFullScreen
                                                        jcr:primaryType="nt:unstructured"
                                                        toolbar="[format#bold,format#italic,format#underline,justify#justifyleft,justify#justifycenter,justify#justifyright,lists#unordered,lists#ordered,lists#outdent,lists#indent,links#modifylink,links#unlink,table#createoredit,#paraformat,image#imageProps]">
<popovers jcr:primaryType="nt:unstructured">
<paraformat
                                                                jcr:primaryType="nt:unstructured"
                                                                items="paraformat:getFormats:paraformat-pulldown"
                                                                ref="paraformat"/>
</popovers>
</dialogFullScreen>
</cui>
</uiSettings>
</text>
</items>
</column>
</items>
</field>
</products>
</items>
</column>
</items>
</content>
</jcr:root>

2) Create file (nt:file) /apps/eaem-touchui-rte-composite-multifield/sample-rte-composite-multifield/helper.js, add the following code for reading entered data (stored in nodes)

"use strict";

use( ["/libs/wcm/foundation/components/utils/ResourceUtils.js","/libs/sightly/js/3rd-party/q.js" ], function(ResourceUtils, Q){
    var prodPromise = Q.defer(), company = {},
        productsPath = granite.resource.path + "/products";

    company.products = undefined;

    ResourceUtils.getResource(productsPath)
            .then(function (prodParent) {
                return prodParent.getChildren();
            })
            .then(function(products) {
                addProduct(products, 0);
            });

    function addProduct(products, currIndex){
        if(!company.products){
            company.products = [];
        }

        if (currIndex >= products.length) {
            prodPromise.resolve(company);
            return;
        }

        var productRes = products[currIndex],
            properties = productRes.properties;

        var product = {
            path: properties.path,
            name: properties.product,
            text: properties.text
        };

        log.info("----" + product.text);

        company.products.push(product);

        addProduct(products, (currIndex + 1));
    }

    return prodPromise.promise;
} );

3) Create file (nt:file) /apps/eaem-touchui-rte-composite-multifield/sample-rte-composite-multifield/sample-rte-composite-multifield.html, add the following HTL code for displaying MF entered data on page

<div>
<b>65 RTE Composite Multifield</b>

<div data-sly-use.company="helper.js" data-sly-unwrap>
<div data-sly-test="${!company.products && wcmmode.edit}">
            Add products using component dialog
</div>

<div data-sly-test="${company.products}">
<div data-sly-list.product="${company.products}">
<div>
<div><strong>${product.name}</strong></div>
<div>${product.path}</div>
<div>${product.text @ context='html'}</div>
</div>
</div>
</div>
</div>
</div>