Article summary

Summary
Discusses the following points:
  • how to develop an AEM 6 Touch UI component. 
  • how to develop the AEM 6 component's dialog using sling:resourceType properties, which is required for use in the Touch UI view.
  • how to write application logic that validates user input into a dialog field.  

A special thank you to Lokesh BS for contributing an AEM package that is used in this article. It's great community members like Lokesh that helps 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).

Also, thank you to Ratna Kumar Kotla, a top AEM community member, for testing this article to ensure it works. 

In addition to reading this article, it is also recommended that you watch this GEMs 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 write an AEM Touch UI component that validates dialog field values. 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/TestTouch.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 validates the values that an author enters into a dialog during edit mode. For example, assume you want to validate the value an author enters into a text field to ensure that it matches an email address. You can develop a Touch UI component so it validates user input, as shown in the following illustration.

Assume that a Touch UI dialog has a text field (granite/ui/components/foundation/form/textfield) named email that requires a valid email address. 

dialogA
A Touch UI dialog

As shown in the previous illustration, the Touch UI dialog contains a text field. If the user does not enter a valid email address, the component informs the user that the input value is invalid, as shown in the following illustration. 

validate_Touch
An AEM Touch UI component validating user input

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

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 valTouch.
  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 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 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 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 /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 templateWeb.
  • 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/valTouch/components/page/templateTouch/templateTouch.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>

Create an AEM 6 Touch UI component

After you setup the AEM folder structure, create the AEM Touch UI component. Perform these tasks using CRXDE Lite:

