Article summary

Summary
Discusses the following points:
  • how to develop an AEM 6 Touch UI component. 
  • how to customize the Touch UI RTE

A special thank you to Ratna Kumar Kotla and Ankur Ahlawat for contributing an AEM package that is used in this article. It's great community members like them that help the overall AEM community. If you would like to contribute in this manner to help the AEM community, please reach out to the AEM community manager, Scott Macdonald (scottm@adobe.com).

In addition to reading this article, it is also recommended that you watch this AEM ATE session on this subject.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, JavaScript, HTML
Tested On Adobe Experience Manager 6.1

Note:

You can download an AEM package that contains the code used in this article. Download the package and deploy using package manager. The purpose of this code is to show the community these concepts in action. That is, it's to illustrate how to customize an AEM Touch UI component's Rich Text Editor. This community code is for teaching purposes only and not meant to go into production as is. You can view the sample community application by using the following URL: http://localhost:4502/editor.html/content/TestTouchRTE.html (assuming you deploy on author).

Download

Note:

After installing this component - ensure that you add it to the side kick or side rail. This is required to drag the component from the side kick in Classic UI or the side rail in the Touch UI. See the section titled: View the AEM page in Classic UI view and populate the AEM side kick at the end of this document. 

Introduction

You can create an Adobe Experience Manager (AEM) 6 Touch UI component that contains a Rich Text Editor (RTE). As a component developer, you can configure the RTE when developing the component. The Rich Text Editor provides authors with a wide range of functionality for editing their textual content; providing them with icons, selection boxes and menus for a WYSIWYG experience.   

Touch_RTE
A Touch UI dialog that contains a RTE

Note:

In the Touch UI environment, components are located on the side rail. In the AEM classic view, components are located in the AEM side kick. 

To perform validation operations on Touch UI dialogs values, you have to write custom application logic using JavaScript, as discussed in this development article. You can add the JS file in an AEM ClientLibs folder. The following illustration shows the project files created in this development article.

ClientFiles
Section Description
A An AEM Client Lib folder that contains JS script that defines the validation logic.
B The Touch UI dialog

This development article steps you through how to build an AEM 6 Touch UI component that lets an AEM author drag the component from the side rail onto an AEM page and set text values. Perform these steps:

  1. Create a CQ application folder structure. 
  2. Create a template on which the page component is based.
  3. Create the page component based on the template.
  4. Create an AEM 6 Touch UI component.
  5. Add a dialog to the Touch UI component. 
  6. Create a CQ web page that uses the new component.

Create an AEM application folder structure  

Create an AEM application folder structure that contains templates, components, and pages by using CRXDE Lite.  

CQAppSetup

 

The following describes each application folder:

  • application name: contains all of the resources that an application uses. The resources can be templates, pages, components, and so on.
  • components: contains components that your application uses.
  • page: contains page components. A page component is a script such as a JSP file.
  • global: contains global components that your application uses.
  • template: contains templates on which you base page components.
  • src: contains source code that comprises an OSGi component (this development article does not create an OSGi bundle using this folder).
  • install: contains a compiled OSGi bundles container.

To create an application folder structure:

  1. To view the CQ welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.
  2. Select CRXDE Lite.
  3. Right-click the apps folder (or the parent folder), select Create, Create Folder.
  4. Enter the folder name into the Create Folder dialog box. Enter touchRTE.
  5. Repeat steps 1-4 for each folder specified in the previous illustration.
  6. Click the Save All button.

Note:

You have to click the Save All button when working in CRXDE Lite for the changes to be made.  

Create a template 

You can create a template by using CRXDE Lite. A CQ template enables you to define a consistent style for the pages in your application. A template comprises of nodes that specify the page structure. For more information about templates, see Templates.

To create a template, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click the template folder (within your application), select Create, Create Template.

4. Enter the following information into the Create Template dialog box:

  • Label: The name of the template to create. Enter templateTouch
  • Title: The title that is assigned to the template.
  • Description: The description that is assigned to the template.
  • Resource Type: The component's path that is assigned to the template and copied to implementing pages. Enter valTouch/components/page/templateTouch.
  • Ranking: The order (ascending) in which this template will appear in relation to other templates. Setting this value to 1 ensures that the template appears first in the list.

5. Add a path to Allowed Paths. Click on the plus sign and enter the following value: /content(/.*)?.

6. Click Next for Allowed Parents.

7. Select OK on Allowed Children.

Create the page component based on the template  

Components are re-usable modules that implement specific application logic to render the content of your web site. You can think of a component as a collection of scripts (for example, JSPs, Java servlets, and so on) that completely realize a specific function. In order to realize this functionality, it is your responsibility as a CQ developer to create scripts that perform specific functionality. For more information about components, see Components.

By default, a component has at least one default script, identical to the name of the component. To create a render component, perform these tasks:

1. To view the welcome page, enter the URL http://[host name]:[port] into a web browser. For example, http://localhost:4502.

2. Select CRXDE Lite.

