BUILDING EXPERIENCE MANAGER COMPONENTS USING GRANITE/CORAL RESOURCE TYPES

Transcription

1 Adobe Systems BUILDING EXPERIENCE MANAGER COMPONENTS USING GRANITE/CORAL RESOURCE TYPES MARCH 1, 2018 Presented by: Scott MacDonald

2 Contents Introduction 4 What you will learn about 4 Key Takeaways 4 Prerequisites 5 Section 1 - Let s Get Started 6 Section Create an Experience Manager project using Maven 6 Section Import the Project into Eclipse 7 Section Import the Lab2018 project into Experience Manager 8 Section View the Default page 9 Section 1 Summary 10 Section 2 - Create your first component 11 Section Create the Experience Manager component 11 Section Build the Dialog using CRXDE lite 12 Section Add HTL code to the firstcomponent 14 View the output of the HTL component 15 Section 2 Summary 16 Section 3 Add additional resource types to your component 17 Section 3.1 Add resource types to the dialog 20 Add the pathbrowser field to the dialog 20 Add the datepicker field to the dialog 20 Add the checkbox field to the dialog 21 Add the Select field to the dialog 21 Section Modify the component HTML to read the new values 23 Section Test the modified component dialog 24 Section Understanding where dialog data is stored 25 Section 3 Summary 26 Section 4 Use WCMUSEPOJO with the component 27 Section Add Java classes to your Lab2018 project 27 Section Add Java logic to the HeroTextBean class 28 Section Add Java logic to the HeroTextComponent class 31 Section Modify the Project POM files 32 March 1, 2018Experience Manager LAB L740 Page 2

3 Section Build the OSGi bundle using Maven 33 Section Deploy the bundle to Experience Manager 33 Section Modify the Component HTML to interaction with the HeroTextComponent class 34 Section Refresh the Web Page 35 Section 4 Summary 35 Section 5 Use a DataSource Object to populate a Select field 36 Section Add the HtlDataSourceExample class to the Java project 37 Section Update the POM dependencies section 39 Section Modify the Dialog JCR Nodes 41 Section Add a HTL script to the component folder 42 Section Refresh the Web Page 42 Section 5 Summary 43 Section 6 - Use Sling Models with your component 44 Section Add a Sling Model Java class to your Lab2018 project 44 Section Add Java code to the HeroSlingModel Class 44 Section Modify the Component HTML to interact with the HeroSlingModel class 47 Section Refresh the Web Page 48 Section 6 Summary 48 Section 7 Use a Multifield in your component 49 Section Modify the HeroSlingModel Class 50 Section Modify the Component HTML 51 Section7.3 - Refresh the Web Page 52 Section Understanding where Granite/Coral Multifield dialog data is stored 54 Section 7 Summary 54 March 1, 2018Experience Manager LAB L740 Page 3

4 Introduction The BUILDING EXPERIENCE MANAGER COMPONENTS USING GRANITE/CORAL RESOURCE TYPES lab provides hands on experience building Touch UI components by using Granite/Coral resource types. These resource types are used in the component s dialog. That is, the UI that makes up the dialog fields and lets an author enter information used by the AEM component. NOTE: Granite/Coral resource types are not used in the rendered components that are displayed in a web page. That is, you do not use them in a clientlibs folder or use them in JS rendered in an AEM page. They are used in the component s dialog used in the Author instance. Many AEM Developers are familiar with Classic UI xtypes based widgets such as text fields, path fields, drop-down fields, and so on. However, when it comes to working with the Touch UI, xtypes are not used. Instead resource types are used to build Touch UI component dialogs. This lab helps you become familiar working with Granite/Coral resource types that can be applied in your day to day component development work. NOTE - If at any time in this Lab you have any questions, raise your hand and a TA will assist you. What you will learn about You will learn how to build Experience Manager 6.4 component dialogs by using Granite/Coral data types such as: granite/ui/components/coral/foundation/form/textfield granite/ui/components/coral/foundation/form/textarea granite/ui/components/coral/foundation/form/checkbox granite/ui/components/coral/foundation/form/select granite/ui/components/coral/foundation/form/radiogroup granite/ui/components/coral/foundation/form/multifield How to read the values that an author enters in a dialog using HTL, Java WCMUsePojo and Sling Models. Key Takeaways Learn to work with the Granite/Coral resource types on AEM 6.4 such as granite/ui/components/coral/foundation/form/textfield. Learn to populate Select field with static values. Learn to populate Select field with dynamic values. Learn how to read Granite/Coral resource types by using a HTL syntax. Learn how to read Granite/Coral resource types by using a WCMUsePojo class. Learn how to read Granite/Coral resource types by using Sling Models. Learn how to read Granite/Coral resource types located in a Multifield by using Sling models. March 1, 2018Experience Manager LAB L740 Page 4

