How to Convert Adobe’s Granite UI 1.0 Documentation to XML

As an AEM developer, we must prepare Touch UI dialogues within code, in the XML format. When it comes to reading the Granite UI 1.0 Documentation, it can be confusing; especially for new AEM developers. These new AEM developers are confused by how properties within the documentation are mapped and converted to XML entries.

This document will help you understand how properties within the Granite UI 1.0 documentation are mapped and converted to XML entries.

This article will focus on how to convert the Granite UI textfield component documentation to XML format.

Quick Links:

Understanding the Adobe’s Granite UI 1.0 Documentation
Question: Example Hierarchy Explained
Conclusion

Understanding the Adobe’s Granite UI 1.0 Documentation, textfield component:

Before we jump straight to the code examples, let us understand how to convert Adobe’s Granite UI 1.0 Documentation to XML. When looking at an Granite UI 1.0 form component’s documentation, textfield component, we are presented with this page:
We can see a couple of sections of the page:

The component’s sling:resourceType reference.
The details & description about the current form component. From what we can see, the textfield form element extends from the Field, abstract component; extended Field component also makes more property configuration available to the form component.
The available configuration and properties for the form component.

a. Create a New textfield Component:

Once we understand the configurations and properties for the textfield form component, with XML, we can create a textfield component with the following. Note that the sling resource has a primary type of jcr:primaryType=”nt:unstructured”, as follows:

1
2
3

b. Plug in the Necessary Properties to our textfield Form Component:

Next, using the Granite UI 1.0 documentation, we can simply plug in the necessary properties to our form component, sling resource.

Based on our requirements, we can copy properties from the Granite UI 1.0 documentation into our newly created component, within the XML:

1
2
3
4
5
6
7
8
9
10
11
12
13

Note:
To learn how to Creating a Basic AEM Touch UI Dialogue, check out this article.

Question: Example Hierarchy Explained

q: How can translate hierarchy examples diagrams within the Granite UI 1.0 Documentation?
Example in such diagrams:

Translated XML, looks like:

1
2
3
4
5
6
7
8
9
10
11
12
13

Conclusion

I hope this article has been helpful. Other than the Granite UI 1.0 Text Field form component. There are many other form components you would be using based on your requirements. Have a play with all the form components available in the Granite UI 1.0 library. They are listed here:

Components:

Looking for Help? Or need a mentor?

If you need help to super drive your AEM career road map, you can hire me for a one-hour session on codementor.io; We can work together on a price works just for you. https://www.codementor.io/@briankasingli. I'd be happy to help you along your way to becoming a high-quality AEM full-stack engineer.

Was this post helpful?

Let us know if you liked the post. That’s the only way we can improve.

How to Convert Adobe’s Granite UI 1.0 Documentation to XML