AEM Custom Text component in touch UI

AEM Custom Text component in touch UI with alignment and text color.

In this article we will see how to create custom text component in aem with custom dialog using CRXDE Lite.

Open CRXDE Lite , create a component folder in apps/. Right click on components folder Select Create –> Create Components.

Enter below details in the Create Component dialog : 

Label : customTextComponent 

Title : My Text Component

Description : My Text Component

Click Next till last screen and click OK on last Screen.

Click on Save All on top left of crxde to save the changes.

Now customTextComponent.jsp file created under this component.

Copy below code into the 'customTextComponent.jsp' file.

<%--My Text Component--%> <%@include file="/libs/foundation/global.jsp"%> <cq:includeClientLib categories="cq.jquery"/> <% %><%@page session="false" %><% %> <%-- Text component. --%> <div class="text-${properties.alignstyle}"> <c:choose> <c:when test="${empty properties.headertitle}"> <wcmmode:edit> <h1 class="color-${properties.headertitlecolor}"> HEADER TITLE</h1> </wcmmode:edit> </c:when> <c:otherwise> <h1 class="color-${properties.headertitlecolor}"> ${properties.headertitle}</h1> </c:otherwise> </c:choose> <c:choose> <c:when test="${empty properties.title}"> <wcmmode:edit> <h2 class="color-${properties.title_color}"> TITLE</h2> </wcmmode:edit> </c:when> <c:otherwise> <h2 class="color-${properties.title_color}"> ${properties.title}</h2> </c:otherwise> </c:choose> <c:choose> <c:when test="${empty properties.description}"> <wcmmode:edit> <div class="color-${properties.descriptionColor}"> Description</div> </wcmmode:edit> </c:when> <c:otherwise> <div class="color-${properties.descriptionColor}"> ${properties.description}</div> </c:otherwise> </c:choose> </div>

Now create touch ui dialog as below.

• Right click on customTextComponent -> create Node.
• Name 'cq:dialog' and Type 'nt:unstructured'

Now it will create .content.xml file under your project physical location (note: it won't show in crxde).

/myproject/jcr_root/apps/yourComponents_dir/yourCustomComponent/_cq_dialog/.content.xml

Open .content.xml and replace with below 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="Text" sling:resourceType="cq/gui/components/authoring/dialog" width="800"> <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"> <Text jcr:primaryType="nt:unstructured" jcr:title="Text Properties" sling:resourceType="granite/ui/components/foundation/container"> <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"> <headertitleTitle jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Header Title" name="./headertitle"/> <headertitleTitle_1_color jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" fieldLabel="Select Title Color" name="./headertitlecolor"> <items jcr:primaryType="nt:unstructured"> <grey jcr:primaryType="nt:unstructured" text="Dark-Grey" value="grey"/> <lightgrey jcr:primaryType="nt:unstructured" text="Light-Grey" value="lightgrey"/> <black jcr:primaryType="nt:unstructured" text="Black" value="black"/> <white jcr:primaryType="nt:unstructured" text="White" value="white"/> </items> </headertitleTitle_1_color> <Title jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/textfield" fieldLabel="Title" name="./title"/> <title_1_color jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" fieldLabel="Select Title Color" name="./title_color"> <items jcr:primaryType="nt:unstructured"> <grey jcr:primaryType="nt:unstructured" text="Dark-Grey" value="grey"/> <lightgrey jcr:primaryType="nt:unstructured" text="Light-Grey" value="lightgrey"/> <black jcr:primaryType="nt:unstructured" text="Black" value="black"/> <white jcr:primaryType="nt:unstructured" text="White" value="white"/> </items> </title_1_color> <Description jcr:primaryType="nt:unstructured" sling:resourceType="cq/gui/components/authoring/dialog/richtext" cols="{Long}3" fieldLabel="Description" name="./description" rows="{Long}10" 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="*"/> <table jcr:primaryType="nt:unstructured" features="[\0]"> <hiddenHeaderConfig jcr:primaryType="nt:unstructured" hiddenHeaderClassName="cq-wcm-foundation-aria-visuallyhidden" hiddenHeaderEditingCSS="coral-RichText-hiddenHeader--editing"/> <subsuperscript jcr:primaryType="nt:unstructured" features="*"/> </table> </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]"> <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> </cui> </uiSettings> </Description> <descriptionColor jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" fieldLabel="Select Description Color" name="./descriptionColor"> <items jcr:primaryType="nt:unstructured"> <grey jcr:primaryType="nt:unstructured" text="Dark-Grey" value="grey"/> <lightgrey jcr:primaryType="nt:unstructured" text="Light-Grey" value="lightgrey"/> <black jcr:primaryType="nt:unstructured" text="Black" value="black"/> <white jcr:primaryType="nt:unstructured" text="White" value="white"/> </items> </descriptionColor> <alignstyle jcr:primaryType="nt:unstructured" sling:resourceType="granite/ui/components/foundation/form/select" fieldLabel="Align Style" name="./alignstyle"> <items jcr:primaryType="nt:unstructured"> <center jcr:primaryType="nt:unstructured" text="Center" value="center"/> <left jcr:primaryType="nt:unstructured" text="Left" value="left"/> <right jcr:primaryType="nt:unstructured" text="Right" value="right"/> </items> </alignstyle> </items> </column> </items> </Text> </items> </content> </jcr:root>

Now create 'clientlib' folder with below properties.

• Right click on 'customTextComponent' -> create Node.
• Name 'clientlib' and Type 'cq:ClientLibraryFolder'

Now add below properties for clientlib.
Select clientlib folder -> add properties 'categories' and 'dependencies' as below.

Now right click on clientlib folder > create folder 'css'
Now right click on clientlib folder > create file 'css.txt'

Copy below text and paste into 'css.txt'

#base=css

customTextcomponent.css

Now right click on 'css' folder -> create file 'customTextcomponent.css'

Copy below css and paste into 'customTextcomponent.css'.

.text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .color-grey { color: #808080; } .color-lightgrey { color: #D3D3D3; } .color-black { color: #000; } .color-white { color: #fff; }
Now integrate your customTextComponent in page.
Drag customTextComponent and open dialog.

And your page will be like below.

Enjoy with your customTextComponent.!!!

Please comment if it's helpful or for any questions.