Article summary

Summary

Discusses how to develop an AEM Touch UI component that updates dialog fields based on other controls.  

A special thank you to community members Ranta Kumar Kotla for testing this Community Article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (beginner - intermediate)
Required Skills
JCR nodes, HTML
Tested On Adobe Experience Manager 6.2
Video N/A

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 a Touch UI component that updates dialog fields dynamically. 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/togglePage.html (assuming you deploy on author). Edit the component in Edit mode to view the Touch UI dialog. 

Download

Introduction

You can develop an Adobe Experience Manager component that uses a dialog whose fields are dynamically updated based on a selection of another field. Dynamically updating fields is important when you need to present an Experience Manager author different possibilibies based on the selection of another field. For example, assume that an author selects a value from a drop-down field. You can configure the JCR nodes of a Touch UI dialog that sets a specific field based on a selection of drop-down control. Consider the following Experience Manager Touch UI dialog.

dialog
An Experience Manager Touch UI Dialog

When an author selects Background Image, it dynamically sets a Pathfield field, as shown in this illustration.

dialog2
An Experience Manager Touch UI dialog that contains a PathField control

Likewise, if the author selects another value from the dropdown (for example, Background Color), a second drop-down field is dynamically set, as shown in this illustration.
 

dialog3
An Experience Manager Touch UI Dialog that displays a drop-down field

Note:

To develop with Touch UI dialogs, you use the AEM Granite API.

This development article discusses how to update Experience Manager Touch UI dialog fields based on a selection of another field. This is done by configuring properties of the dialog nodes, as discussed in this article.  

Create an application folder structure

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

tree
An AEM application folder structure

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. Go to CRXDE Lite at http://localhost:4502/crx/de/index.jsp.
  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 toggle
  5. Repeat steps 1-4 for each folder specified in the previous illustration. 
  6. Click the Save All button.

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. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.

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

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

  • Label: The name of the template to create. Enter toggleTemplate
  • 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 toggle/components/page/toggleTemplate.
  • 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.

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

5. Click Next for Allowed Parents.

6. Select OK on Allowed Children.

Create a Page Rendering Component

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. Go to Select CRXDE Lite at http://localhost:4502/crx/de/index.jsp.

2. Right-click /apps/firstOSGI/components/page, then select Create, Create Component.

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

  • Label: The name of the component to create. Enter toggleTemplate
  • 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 required.)

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

5. Select OK on Allowed Children.

6. Open the toggleTemplateJCR.jsp located at: /apps/toggle/components/page/toggleTemplate/toggleTemplate.jsp.

7. Enter the following JSP 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 the front end component that uses a dynamic Touch UI dialog

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

1. Right click on /apps/htl/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-style.
  • Title: The title that is assigned to the component. Enter text-style.
  • Description: The description that is assigned to the template. Enter text-style.
  • Super Resource Type: Enter foundation/components/parbase.
  • Group: The group in the side rail or side kick where the component appears. Enter General. (The text-style component is located under the General heading in the Touch UI side rail. Also appears in General in the classic view sidekick.)
  • Allowed parents: Enter */parsys.

3. Click Ok.

touchcomponent
An AEM component

For the purpose of this article, the component code is only placeholder code. The objective of this article is to illustrate how to create a dynamic Touch UI dialog, not how to build component logic. To learn how to read dialog values so your HTL component displays them, see Creating an AEM HTML Template Language component that uses the WCMUsePojo class.

Add the following HTML tags to /apps/TouchUI/components/text-style/text-style.html.

<p> Here is your component, we do not have anything to show</p>

<p> Please notice things in dialog configurations and toggle of fields </p>

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 select a value from the drop-down field. In this example, the AEM author has two options: 

  • If the author selects background style as color, an additional drop-down field appears.
  • If the author selects background style as image, a pathfield dynamically appears.

Experience Manager has an available library to implement the hide/show feature that is located at the following JCR path:

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

To successfully use this library, you need to perform a few task.

1. Build the JCR dialog as discussed in this section.

2. Configure the JCR nodes with the required properties to use the show/hide feature.

Add a dialog to the AEM Touch UI component

Using CRXDE lite, you build the JCR Nodes that represents the dialog.

dialog
JCR nodes that create the Touch UI dialog

Note:

When building a Touch UI dialog for an Experience Manager component, you define the type of field (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. For a listing of all Granite objects, see Granite Reference.

Note:

If you install the package that is shown at the start of this article, you can skip these steps. 

Perform this steps: 

1. Select /apps/toggle/components/text-style.

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.

  • helppath (String) - http://www.adobe.com/go/aem6_1_docs_component_en#List - Sightly
  • jcr:title (String) - Text Style Component
  • sling:resourceType (String) - cq/gui/components/authoring/dialog

5.  Click on the following node: /apps/toggle/components/text-style/cq:dialog.

6. Right click and select Create, Create Node.

7. Enter the following values:

  • Name: content
  • Type: nt:unstructured

8. Add the following property to the content node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

9. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content.

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

  • Name: layout
  • Type: nt:unstructured

11. Add the following properties to the layout node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/tabs
  • type (String) - nav

12. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content.

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

  • Name: items
  • Type: nt:unstructured

14. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items.

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

  • Name: settings
  • Type: nt:unstructured

16. Add the following properties to the settings node (this node represents the tab).

  • jcr:title (String) - Settings
  • sling:resourceType (String) - granite/ui/components/foundation/section

17. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings.

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

  • Name: layout
  • Type: nt:unstructured

19. Add the following property to the layout node.

  • margin (String) - false
  • sling:resourceType (String) - granite/ui/components/foundation/layouts/fixedcolumn

20. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings.

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

  • Name: items
  • Type: nt:unstructured

22. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items.

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

  • Name: column
  • Type: nt:unstructured

24. Add the following property to the columns node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

25. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column.

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

  • Name: items
  • Type: nt:unstructured

27. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items.

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

  • Name: background-style
  • Type: nt:unstructured

29. Add the following propeties to this node. 

  • fieldLabel (String) - Background Style
  • name (String) - ./bg-style
  • sling:resourceType (String) - granite/ui/components/foundation/form/select

30. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/background-style.

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

  • Name: items
  • Type: nt:unstructured

32. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/background-style/items.

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

  • Name: image
  • Type: nt:unstructured

34. Add the following properties to the image node. 

  • text (String) - Background Image
  • value (String) - image

35. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/background-style/items.

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

  • Name: color
  • Type: nt:unstructured

37. Add the following properties to the color node.

  • text (String) - Background Color
  • value (String) - color

38.  Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items.

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

  • Name: bg-image
  • Type: nt:unstructured

40. Add the following property to this node. 

  • sling:resourceType (String) - granite/ui/components/foundation/container

41. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image.

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

  • Name: items
  • Type: nt:unstructured

43. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items.

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

  • Name: heading
  • Type: nt:unstructured

45. Add the following properties to this node: 

  • level (Long) - 4
  • text (String) - Background Image

46.  Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items.

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

  • Name: well
  • Type: nt:unstructured

48. Add the following property to this node. 

  • sling:resourceType (String) - granite/ui/components/foundation/container

49. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items/well.

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

  • Name: layout
  • Type: nt:unstructured

51. Add the following property to this node. 

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/well

52. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items/well

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

  • Name: items
  • Type: nt:unstructured

54. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items/well/items.

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

  • Name: background-image
  • Type: nt:unstructured

56. Add the following property to this node. 

  • sling:resourceType (String) - granite/ui/components/foundation/form/pathbrowser

57. Click on /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items. 

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

  • Name: bg-color
  • Type: nt:unstructured

59. Add the following property to this node. 

  • sling:resourceType (String) - granite/ui/components/foundation/container

60. Click on /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-color.

61. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items.

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

  • Name: heading
  • Type: nt:unstructured

63. Add the following properties to this node. 

  • level (Long) - 4
  • sling:resourceType (String) - granite/ui/components/foundation/heading
  • text (String) - Background Color

64. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items

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

  • Name: well
  • Type: nt:unstructured

66. Add the following property to this node.

  • sling:resourceType (String) - granite/ui/components/foundation/container

67. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items/well.

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

  • Name: layout
  • Type: nt:unstructured

69. Add the following property to this node.

  • sling:resourceType (String) - granite/ui/components/foundation/layouts/well

70. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image/items/well

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

  • Name: items
  • Type: nt:unstructured

72. Click on the following node: /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-color/items/well/items.

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

  • Name: background-color
  • Type: nt:unstructured

74. Add the following property to this node.

  • sling:resourceType (String) - granite/ui/components/foundation/form/select

75. Click on /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-color/items/well/items/background-color.

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

  • Name: items
  • Type: nt:unstructured

77.  Click on /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-color/items/well/items/background-color/items

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

  • Name: white
  • Type: nt:unstructured

79. Add the following properties to this node.

  • text (String) - White
  • value (String) - white
White
white

Note:

Repeat steps 77 and 78 for the following values: pinapple, tangerine, peapod, neutral, cream, valuered, and grape. 

Configure the JCR nodes with the required properties to use the show/hide feature.

You need to add properties to the dialog nodes in order to successfully use the show/hide feature. It is a three step process:

  1. Define custom class
  2. Add custom class defined in select field to all fields
  3. Add target fields and values in all respective fields

To implement these three steps, add a property named class with a value cq-dialog-dropdown-showhide on the main select field located here:

/apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/background-style

Next, add a property named cq-dialog-dropdown-showhide-target (you can Assign any value you want to use). In this article, the value .text-image-hide-show is used, This value is used as a selector and mapped to other nodes. 

hide1
JCR node properties required to use the Hide/Show feature

Notice the image and color nodes under items. They both have a value property that is mapped to other nodes that play a factor in Show/Hide functionality. This value color is mapped to /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-color. 

hide2
The value property for the color node

Note:

Add the same value property to the image node. Assign the value image

Add properties to the fields which you want to toggle.  Add the following properties to the /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-image node:

  • showhidetargetvalue (String) - image
  • class (String) - hide text-image-hide-show

 

 

hide3
bg-image node properties

Similarly for the /apps/toggle/components/text-style/cq:dialog/content/items/settings/items/column/items/bg-color node, add the following properties:

  • showhidetargetvalue (String) - color
  • class (String) - hide text-image-hide-show 
hide4
bg-color node properties

Create an Experience Manager web page that uses the Touch UI component

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

site
Dragging the Touch UI component into a page

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 toggleTemplateWeb 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 test-style component 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.

See also

Congratulations, you have just created an AEM component that dynamically updates fields based on the selection of another field. 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