3. Right-click /apps/website2/components/page, then select Create, Create Component.

4. Enter the following information into the Create Component dialog box:

  • Label: The name of the component to create. Enter templateRTE.
  • Title: The title that is assigned to the component.
  • Description: The description that is assigned to the template.
  • Super Type: foundation/components/page (in AEM 6, you specify this value for page components. In previous versions of AEM, this was not rquired.)

5. Select Next for Advanced Component Settings and Allowed Parents.

6. Select OK on Allowed Children.

7. Open the templateWeb.jsp located at: /apps/touchRTE/components/page/templateRTE/templateRTE.jsp.

8. Enter the following HTML code.

<html>
<%@include file="/libs/foundation/global.jsp" %>
<cq:include script="/libs/wcm/core/components/init/init.jsp"/>
<body>
<h1>Here is where your Touch UI component will go</h1>
<cq:include path="par" resourceType="foundation/components/parsys" />
</body>
</html>

Overlay the Text component

Copy the existing text component located here:

/libs/foundation/components/text

to 

/apps/touchRTE/components

 

To configure the Touch UI RTE, perform these steps:

1. Overlay the text component as described in this section. 

2. Changes the jcr:title property to TextRTE.

3. Remove the node property named configPath from /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing. (If you do not remove this node property, then the Touch UI RTE cannot be configured in the Touch UI.)

4. Right Click on the cq:inplaceEditing node and Select Create Node.

5. Enter the following values: 

  • Name: config
  • Type: nt:unstructured

6. Right Click on the /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config node and Select Create Node.

7. Enter the following values: 

  • Name: rtePlugins
  • Type: nt:unstructured

Note: This node name must be rtePlugins; or else the Touch UI RTE does not function correctly. 

Adding the Touch UI RTE plugins

To configure the AEM Touch UI RTE, you build JCR nodes and properties, similar to building a component dialog. The following illustration shows the JCR nodes that controls the behaviour of the AEM Touch UI RTE. 

pliug-ins
JCR nodes for the Touch UI RTE

RTE Headings

You can create headings that appear in the AEM Touch UI RTE using a paraformat node. Setup the RTE so three levels of headings appear along with a paragraph, as shown in the following illustration. 

headings
RTE displaying different headings

Create the paraformat nodes by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: paraformat
  • Type: nt:unstructured

3. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/paraformat.

4. Right click and select Create, Create Node. Enter the following values:

  • Name: format
  • Type: nt:unstructured

5. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/paraformat/format.

6. Right click and select Create, Create Node. Enter the following values:

  • Name: p
  • Type: nt:unstructured

7. Add the following properties to the p node: 

  • description (String) - This is my Paragraph
  • tag (String) - p

8. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/paraformat/format.

9. Right click and select Create, Create Node. Enter the following values:

  • Name: h1
  • Type: nt:unstructured

10. Add the following properties to the h1 node:

  • description (String) - Header 1
  • tag (String) - h1

11. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/paraformat/format.

12. Right click and select Create, Create Node. Enter the following values:

  • Name: h2
  • Type: nt:unstructured

13. Add the following properties to the h2 node:

  • description (String) - Header 2
    tag (String) - h2
14. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/paraformat/format.
 
15. Right click and select Create, Create Node. Enter the following values:
  • Name: h3
  • Type: nt:unstructured

16. Add the following properties to the h3 node:

  • description (String) - Header 3
  • tag (String) - h3


 

Creating misctools

Miscellaneous tools allow you to enter special characters or edit the HTML source. Special characters can be made available to your rich text editor; these might vary according to your installation. For example, consider the following illustration.

SpecChars
Special characters in the Touch UI RTE

Create the misctools nodes by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: misctools
  • Type: nt:unstructured

3. Add the following property to the misctools node.

 

Name Type Value Description
features
String *
Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.

4. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools.

5. Right click and select Create, Create Node. Enter the following values:

  • Name: specialCharsConfig
  • Type: nt:unstructured

6. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig.

7. Right click and select Create, Create Node. Enter the following values:

  • Name: chars
  • Type: nt:unstructured

8. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig/chars.

9. Right click and select Create, Create Node.

10. Enter the following values:

  • Name: pound
  • Type: nt:unstructured

10. Add the following property to the pound node.

  • entity (String) - &#163;

11. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig/chars.

12. Right click and select Create, Create Node.

13. Enter the following values:

  • Name: nbsp
  • Type: nt:unstructured

14. Add the following property to the nbsp node.

  • entity (String) - &#160;

15. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig/chars.

16. Right click and select Create, Create Node.

17. Enter the following values:

  • Name: registered
  • Type: nt:unstructured

18. Add the following property to the registered node.

  • entity (String) - &#174;

19. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig/chars.

20. Right click and select Create, Create Node.

21. Enter the following values:

  • Name: copyright
  • Type: nt:unstructured

22. Add the following property to the copyright node.

  • entity (String) - &#169;

23. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig/chars.

24. Right click and select Create, Create Node.