5 Prerequisites All steps of this workbook have been pictured with Windows, but they work similarly on MAC. This workbook assumes that following software, or newer, has been installed: Java 8 Adobe Experience Manager 6.4 Maven 3+ ( Eclipse IDE for Java EE Developers ( Brackets ( March 1, 2018Experience Manager LAB L740 Page 5

6 Section 1 - Let s Get Started YOU HAVE 10 MINS FOR THIS SECTION In the first section of this Lab, you are going to create an Experience Manager project named Lab2018. This project is used for the remainder of this Lab. You use this project to create components that use various Granite/Coral resource types. NOTE: There are different ways to build Experience Manager projects. You can use Tools like Eclipse, LazyBones, Maven, or you can build them from scratch using CRXDE lite. The focus of this LAB is to understand how to use Granite/Coral resource types while building Experience Manager components, not using Tooling to build projects. In this Lab, you create an Adobe Maven Archetype 11 project. This will give you a starting point that contains components, templates, and a Java project that you are going to use in later sections. You are going to use CRXDE lite to build dialogs and modify files such as HTML files. Likewise, you are using to use Eclipse and Maven to build OSGi bundles for the sections that require them. Section Create an Experience Manager project using Maven To create your Experience Manager lab project: 1. Open the command window. 2. Change the working directory to C:\Adobe. 3. Test Maven by entering the following command: mvn -version. If successful, you will see a message such as: Once you confirm that Maven is working properly, you can continue with these steps. 4. Run the following Maven command: mvn org.apache.maven.plugins:maven-archetype-plugin:2.4:generate - DarchetypeGroupId=com.adobe.granite.archetypes -DarchetypeArtifactId=aem-projectarchetype -DarchetypeVersion=11 - DarchetypeCatalog= 5. When prompted, specify the following information: groupid Lab2018 artifactid - Lab2018 version - <Leave blank> package - com.aem.summit appsfoldername - Lab2018 artifactname - Lab2018 componentgroupname - Lab2018 contentfoldername - Lab2018 cssid - Lab2018 March 1, 2018Experience Manager LAB L740 Page 6

7 packagegroup - Lab2018 sitename - Lab When prompted, specify Y. 7. Once done, you will see a message like: 8. Change the working directory to Lab2018 and then enter the following command. mvn eclipse: eclipse Section Import the Project into Eclipse To make it easier to work with the Maven generated project, import it into the Eclipse development environment, as shown in the following illustration. To import the project: 1. Start Eclipse. 2. Click File, Import. 3. In the Import dialog, click General, Existing Projects into Workspace. 4. Click Next. 5. Select Root Directory. 6. Browse to the project that you created by using Maven. March 1, 2018Experience Manager LAB L740 Page 7

8 7. Click Finish. After you import the project into Eclipse, notice each module is a separate Eclipse project: core - where Java files that are used in OSGi services and sling servlets are located (this is where you work) launcher - where additional Java files are located tests - Java files for tests like JUNIT tests apps - content under /apps content - content under /content By default, the Archetype 11 project creates many Java files that you can use as a starting point in your project (these Java files are located under core). The following illustration shows the Java packages. Take some time and look through these files. NOTE These default files are explained in this article - Creating an Adobe Experience Manager 6.3 Project using Adobe Maven Archetype 11 at Later in this Lab, you are going to create Java classes as part of developing HTL components. These Java classes are used to read field values that an author enters in a component s dialog. Section Import the Lab2018 project into Experience Manager Import the Lab2018 project into Experience Manager by using the following Maven command: mvn -PautoInstallPackage install After you successfully import the project into Experience Manager, you can view the project files in CRXDE lite under /apps/lab2018. March 1, 2018Experience Manager LAB L740 Page 8

9 In the previous illustration, the red arrow is referencing the location of the default components under /apps/lab2018/components/content. You can also view Lab2018 files at the following locations: /content/dam/lab2018 (where digital assets are stored for this project) /content/lab2018 (where the web pages are located) /etc/designs/lab2018 (where the CSS and JS files are located) Section View the Default page You can view the default page for this project by performing these tasks: 1. Click the Adobe Experience Manager icon in the upper left corner. 2. Click the Navigation Icon. 3. Click Sites, Lab2018, English. 4. Click the Edit icon in the toolbar. This page is the one you are going to use for this reminder of this lab. Once you see the page, delete all the default components on this page. To delete a component, hover your mouse over the component and then click the Delete icon that appears. Once done, the page resembles the following illustration. March 1, 2018Experience Manager LAB L740 Page 9

10 Section 1 Summary In this section, you learned how to create a Maven Archetype 11 project. You also viewed the default files in Eclipse and how to view the default page. As you can see, your project has a parsys that states Drag components here. This is where you are going to drag your components that you are going to build in the following Lab sections. March 1, 2018Experience Manager LAB L740 Page 10

11 Section 2 - Create your first component YOU HAVE 15 MINUTES TO COMPLETE THIS SECTION In this section, you are going to build a basic AEM component that renders values that an author enters in a dialog. The component has a dialog that has these sling resource types: granite/ui/components/coral/foundation/container - defines a container for the dialog granite/ui/components/coral/foundation/fixedcolumns - defines fixed columns granite/ui/components/coral/foundation/form/textfield - defines a text field that lets authors enter data granite/ui/components/coral/foundation/form/textarea - defines a text area field that lets author more data than a text field This component uses HTL syntax to read the values that an author specifies in the dialog. The following illustration shows the dialog that you develop in this section. In this dialog, the Heading Text field is a textfield and Description is a textarea. NOTE If you fall behind, you can install a package named L740_Macdonald Section_2.zip from the lab directory. You can install this package by using Package Manager. Section Create the Experience Manager component To create the Experience Manager component, perform these tasks using CRXDE Lite: 1. Right click on /apps/lab2018/components/content 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 firstcomponent. Title: The title that is assigned to the component. Enter firstcomponent. Description: The description that is assigned to the component. Enter any value you want. Super Resource Type: Enter foundation/components/parbase. Group: The group in the side rail where the component appears. Enter Lab2018. March 1, 2018Experience Manager LAB L740 Page 11

12 3. Click Ok. 4. Change the extension from.jsp to.html. Section Build the Dialog using CRXDE lite An Experience Manager component dialog is a structure of JCR nodes. The dialog nodes are typically placed under a component. In this Lab, you are going to build the dialog nodes at this JCR location: /apps/lab2018/components/content/firstcomponent To build the dialog, perform these tasks: 1. Select /apps/lab2018/components/content/firstcomponent. 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) - en/cq/current/wcm/default_components.html#carousel jcr:title (String) - Hero Text sling:resourcetype (String) - cq/gui/components/authoring/dialog 5. Click on the following node: /apps/lab2018/components/content/firstcomponent/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. March 1, 2018Experience Manager LAB L740 Page 12

13 sling:resourcetype (String) - granite/ui/components/coral/foundation/container 8. Click on the following node: /apps/myhtl63/components/content/helloworld/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. sling:resourcetype (String) - granite/ui/components/coral/foundation/tabs type (String) -nav 11. Click on the following node: /apps/lab2018/components/content/firstcomponent/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/lab2018/components/content/firstcomponent/cq:dialog/content/items. 14. Right click and select Create, Create Node. Enter the following values: Name: herotext Type: nt:unstructured 15. Add the following properties to the herotext node (this node represents the tab). jcr:title (String) - Hero Text Properties sling:resourcetype (String) - granite/ui/components/foundation/section 16. Click on the following node: /apps/lab2018/components/content/firstcomponent/content/items/herotext. 17. Right click and select Create, Create Node. Enter the following values: Name: layout Type: nt:unstructured 18. Add the following property to the layout node. sling:resourcetype (String) - granite/ui/components/coral/foundation/fixedcolumns 19. Click on the following node: /apps/lab2018/components/content/firstcomponent /cq:dialog/content/items/herotext. 20. Right click and select Create, Create Node. Enter the following values: Name: items Type: nt:unstructured 21. Click on the following node: /apps/lab2018/components/content/firstcomponent /cq:dialog/content/items/herotext/items. 22. Right click and select Create, Create Node. Enter the following values: Name: column Type: nt:unstructured 23. Click on the following node: /apps/lab2018/components/content/firstcomponent /cq:dialog/content/items/herotext/items/column. March 1, 2018Experience Manager LAB L740 Page 13

14 24. Add the following property to the column node. sling:resourcetype (String) - granite/ui/components/coral/foundation/container 25. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/columns. 26. Right click and select Create, Create Node. Enter the following values: Name: items Type: nt:unstructured 27. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items. 28. Right click and select Create, Create Node. Enter the following values: Name: headingtext Type: nt:unstructured 29. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/he adingtext. 30. Add the following properties to the headingtext node (this node represents the Heading Text input control on the dialog. See the illustration at the start of this article.) fieldlabel (String) - Heading Text name (String) -./heading sling:resourcetype (String) - granite/ui/components/coral/foundation/form/textfield 31. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items. 32. Right click and select Create, Create Node. Enter the following values: Name: description Type: nt:unstructured 33. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/ items/column/items/description. 34. Add the following property to the description node (this node represents the Description input field on the dialog. See the illustration at the start of this article.) fieldlabel (String) - Description name (String) -./description sling:resourcetype (String) - granite/ui/components/coral/foundation/form/textarea Notice the names of the headingtext and description nodes: heading and description. These values are used in the HTL logic to display the values. Section Add HTL code to the firstcomponent After you build the component and the component dialog, where you specify the Granite/Coral resource types, you are ready to add code to the component at this JCR location: March 1, 2018Experience Manager LAB L740 Page 14

15 /apps/lab2018/components/content/firstcomponent/firstcomponent.html Add the following code to this component. <div> <p>this is your HTML Template Language component:</p> </div> <h1>${properties.heading}</h1> <p>${properties.description}</p> In this example, notice how the dialog values are rendered in the HTL component. ${properties.heading} writes out the value that an author enters into the textfield. ${properties.description} writes out the value that an author enters into the textarea field. View the output of the HTL component You can view the output of the component by opening the Lab2018, English as discussed in Section 1. Once you drag the component onto the page, open the dialog and enter values. Click the checkmark icon and you will see the values are rendered on the web page, as shown here. Perform these tasks: March 1, 2018Experience Manager LAB L740 Page 15

16 1. Change the mode to Edit mode. 2. From the side rail on the left, click Components. 3. You should see the components with Group Lab Drag the firstcomponent from the side rail onto the page. 5. Edit the component and fill in the two fields. 6. Click the Check mark in the dialog. 7. Now the values show up in the web page. Section 2 Summary In this section, you learned how to build a basic component, including how to build the dialog. You also learned how to render the dialog values into a component. March 1, 2018Experience Manager LAB L740 Page 16

17 Section 3 Add additional resource types to your component YOU HAVE 10 MINS FOR THIS SECTION In this section, you are going to add these additional resource types to the component dialog: granite/ui/components/coral/foundation/form/pathbrowser granite/ui/components/coral/foundation/form/datepicker granite/ui/components/coral/foundation/form/checkbox granite/ui/components/coral/foundation/form/select These represent common resource types that are typically located in AEM component dialog. For a complete listing of Granite types, see Granite Types at The following illustration shows the JCR nodes once you are done this section. NOTE If you fall behind, you can install a package named L740_Macdonald Section_3.zip from the lab directory. You can install this package by using Package Manager. pathbrower A pathbrower lets an author select a node in the AEM JCR. When setting a pathbrower, you can specify the rootpath that represents the default JCR location that is displayed when the pathbrowser is opened. The following illustration represents a pathbrowser. March 1, 2018Experience Manager LAB L740 Page 17

18 March 1, 2018Experience Manager LAB L740 Page 18

19 Datepicker The Date Picker is an input component where an author can select a date. The following illustration represents a date picker. Checkbox A checkbox component lets an author check an item in the component dialog. The following illustration shows a checkbox. March 1, 2018Experience Manager LAB L740 Page 19

20 Select A Select resource type is a drop-down field that lets an author select a value from a list. You can set the values using child nodes. The following illustration shows the Select resource type. Section 3.1 Add resource types to the dialog In this section, you are going to add additional resource types to the component s dialog. Add the pathbrowser field to the dialog You can add a pathbrowser resource type to the component dialog by adding additional nodes to the dialog created in the previous section. Perform these tasks: 1 Select the node at: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items. 2. Right click and select Create, Create Node. Enter the following values: Name: path Type: nt:unstructured 3. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/pa th. 4. Add the following properties to the path node: fielddescription (String) - Select a Path fieldlabel (String) - Path name (String) -./path (you reference this value to read this value of this component field) rootpath (String) - /content sling:resourcetype (String) - granite/ui/components/coral/foundation/form/pathbrowser Add the datepicker field to the dialog You can add a datepicker resource type to the component dialog by adding additional nodes to the dialog created in the previous section. Perform these tasks: 1 Select the node at: March 1, 2018Experience Manager LAB L740 Page 20

21 /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items. 2. Right click and select Create, Create Node. Enter the following values: Name: startdate Type: nt:unstructured 3. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ startdate. 4. Add the following properties to the startdate node: displayedformat (String) - YYYY-MM-DD HH:mm fieldlabel (String) - Start Date name (String) -./startdate (you reference this value to read this value of this component field) class (String) - field sling:resourcetype (String) - granite/ui/components/coral/foundation/form/datepicker type (String) datetime Add the checkbox field to the dialog You can add a checkbox resource type to the component dialog by adding additional nodes to the dialog created in the previous section. Perform these tasks: 1 Select the node at: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items. 2. Right click and select Create, Create Node. Enter the following values: Name: show Type: nt:unstructured 3. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ show. 4. Add the following properties to the show node: text (String) - Show? value (String) yes (the submitted value when the checkbox is checked) name (String) -./show (you reference this value to read this value of this component field) sling:resourcetype (String) - granite/ui/components/coral/foundation/form/checkbox Add the Select field to the dialog You can add a Select resource type to the component dialog by adding additional nodes to the dialog created in the previous section. March 1, 2018Experience Manager LAB L740 Page 21

22 Perform these tasks: 1 Select the node at: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items. 2. Right click and select Create, Create Node. Enter the following values: Name: type Type: nt:unstructured 3. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ type. 4. Add the following properties to the type node: fielddescription (String) - Select Size fieldlabel (String) - Size name (String) -./size (you reference this value to read this value of this component field) sling:resourcetype (String) - granite/ui/components/coral/foundation/form/select 5. Select the node at: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ty pe. 6. Right click and select Create, Create Node. Enter the following values: Name: items Type: nt:unstructured 7. Select the node at: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ty pe/items. 8. Right click and select Create, Create Node. Enter the following values: Name: small March 1, 2018Experience Manager LAB L740 Page 22

23 Type: nt:unstructured 9. Add the following properties to the small node: text (String) - small value (String) small 10. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ type. 11. Right click and select Create, Create Node. Enter the following values: Name: medium Type: nt:unstructured 12 Add the following properties to the medium node: text (String) - medium value (String) medium 13. Click on the following node: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items/ type. 14. Right click and select Create, Create Node. Enter the following values: Name: large Type: nt:unstructured 15 Add the following properties to the large node: text (String) - large value (String) - large Section Modify the component HTML to read the new values Modify the firstcomponent.html file to display the resource types added to the component dialog. For each new resource type added to the component dialog, add application logic to read the fields. Replace the code in this HTML file with the following code. CODE LISTING 3.1 <div> <p>this is your AEM HTML Template Language component:</p> <h1>${properties.heading}</h1> <p>${properties.description}</p> <p>the following values are the resource types added to the dialog</p> <p><b>selected Path value:</b> ${properties.path}</p> March 1, 2018Experience Manager LAB L740 Page 23

24 <p> <b>date:</b> timezone='utc'} ${'yyyy-mm-dd format=properties.startdate, </p> <p> <b>size:</b> ${properties.size} </p> <p> <b>checkbox:</b> ${properties.show} </p> </div> As the startdate is a node based on a Date data type, notice the way the date value is displayed in HTL syntax. ${'yyyy-mm-dd format= properties.startdate, timezone='utc'} Section Test the modified component dialog Edit the dialog and hover over the component with your mouse and click the Configure icon. Enter values into the dialog, as shown in this illustration. March 1, 2018Experience Manager LAB L740 Page 24

25 When you click the Check Mark icon, you will see the values rendered in the web page, as shown in this illustration. Section Understanding where dialog data is stored When you re-open the component dialog, you will see that data is displayed in the dialog. Experience Manager stores dialog data under the corresponding page under /content. In this section, notice the following path: March 1, 2018Experience Manager LAB L740 Page 25

26 /content/lab2018/en/jcr:content/par/firstcomponent As you can see in this illustration, the dialog values are stored as properties on the firstcomponent node under par. If you ever have an issue of a value not showing up in a dialog, check the properties of the corresponding node under /par. Section 3 Summary In this section, you learned how to work with a path browser, a checkbox, a date control and a select resource type. You also learned how to read a date value in HTL so the value is rendered in the component. March 1, 2018Experience Manager LAB L740 Page 26

27 Section 4 Use WCMUSEPOJO with the component YOU HAVE 15 MINS FOR THIS SECTION Up to this point in this Lab, you created a component, built a component dialog that contains various sling resource types and created HTL application logic that rendered the values in the web page. In this section, you are going to use Eclipse to develop Java classes to work with the HTL component and learn how to read the dialog values by using Java. You may be wondering why use Java if you can read the values in HTL itself. The main reason is sometimes you need to perform application logic using the values. For example, you may need to invoke a 3 rd party service using the dialog values, parse the values and so on. That is, you may need to perform additional application logic on the data that cannot be performed by using HTL. By including Java into your component, you are opening a lot of possibilities in terms of functionality. To create a Java backend for a HTL component, you can use either WCMUsePojo or Sling Models (this LAB covers both ways.) To use WCMUsePojo, you create a class that extends WCMUsePojo. The next step is to add these Java files to the com.aem.summit.core package: HeroTextComponent HeroTextBean The HeroTextBean is a Java bean that has class members to match the fields specified in the component's dialog. In this example, it has these string class members: headingtext stores the value entered in the heading field description stores the value entered in the description field path stores the value entered in the path field startdate stores the value entered in the date field show stores the value entered in the check field type stores the value selected from the select field The HeroTextComponent class is the Java side of the HTL component and extends WCMUsePojo, which is an abstract class that implements the Use interface. NOTE If you fall behind, you can install a package named L740_Macdonald Section_4.zip from the lab directory. You can install this package by using Package Manager. Section Add Java classes to your Lab2018 project Add two Java classes to Eclipse by performing these tasks. 1. Open Eclipse to Lab In the Package Explorer, click on the com.aem.summit.core package. 3. Click and Select New, Class. 4. Name the Class HeroTextBean. 5. Repeat steps 2-4 for the HeroTextComponent class. Once done, your project resembles the following illustration. March 1, 2018Experience Manager LAB L740 Page 27

28 Section Add Java logic to the HeroTextBean class The HeroTextBean defines class members and contains getter and setter methods. Add the following Java code to the HeroTextBean class in Eclipse. CODE LISTING 4.1 package com.aem.summit.core; /** * The Class HeroTextBean. */ public class HeroTextBean { /** The heading text. */ private String headingtext; /** The description. */ private String description; /** Stores Path information */ private String path ; March 1, 2018Experience Manager LAB L740 Page 28

29 /** Stores Date information */ private String startdate ; /** Stores Checkbox information */ private String show ; /** Stores Select information */ private String type; public String gettype() { return this.type; } /** path the path to set */ public void settype(string type) { this.type = type; } public String getshow() { return this.show; } /** path the path to set */ public void setshow(string show) { this.show = show; } public String getdate() { return this.startdate; } /** path the path to set */ public void setdate(string date) { March 1, 2018Experience Manager LAB L740 Page 29

30 this.startdate = date; } public String getpath() { return this.path; } /** path the path to set */ public void setpath(string path) { this.path = path; } /** the headingtext */ public String getheadingtext() { return headingtext; } /** headingtext the headingtext to set */ public void setheadingtext(string headingtext) { this.headingtext = headingtext; } /** the description */ public String getdescription() { return description; } /** description the description to set */ public void setdescription(string description) { this.description = description; March 1, 2018Experience Manager LAB L740 Page 30

31 } } Section Add Java logic to the HeroTextComponent class The HeroTextComponent extends WCMUsePojo class. Add the following Java code to the HeroTextComponent class in Eclipse. CODE LISTING 4.2 package com.aem.summit.core; import com.adobe.cq.sightly.wcmusepojo; import com.aem.summit.core.herotextbean; public class HeroTextComponent extends WCMUsePojo { /** The hero text bean. */ private HeroTextBean herotextbean = public void activate() throws Exception { herotextbean = new HeroTextBean(); //Get the values that the author entered into the AEM dialog String heading = getproperties().get("heading", ""); String description = getproperties().get("description",""); String path = getproperties().get("path",""); String date = getproperties().get("startdate",""); String show = getproperties().get("show",""); String type = getproperties().get("size",""); //Set the Bean with all the dialog values herotextbean.setheadingtext(heading); herotextbean.setdescription(description); herotextbean.setpath(path); March 1, 2018Experience Manager LAB L740 Page 31

32 herotextbean.setdate(date); herotextbean.setshow(show); herotextbean.settype(type); } public HeroTextBean getherotextbean() { } return this.herotextbean; } Notice how the dialog values are read in Java: String heading = getproperties().get("heading", ""); The getproperties method is used to read the dialog fields. Notice that getproperties is invoked for each dialog field read. Section Modify the Project POM files Add the following POM dependency to the POM file located at C:\AdobeCQ\Lab2018. Make sure that you place these the new dependencies under the <dependencies> element here: <!-- ====================================================================== --> > > <!-- D E P E N D E N C I E S -- <!-- ====================================================================== -- <dependencymanagement> <dependencies> Add these two dependency elements. CODE LISTING 4.3 <!-- OSGi Dependencies --> <dependency> <groupid>com.adobe.aem</groupid> <artifactid>uber-jar</artifactid> <version>6.3.0</version> <classifier>obfuscated-apis</classifier> <scope>provided</scope> </dependency> March 1, 2018Experience Manager LAB L740 Page 32

33 <dependency> <groupid>org.apache.geronimo.specs</groupid> <artifactid>geronimo-atinject_1.0_spec</artifactid> <version>1.0</version> <scope>provided</scope> </dependency> Next add the following dependencies to the POM file displayed in the Eclipse IDE (under Lab2018\core). Once again, make sure that you add these below the <dependencies> element. CODE LISTING 4.4 <dependency> <groupid>com.adobe.aem</groupid> <artifactid>uber-jar</artifactid> <classifier>obfuscated-apis</classifier> </dependency> <dependency> <groupid>org.apache.geronimo.specs</groupid> <artifactid>geronimo-atinject_1.0_spec</artifactid> </dependency> Section Build the OSGi bundle using Maven Build the OSGi bundle by using Maven. You are going to use a Maven command that only builds the bundle and does not deploy to the project Experience Manager. The reason is you do not want to overwrite your project under /apps/lab2018. To build the OSGi bundle by using Maven, perform these steps: 1, Open the command prompt and go to the C:\AdobeCQ\Lab Run the following maven command: mvn clean install. 3. The OSGi component can be found in the following folder: C:\AdobeCQ\ Lab2018\core\target. The file name of the OSGi component is Lab2018.core-1.0-SNAPSHOT.jar. NOTE - DO NOT RUN mvn PautoInstallPackage install as this will overwrite your changes in CRXDE lite. Section Deploy the bundle to Experience Manager Manually deploy the OSGi bundle to Experience Manager by performing these tasks: 1. Login to the Apache Felix Web Console at (default admin user = admin with password= admin). 2. Click the Bundles tab, sort the bundle list by Id, and note the Id of the last bundle. March 1, 2018Experience Manager LAB L740 Page 33

34 3. Click the Install/Update button. 4. Browse to the bundle JAR file you just built using Maven. 5. Click Install. 6. Click the Refresh Packages button. 7. Check the bundle with the highest Id. 8. Click Active. 9. Your new bundle should now be listed with the status Active. Section Modify the Component HTML to interaction with the HeroTextComponent class You need to modify the firstcomponent.html to retrieve values from the HeroTextComponent class. Instead of reading property values set by the dialog, you are going to read the values from the HeroTextComponent class. Replace the code in the firstcomponent.html file with this code. CODE LISTING 4.5 <div> <p>this is your AEM HTML Template Language component using WCMUsePojo</p> <div data-sly-use.herotextobject="com.aem.summit.core.herotextcomponent" data-slytest="${herotextobject}"> </div> <p>the following values are the resource types added to the dialog</p> <h1>${herotextobject.herotextbean.headingtext}</h1> <p><b>description:</b> ${herotextobject.herotextbean.description}</p> <p><b>selected Path value:</b> ${herotextobject.herotextbean.path}</p> <p><b>date:</b> ${herotextobject.herotextbean.date}</p> <p><b>size:</b> ${herotextobject.herotextbean.type}</p> <p><b>checkbox:</b> ${herotextobject.herotextbean.show}</p> In this example, notice data-sly-use.herotextobject references the Java component: com.aem.summit.core.herotextcomponent. The code: data-sly-test="${herotextobject}" checks whether the herotextobject is null. Next notice these lines of code: <h1>${herotextobject.herotextbean.headingtext}</h1> <p>${herotextobject.herotextbean.description}</p> This is how you interact with the Java server-side part of the component. In this example, you are writing out the value of the herotextbean object's headingtext class member in an HTML h1 tag. You defined the headingtext March 1, 2018Experience Manager LAB L740 Page 34

35 data member when you created the Java code. This is the value that the user entered in the component's headingtext dialog field. Next the value of the herotextbean object's description class member in an HTML p tag. This is the value that the user entered in the component's description field. NOTE: The rest of the data members are written out like the description data member. Section Refresh the Web Page When you refresh the web page, you will see the values written out from the Java WCMUsePojo class. Section 4 Summary This section you learned how to create a Java class that extends WCMUsePojo and then read those values by using Java logic and then write them out to the component. March 1, 2018Experience Manager LAB L740 Page 35

36 Section 5 Use a DataSource Object to populate a Select field YOU HAVE 10 MINUTES TO COMPLETE THIS SECTION In section 3, you created a Select field that has three nodes that represents the values that are displayed in the dialog. In this section, you are going to learn how to use a com.adobe.granite.ui.components.ds.datasource object to populate the Select field with a list of countries by using Java code. By using Java code, you can dynamically populate the Select field. For example, you can invoke a 3 rd party Restful service and populate the Select field with those values. The following illustration shows the Select field containing a list of countries.. You can use a WCMUsePojo class to create the DataSource object and bind that to the Select field. This replaces the use of the child nodes under the Select node. NOTE If you fall behind, you can install a package named L740_Macdonald Section_5.zip from the lab directory. You can install this package by using Package Manager. March 1, 2018Experience Manager LAB L740 Page 36

37 Section Add the HtlDataSourceExample class to the Java project The HtlDataSourceExample class extends WCMUsePojo and creates a DataSource object that is used to populate the Select field located in the component's dialog. In this example, notice a Map object named countries is created and populated with country names. These values are displayed in the Select field. In your Java project, create a class named HtlDataSourceExample in the com.aem.summit.core package (refer to the previous section to instructions on how to create a class in Eclipse). Add the following Java code to this class. CODE LISTING 5.1 package com.aem.summit.core; import java.util.hashmap; import java.util.map; import java.util.linkedhashmap; import java.util.list; import org.apache.sling.api.resource.resourcemetadata; import org.apache.sling.api.resource.resourceresolver; import org.apache.sling.api.resource.valuemap; import org.apache.sling.api.wrappers.valuemapdecorator; import org.apache.commons.collections.transformer; import org.apache.commons.collections.iterators.transformiterator; import org.apache.commons.collections.iterators.*; import com.adobe.cq.sightly.wcmusepojo; import com.adobe.granite.ui.components.ds.datasource; import com.adobe.granite.ui.components.ds.simpledatasource; import com.adobe.granite.ui.components.ds.valuemapresource; public class HtlDataSourceExample extends WCMUsePojo public void activate() throws Exception { final ResourceResolver resolver = getresource().getresourceresolver(); March 1, 2018Experience Manager LAB L740 Page 37

38 //Creating the Map instance to insert the countries final Map<String, String> countries = new LinkedHashMap<String, String>(); countries.put("in", "India"); countries.put("us", "United States"); countries.put("aus", "Australia"); countries.put("pak", "Pakistan"); countries.put("sri", //Creating the Datasource Object for populating the drop-down control. DataSource ds = new SimpleDataSource(new TransformIterator(countries.keySet().iterator(), new Transformer() //Transforms the input object into output object public Object transform(object o) { String country = (String) o; //Allocating memory to Map ValueMap vm = new ValueMapDecorator(new HashMap<String, Object>()); //Populate the Map vm.put("value", country); vm.put("text", countries.get(country)); return new ValueMapResource(resolver, new ResourceMetadata(), "nt:unstructured", vm); } })); this.getrequest().setattribute(datasource.class.getname(), ds); } } March 1, 2018Experience Manager LAB L740 Page 38

39 Section Update the POM dependencies section Update the dependencies section under core (Lab2018/core). Replace that dependencies section with the following dependencies. CODE LISTING 5.2 <dependencies> <!-- OSGi Dependencies --> <dependency> <groupid>com.adobe.aem</groupid> <artifactid>uber-jar</artifactid> <classifier>obfuscated-apis</classifier> </dependency> <dependency> <groupid>commons-collections</groupid> <artifactid>commons-collections</artifactid> <version>3.2.1</version> </dependency> <dependency> <groupid>org.apache.geronimo.specs</groupid> <artifactid>geronimo-atinject_1.0_spec</artifactid> </dependency> <dependency> <groupid>org.osgi</groupid> <artifactid>osgi.core</artifactid> </dependency> <dependency> <groupid>org.osgi</groupid> <artifactid>osgi.cmpn</artifactid> </dependency> <dependency> <groupid>org.osgi</groupid> <artifactid>osgi.annotation</artifactid> </dependency> March 1, 2018Experience Manager LAB L740 Page 39

40 <!-- Other Dependencies --> <dependency> <groupid>org.slf4j</groupid> <artifactid>slf4j-api</artifactid> </dependency> <dependency> <groupid>javax.jcr</groupid> <artifactid>jcr</artifactid> </dependency> <dependency> <groupid>javax.servlet</groupid> <artifactid>servlet-api</artifactid> </dependency> <dependency> <groupid>com.adobe.aem</groupid> <artifactid>uber-jar</artifactid> <classifier>apis</classifier> </dependency> <dependency> <groupid>org.apache.sling</groupid> <artifactid>org.apache.sling.models.api</artifactid> </dependency> <dependency> <groupid>junit</groupid> <artifactid>junit</artifactid> </dependency> <dependency> <groupid>org.mockito</groupid> <artifactid>mockito-core</artifactid> </dependency> <dependency> <groupid>junit-addons</groupid> <artifactid>junit-addons</artifactid> </dependency> March 1, 2018Experience Manager LAB L740 Page 40

41 </dependencies> </project> Once you update the dependencies, then rebuild the OSGi bundle and re-deploy it. NOTE: Refer to the instructions in Section 4 for information on how to build and deploy the OSGi bundle. Do NOT USE mvn PautoInstallPackage. Use mvn clean install. Section Modify the Dialog JCR Nodes You need to modify the nodes in the components JCR dialog. Create a node that binds to the DataSource object that you created so the Select field is populated with the DataSource instead of child nodes (created in Section 3.) The following illustration shows the JCR dialog node that you create in this section. Perform these tasks in CRXDE Lite. 1. Change the fieldlabel property of /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items /type to Country. 2. Delete the items node located here: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items /type/items. 3. Click on the /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/herotext/items/column/items /type node. 3. Right click and select Create, Create Node. Enter the following values: March 1, 2018Experience Manager LAB L740 Page 41

42 Name: datasource Type: nt:unstructured 4. Add the following property to the datasource node. sling:resourcetype (String) - /apps/lab2018/components/datasource/mylist/mylist.html (this value points to the JCR node where the HTL script is located. The HTL gets the DataSource object defined in the HtlDataSourceExample Java class. ) Section Add a HTL script to the component folder Next create the HTL script that retrieves the DataSource object that is defined in the HtlDataSourceExample class. This object is used to populate the drop-down field located in the component dialog. To create the DataSource script, perform these steps using CRXDE lite: 1. Click /apps/lab2018/components. 2. Right click, and select Create, Create Folder. 3. Name the folder datasource. 4. Under the datasource folder, create another folder named mylist. 5. Under the mylist folder, create a file named mylist.html. 6. Add the HTL code displayed in this section to this HTML file. <sly data-sly-use.data="com.aem.summit.core.htldatasourceexample"> </sly> Section Refresh the Web Page Before refreshing the web page, modify one line of code in the firstcomponent.html. Replace this line of code: <p><b>size:</b> ${herotextobject.herotextbean.type}</p> With this line of code: <p><b>country:</b> ${herotextobject.herotextbean.type}</p> When you refresh the web page, and open the dialog, you will see the new values in the Select field. Pick a country and click the check mark. Now you will see the selected country in the web page. March 1, 2018Experience Manager LAB L740 Page 42

43 Section 5 Summary In this section, you learned how to create a DataSource object and how to dynamically populate a Select field. March 1, 2018Experience Manager LAB L740 Page 43

44 Section 6 - Use Sling Models with your component YOU HAVE 10 MINUTES TO COMPLETE THIS SECTION In the previous sections, you learned how to create an HTL component that uses various sling resource types in its dialog. You also learned how to read the dialog values using HTL code and Java code that extends the WCMUsePojo class. In this section, you are going to learn to use Sling Models instead of WCMUsePojo. Like WCMUsePojo, a Sling Model uses a Java class where you can read the dialog values. Instead of reading the dialog values by calling the getproperties method, you use annotation. NOTE If you fall behind, you can install a package named L740_Macdonald Section_6.zip from the lab directory. You can install this package by using Package Manager. Section Add a Sling Model Java class to your Lab2018 project Add a Java classes to Eclipse by performing these tasks. 1. Open Eclipse to Lab In the Package Explorer, click on the com.aem.summit.core.models package. 3. Click and Select New, Class. 4. Name the class HeroSlingModel. Once done, your project resembles the following illustration. Section Add Java code to the HeroSlingModel Class The HeroSlingModel class uses Sling Models annotation. Notice that the class uses this = Resource.class) For each field in the dialog that you want to read, create a data member that matches the node name. Each data member uses annotation. For example, consider the description field in public String description March 1, 2018Experience Manager LAB L740 Page 44

45 What is happening here is the value that the AEM author enters into the AEM component dialog field (for example, description) is injected into this data member. Notice that this class has a method named init that uses this This is the method that is invoked when an author clicks the checkmark in the component dialog. All that is happening in this method is a HeroTextBean object is created. The dialog values are injected into the data members and then added to the HeroTextBean object by invoking the corresponding method. For example, the path value is added by invoking the HeroTextBean objects setpath method. Add the following Java code to the HeroSlingModel class. CODE LISTING 6.1 package com.aem.summit.core.models; import javax.annotation.postconstruct; import javax.inject.inject; import com.aem.summit.core.herotextbean; import org.apache.sling.api.resource.resource; import org.apache.sling.models.annotations.model; import org.apache.sling.models.annotations.optional; import org.slf4j.logger; import = Resource.class) public class HeroSlingModel { private final Logger LOG = LoggerFactory.getLogger(getClass()); //Get all dialog fields by using the public public String description; March 1, 2018Experience Manager LAB L740 Page 45

46 public public public public String size; /** The hero text bean. */ private HeroTextBean herotextbean = protected void init() { LOG.info("In the **** INIT *** method"); herotextbean = new HeroTextBean(); //Set the Bean with all the dialgo values herotextbean.setheadingtext(heading); herotextbean.setdescription(description); herotextbean.setpath(path); herotextbean.setdate(startdate); //If checkbox is unchecked if (show == null) herotextbean.setshow("off"); else herotextbean.setshow(show); herotextbean.settype(size); } public HeroTextBean getherotextbean() { return this.herotextbean; } March 1, 2018Experience Manager LAB L740 Page 46

47 } NOTE: In this example, we checked for a null value for the checkbox. This occurs when the checkbox is unchecked. If the values is null, we hard code a value for the checkbox. NOTE: Refer to the instructions in Section 4 for information on how to build and deploy the OSGi bundle. Do NOT USE mvn -PautoInstallPackage. Use mvn clean install. Section Modify the Component HTML to interact with the HeroSlingModel class You need to modify the firstcomponent.html to retrieve values from the HeroSlingModel class. You are going to read the values from the HeroSlingModel class. Add the following code to the firstcomponent.html. CODE LISTING 6.2 <div> <p>this is your AEM HTML Template Language component using a Sling Model:</p> <div data-sly-use.herotextobject="com.aem.summit.core.models.heroslingmodel" data-slytest="${herotextobject}"> <h1>${herotextobject.herotextbean.headingtext}</h1> <p><b>description:</b> ${herotextobject.herotextbean.description}</p> <p><b>selected Path value:</b> ${herotextobject.herotextbean.path}</p> <p><b>date:</b> ${herotextobject.herotextbean.date}</p> <p><b>country:</b> ${herotextobject.herotextbean.type}</p> <p><b>checkbox:</b> ${herotextobject.herotextbean.show}</p> </div> In this example, notice data-sly-use.herotextobject references the Java Sling Model class: com.aem.summit.core.models.heroslingmodel. The code: data-sly-test="${herotextobject}" checks whether the herotextobject is null. Next notice these lines of code: <h1>${herotextobject.herotextbean.headingtext}</h1> <p>${herotextobject.herotextbean.description}</p> This is how you interact with the Java server-side part of the component. In this example, you are writing out the value of the herotextbean object's headingtext class member in an HTML h1 tag. You defined the headingtext March 1, 2018Experience Manager LAB L740 Page 47

48 data member when you created the Java code. This is the value that the user entered in the component's headingtext dialog field. Next the value of the herotextbean object's description class member in an HTML p tag. This is the value that the user entered in the component's description field. NOTE: The rest of the data members are written out like the description data member. Section Refresh the Web Page Open the dialog and enter new values. When you refresh the web page, you will see the values written out from the Java Sling Model class. Section 6 Summary This section you learned how to create a Sling Model Java class and then read those values from HTL. March 1, 2018Experience Manager LAB L740 Page 48

49 Section 7 Use a Multifield in your component YOU HAVE 15 MINUTES TO COMPLETE THIS SECTION The final section of this Lab walks you through how to work with Sling Models and a MultiField resource type, which is granite/ui/components/coral/foundation/form/multifield. That is, you can use a Granite/Coral MultiField data type to build a dialog that lets an author enter information into a MultiField control in the component's dialog, as shown in this illustration. That is, you can use a Granite/Coral MultiField data type to build a dialog that lets an author enter information into a MultiField control in the component's dialog, as shown in this illustration. NOTE to make it easier to create the component dialog that contains a Multifield, install the package named L740_Macdonald_Section7.zip The following illustration shows you the dialog nodes that create the multifield. March 1, 2018Experience Manager LAB L740 Page 49

50 NOTE when you install the package, the name of the path node is./pathbr. Notice the first arrow that points to the products node. This is the multifield node. Each multifield contains the following Granite/Coral resource type: The MultiField in this article has the following fields based on Granite/Coral data types: A text field based on granite/ui/components/coral/foundation/form/textfield. A path browser based on granite/ui/components/coral/foundation/form/pathbrowser. A date picker based on granite/ui/components/coral/foundation/form/datepicker. A checkbox based on granite/ui/components/coral/foundation/form/checkbox. A select (drop-down) based on granite/ui/components/coral/foundation/form/select. Look at the JCR dialog node that is under the firstcomponent. Section Modify the HeroSlingModel Class Modify the HeroSlingModel class to handle the MultiField. The HeroSlingModel class uses annotation that injects a resource type (based on the node in the dialog) that corresponds to the granite/ui/components/coral/foundation/form/multifield. You can see this node at this JCR location: /apps/lab2018/components/content/firstcomponent/cq:dialog/content/items/column/items/products Replace the Java code in the HeroSlingModel class with the following Java code. CODE LISTING 7.1 March 1, 2018Experience Manager LAB L740 Page 50

51 package com.aem.summit.core.models; import javax.annotation.postconstruct; import javax.inject.inject; import com.aem.summit.core.herotextbean; import org.apache.sling.api.resource.resource; import org.apache.sling.models.annotations.model; import org.apache.sling.models.annotations.optional; import org.slf4j.logger; import = Resource.class) public class HeroSlingModel { private final Logger LOG = LoggerFactory.getLogger(getClass()); // Inject the products node under the public Resource products; } // No need of a post construct as we don't have anything to modify after the // model is constructed NOTE the name of the Resource object must match the name of the Multifield node, which in this example is products. NOTE: Refer to the instructions in Section 4 for information on how to build and deploy the OSGi bundle. Do NOT USE mvn -PautoInstallPackage. Use mvn clean install. Section Modify the Component HTML You need to modify the firstcomponent.html to retrieve values from the HeroSlingModel class in which a MultiField resource is injected. You are going to read the values from the HeroSlingModel class. Add the following code to the firstcomponent.html. CODE LISTING 7.2 <h2>this is your AEM HTML Template Language component with a Multifield</h2> <div March 1, 2018Experience Manager LAB L740 Page 51

52 data-sly-use.multiitems="com.aem.summit.core.models.heroslingmodel"> <div data-sly-list.head="${multiitems.products.listchildren}"> <p><b>description:</b> ${head.product}</p> <p><b>selected Path value:</b> ${head.pathbr}</p> <p><b>date:</b> ${'yyyy-mm-dd format= head.startdate, timezone='utc'}</p> <p><b>country:</b> ${head.size}</p> <p><b>checkbox:</b> ${head.show}</p> <hr> </div> </div> In this example, notice data-sly-use.multiitems references the Java Sling Model class: com.aem.summit.core.models.heroslingmodel. The code: div data-sly-list.head="${multiitems.products.listchildren}"> handles the MultiField. For each MultiField in the dialog, the following code is executed. <p><b>description:</b> ${head.product}</p> <p><b>selected Path value:</b> ${head.pathbr}</p> <p><b>date:</b> ${'yyyy-mm-dd format= head.startdate, timezone='utc'}</p> <p><b>country:</b> ${head.size}</p> <p><b>checkbox:</b> ${head.show}</p>section7.3 - Refresh the Web Page Open the dialog and fill in Multifield values. March 1, 2018Experience Manager LAB L740 Page 52

53 When you enter new values into the dialog and refresh the web page, you will see the values written out from the Java Sling Model class. March 1, 2018Experience Manager LAB L740 Page 53

54 Section Understanding where Granite/Coral Multifield dialog data is stored By default, Granite/Coral MultiField data is stored as child nodes: /content/lab2018/en/jcr:content/par/firstcomponent/products This is shown in the following illustration. Notice that each MultiField is a separate node. In this example, item0 and item1. Dialog field values are stored as properties, as shown here. Section 7 Summary In this final section of the Lab, you learned how to work with granite/coral multifield resource type. March 1, 2018Experience Manager LAB L740 Page 54