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">
                                <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>
                        </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). This is a use-api javascript file to read the multifield data and add in a data structure understood by the HTL script for rendering it on page

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


No comments:

Post a Comment