25. Enter the following values:

  • Name: trademark
  • Type: nt:unstructured

26. Add the following property to the trademark node.

  • entity (String) - &#8482;

27. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/misctools/specialCharsConfig/chars.

28. Right click and select Create, Create Node.

29. Enter the following values:

  • Name: emDash
  • Type: nt:unstructured

30. Add the following property to the emDash node.

  • entity (String) - &#8212;

Edit functionality

You can create basic editing functions (cut, copy, paste) as a plugin. Create the edit node by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: edit
  • Type: nt:unstructured

3. Add the following properties to the edit node.

  • defaultPasteMode (String) - plaintext (Default mode when pasting is executed using the Ctrl + V key or the main paste button (defaults to "wordhtml").)
  • stripHtmlTags (Boolean) - true (True if HTML tags should be stripped off before inserting it on paste.)

Spellcheck functionality

You can create spellcheck functionality as a plugin. 

SpellCheck
Spellcheck functionality in the Touch UI RTE

Create the spellcheck node by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: spellcheck
  • Type: nt:unstructured

3. Add the following property to the spellcheck node.

  • features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

Findreplace functionality

You can create find and replace functionality as a plugin.

FindReplace
Find and replace functionality in the Touch UI RTE

Create the findreplace node by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: findreplace
  • Type: nt:unstructured

3. Add the following property to the findreplace node.

  • features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

Subsuperscript functionality

You can create sub and superscript functionality as a plugin. Create the subsuperscript node by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: subsuperscript
  • Type: nt:unstructured

3. Add the following property to the subsuperscript node.

  • features (String) - * (Defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

Styles functionality

You can create styling text fragments with a CSS class (using "span" tags) functionality as a plugin. 

Style
Style plugin located in the Touch UI RTE

Create the styles node by performing these tasks:

1. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins.

2. Right click and select Create, Create Node. Enter the following values:

  • Name: styles
  • Type: nt:unstructured

3. Add the following properties to the styles node.

  • features (String)  - * (defines which features of the plugin are activated. You may provide a String value of "*" to enable all features.)

4. Select the following node: /apps/touchRTE/components/text/cq:editConfig/cq:inplaceEditing/config/rtePlugins/styles.

5. Right click and select Create, Create Node. Enter the following values:

  • Name: styles
  • Type: nt:unstructured

6. Select the following node: /apps/hook/components/rteconfig/rtePlugins/styles/styles.

7. Right click and select Create, Create Node. Enter the following values:

  • Name: plainSpan
  • Type: nt:unstructured

8. Add the following properties to the plainSpan node.

  • cssName (String) - defaultSpan
  • text (String) - Default (add span tag)

9. Select the following node: /apps/hook/components/rteconfig/rtePlugins/styles/styles.

10. Right click and select Create, Create Node. Enter the following values:

  • Name: strikethrough
  • Type: nt:unstructured


11. Add the following properties to the plainSpan node.

  • cssName (String) - Strike Through
  • text (String) - strikethrough

Create an AEM web page that uses the Touch UI custom component 

The final task is to create a site in the AEM Touch UI view that contains a page that is based on  templateRTE (the template created earlier in this development article). This AEM page lets you select the text component that you just created from the AEM Touch UI side rail, as shown in the following illustration.

webpage

In Edit mode, click the component edit icon. 

 

editIcon
The edit icon

To view all features of the RTE, click the full screen option. 

fullscreen
Full screen

Now you can view the Touch UI RTE and all of the features that you developed by following this article. To create an AEM web page that uses the Touch UI component, perform these tasks:

  1. Go to the AEM welcome page at http://[host name]:[port]; for example, http://localhost:4502.
  2. Select Sites.
  3. Select the + Icon in the web page. This create a new AEM page. 
  4. Select Create Page.
  5. Select templateRTE from the list of templates that appear. 
  6. Select Next.
  7. Specify the name of the page in the Title field.
  8. Select Create Page and open the new page. 
  9. Drag the text component (from the Adobe category) from the AEM side rail into the page. Double click on the component. Enter values into the dialog. Once done, the values are displayed in the AEM web page.

Note:

If the AEM side panel is empty, populate the AEM side kick as described later in this section, when the AEM side kick is populated, the side rail is also populated with components. 

View the AEM page in Classic UI view and populate the AEM side kick

You can also view the page in AEM Classic UI view. To do so, select Classic View from the wheel icon in the AEM Page near the top, as shown in this illustration. 

ClassicView2

You will see the CQ sidekick and the text component under the Adobe category. You can drag and drop the text component onto the CQ page.

If the CQ sidekick is empty, you can populate it by clicking the Design button located at the bottom of the sidekick. Next click the Edit button that appears and select Adobe from the list of categories that appear as shown here.

AdobeCat

To view the sidekick with the Adobe category, click the down arrow icon that appears on the sidekick. Drag the TextRTE component on the AEM web page. Double click on the component and you see the dialog that you created in this development article. 

See also

Congratulations, you have just created an AEM 6 Touch UI component. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy