Can somebody explain the simple flow for reading a value from JCR and storing a value to JCR from touch UI

[arychu]

Hi,

I would appreciate if someone could explain me in simple terms the flow of reading/writing and displaying the data stored in the field in UI in AEM web page using a touch UI component.

So my background is new to AEM but not new to CMS of other stacks. Here’s what I have understood so far in AEM.

1) Creating a touch UI component in CRXDE, using the property to store value in JCR and display the component in UI so that it could be dragged and dropped into the iparsys.

2) I know for touch UI I have to go get the reference to granite/ui/.... for fields, that i would like to use.

What i need help with understanding is --

      1)     so i am able to store value in the JCR  - just set the property in CRX and it saves that in JCR.

                      a. Is this true for simple controls like text, image etc without validation?    

       2)     How do i get the values back from JCR and bind it back to the control (touch UI)?

a.  Do I have to write getters and setters for that, which means should i create Java classes and where should that be? should that be a OSGI bundle or should that be a jar files or a bean file.

b. is there a direct way to bind the property back to control? For example, if the checkbox was checked it stores “yes” in the JCR but how to do retrieve it back and see a checkbox checked when I open the dialog in edit mode.

There are examples out there but I wanted someone to explain me the control flow, so that I can make much more complex components.
Appreciate your help.

Thanks

RC

[stevec2515680]

When you create a component in the TOuch UI, you are using JCR nodes to build the dialog for the TOUCH UI component. 

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 some of the sling:resourceType values that are used to create fields in a Touch UI dialog.

                             

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.

Dialog field values are stored in the JCR automatically. You do not have to write app logic to store or retrieve Touch UI dialog field values. 

See this article (It will help you understand) - https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

Now if you  want to store component values in the JCR ( not TOUCH UI Dialog Fields) - but values a component uses (ie - a page component) - you can write an AEM server-side service to do so and use a Java API such as the JCR API.

Do not confuse Touch UI Dialog fields values and values used by a component (ie - a page component). 

If you want to know HOW TO write a service to persist component values (ie - page component values) in the JCR  - see this article (for example, a page component can have a form on it and you want to store form values in the JCR - values POSTed from a form): 

https://helpx.adobe.com/experience-manager/using/persisting-cq-data-java-content1.html

Hope this helps. 

[stevec2515680]

If you want to know How To Query the AEM JCR and then display JCR data in a component (for example, a GRID in a page component) -- see this article: 

https://helpx.adobe.com/experience-manager/using/querying-experience-manager-data-using1.html

[arychu]

Steve Cave wrote...

When you create a component in the TOuch UI, you are using JCR nodes to build the dialog for the TOUCH UI component. 

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 some of the sling:resourceType values that are used to create fields in a Touch UI dialog.

                             

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.

Dialog field values are stored in the JCR automatically. You do not have to write app logic to store or retrieve Touch UI dialog field values. 

See this article (It will help you understand) - https://helpx.adobe.com/experience-manager/using/creating-touchui-component.html

Now if you  want to store component values in the JCR ( not TOUCH UI Dialog Fields) - but values a component uses (ie - a page component) - you can write an AEM server-side service to do so and use a Java API such as the JCR API.

Do not confuse Touch UI Dialog fields values and values used by a component (ie - a page component). 

If you want to know HOW TO write a service to persist component values (ie - page component values) in the JCR  - see this article (for example, a page component can have a form on it and you want to store form values in the JCR - values POSTed from a form): 

https://helpx.adobe.com/experience-manager/using/persisting-cq-data-java-content1.html

Hope this helps. 

~~Thanks Steve,
Here’s my reply,
Dialog field values are stored in the JCR automatically. You do not have to write app logic to store or retrieve Touch UI dialog field values.
[RC] – understood, but I placed a checkbox in the control, and I am storing that in JCR “Yes” but it does not retrieve that back in the edit mode.so I am not able to retrieve the value and set it to check in the checkbox. (or) for e.g if you have a dropdown that has some values, you select one and it gets stored in JCR how do I bind it back, and select the right value from the list of choices that I have in dropdown.

Now if you want to store component values in the JCR ( not TOUCH UI Dialog Fields) - but values a component uses (ie - a page component) - you can write an AEM server-side service to do so and use a Java API such as the JCR API.
[RC] – the page component value if using components inside parsys is automatically stored in JCR under the content directory in CRX, and I do see an example of what you are trying to say. But isn’t page component uses other components inside it. I guess I need to understand more thoroughly about the page component you are mentioning.

Thanks for taking the time.
RC

[smacdonald2008]

The example about page component simply means you can use an AEM osgi service to perform CRUD (create, replace update, delete) operations on data that appears in a page. This data can be retrieved from JCR. For example, customer data. In other words, you can use JCR instead of a relational database. Hope this helps.