1. Right click on /apps/valTouch/components and then select New, Component.

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

  • Label: The name of the component to create. Enter text
  • Title: The title that is assigned to the component. Enter Text.
  • Description: The description that is assigned to the template. Enter Text.
  • Super Resource Type: Enter wcm/foundation/components/text.
  • Group: The group in the side kick where the component appears. Enter Adobe. (The text component is located under the Adobe heading in the Tocuh UI side rail. Also appears in General in the classic view sidekick.)
  • Allowed parents: Enter */*parsys.

3. Click Ok.

Add a dialog to the AEM Touch UI component  

A dialog lets an author click on the component in the Touch UI (or Classic UI) view during design time and enter values that are used by the component. The component created in this development article lets the AEM author enter text values, which are then displayed in the AEM web page. (See the illustration shown at the beginning of this development article.)

A dialog that is built for the Touch UI is defined by using nodes of type un:structured. You define the type of control on the Touch UI dialog by setting the node's sling:resourceType property. For example, to define a text field on a Touch UI dialog, set the  sling:resourceType property to granite/ui/components/foundation/form/textfield.

The following table lists the sling:resourceType values that are used to create the component in this development article.

Sling:resourceType Description
granite/ui/components/foundation/container Defines a container for the dialog
granite/ui/components/foundation/layouts/tabs Defines a tab that is used in the dialog
granite/ui/components/foundation/section Defines a section within a tab. 
granite/ui/components/foundation/layouts/fixedcolumns Defines fixed columns. 
granite/ui/components/foundation/form/textfield Defines a text field that lets authors enter data.
granite/ui/components/foundation/form/textarea Defines a text area field that lets author more data than a text field. 

Note:

When building a dialog for the Touch UI view, you define the type of control (for example, a text field) by setting the sling:resourceType property. In contrast, when building a dialog for the classic view, you define the type of control by setting its xtype property. You set both properties in the following sections.

The following illustration shows the JCR nodes of the component created in this development article. 

DialogNodes
JCR nodes that create the Touch UI dialog

Build the dialog for the Touch UI view

Perform these tasks:

1. Select /apps/valTouch/components/text.

2. Right click and select Create, Create Node.

3. Enter the following values:

  • Name: cq:dialog
  • Type: nt:unstructured

4. Add the following properties to the cq:dialog node.

 

Name Type Value Description
helpPath
String en/cq/current/wcm/default_components.html#Text
Specifies help information for this dialog 
jcr:title
String
Text (this value must start with a capitial)
Specifies the title displayed in the dialog. (see the illustration at the start of this article)
sling:resourceSuperType
String cq/gui/components/authoring/dialog
Specifies the component from which this component inherits.

5. Click on the following node: /apps/valTouch/components/text/cq:dialog.

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

  • Name: content
  • Type: nt:unstructured

7. Add the following property to the content node.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/container Defines the type

8. Click on the following node: /apps/valTouch/components/text/cq:dialog/content.

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

  • Name: layout
  • Type: nt:unstructured

10. Add the following properties to the layout node.

Name Type Value Description
sling:resourceType String granite/ui/components/foundation/layouts/fixedcolumns
Defines the type
type String nav defines tab functionality
margin
Boolean false true to add vertical margin to the main component; false otherwise

11. Click on the following node: /apps/valTouch/components/text/cq:dialog/content.

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

  • Name: items
  • Type: nt:unstructured

13. Click on the following node: /apps/valTouch/components/text/cq:dialog/content/items.

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

  • Name: column
  • Type: nt:unstructured
15. Add the following properties to the column node.
Name Type Value Description
sling:resourceType String granite/ui/components/foundation/container
Defines the resourcetype

16. Click on the following node:/apps/valTouch/components/text/cq:dialog/content/items/column.

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

  • Name: items
  • Type: nt:unstructured

 

18. Click on the following node:/apps/valTouch/components/text/cq:dialog/content/items/column/items.

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

  • Name: items
  • Type: nt:unstructured

20. Click on the following node: /apps/valTouch/components/text/cq:dialog/content/items/column/items.

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

  • Name: componentstyles
  • Type: nt:unstructured

22. Add the following property to the componentstyles node. 

Name Type Value Description
name
String ./cq:cssClass
defines a CSS node
sling:resourceType String cq/gui/components/authoring/dialog/componentstyles
defines the type of sling resource

23. Click on the following node: /apps/valTouch/components/text/cq:dialog/content/items/column/items.

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

  • Name: email
  • Type: nt:unstructured

25. Add the following properties to this node.

 

Name Type Value Description
fieldLabel String Email
Defines the label associated with the input control
name String ./email
Defines the name of the control. You reference this value in the component's code.
sling:resourceType String granite/ui/components/foundation/form/textfield
Defines the control as a text field. 

Add JavaScript validation code to ClientLibs Folder

Add a cq:ClientLibraryFolder node under the following location: 

/apps/valTouch/components/text

To ensure that this ClientLibs folder is applicable to Touch UI dialogs, assign the value cq.authoring.dialog to the categories property. 

To add required files to the clientlibs folder, perform these tasks:

  1. Right-click /apps/valTouch/components/text then select New, Node.
  2. Make sure the node type is cq:ClientLibraryFolder and name the node clientlibs.
  3. Right click on clientlibs and select Properties. Add the category property specified in this section to the node. 
  4. Add a JS file to the clientlibs folder named validation.js (the content of this file is shown in the next section).
  5. Add a TXT file to the clientlibs node named js.txt (add validation.js to this file).

Add the following JavaScript code to the validation.js file. 

(function (document, $, ns) {
    "use strict";

    $(document).on("click", ".cq-dialog-submit", function (e) {
        e.stopPropagation();
        e.preventDefault();

        var $form = $(this).closest("form.foundation-form"),
            emailid = $form.find("[name='./email']").val(),
           	message, clazz = "coral-Button ",
         patterns = {
             emailadd: /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i
        };

        if(emailid != "" && !patterns.emailadd.test(emailid) && (emailid != null)) {
                ns.ui.helpers.prompt({
            	title: Granite.I18n.get("Invalid Input"),
            	message: "Please Enter a valid Email Address",
                actions: [{
                    id: "CANCEL",
                    text: "CANCEL",
                    className: "coral-Button"
                }],
            callback: function (actionId) {
                if (actionId === "CANCEL") {
                }
            }
        });

        }else{
                 $form.submit();
        }
    });
})(document, Granite.$, Granite.author);

In this example, notice that the variable emailid stores the value that the user enters into the email text field located on the Touch UI dialog. The following code ensures that a user entered a value that matches an email address. 

emailid = $form.find("[name='./email']").val(),
message, clazz = "coral-Button ",
patterns = {
emailadd: /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i
};

actions: [{
id: "CANCEL",
text: "CANCEL",
className: "coral-Button"
}],

The patterns variable stores the text patterns that matches an email addess. If the value entered into the email field does not match patterns, then an message is displayed to the user (as shown at the start of this article).

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  templateTouch (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.

TouchClient

In Edit mode, click the component configuration icon. 

 

Client2
The Configure icon that is part of the dialog menu

Then the dialog that you created in this section. Enter a value in the email field. If it is not a valid email address value, then a message appears that informs you that the value is invalid (as shown at the start of 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 templateTouch 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. If the value does not match an email value, a message appears.

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