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>
Here bullet(list) is not rendering to the page.
ReplyDelete