Day 18: Working with Granite Datasources

AEM Developer Series

• Day 00: AEM Developer Series
• Day 01: Introduction to AEM
• Day 02: AEM Architecture
• Day 03: Setting up AEM Development Environment
• Day 04: Developing First OSGi Bundle
• Day 05: Working with Sling Servlets in AEM
• Day 06: Playing with Sling Post Servlet
• Day 07: Creating your first component in AEM
• Day 08: Dueling with JavaScript Use API
• Day 09: Dueling with Java User API
• Day 10: Getting to know Sling Models
• Day 11: Client Libraries in Action
• Day 12: Creating your custom OSGi Configuration
• Day 13: Schedulers in AEM
• Day 14: Eventing in AEM
• Day 15: Custom Workflows in AEM
• Day 16: Creating JMX Beans in AEM
• Day 17: Working with QueryBuilder API
• Day 18: Working with Granite Datasources in AEM
• Day 19: Replication API in Action
• Day 20: Working with Users and Groups in AEM

In AEM development, you might have requirements to populate the same data at multiple places. For e.g., suppose you have a requirement to create a text, an image and a video component and you need to provide background colour to these components. The background colours are the same throughout your application code.
A naive way to achieve this is to create the same colour nodes under all the component's cq:dialog. Here we are not getting any code reusability. Wouldn't it be great if we create all the colour nodes once and reuse it anywhere we want? Granite Datasource is the answer to this question.

A datasource is the factory to provide a collection of Resource and normally used to dynamically populate data in the dialog fields such as dropdowns.
In this post, we are going to create a dynamic datasource and we will use it to populate a dropdown in our component.

Create a Datasource

• Navigate to CRXDE and create a component with the following configuration

Create a component

• No create a node cq:dialog of type nt:unstructured under this component with the following configuration
• Note that in the /apps/demoproject/components/content/datasourceDemo/cq:dialog/content/items/tab/items/columns/items/colors/datasource we have datasource node whose sling:resourceType property is equal to the path of the HTML file where we have written the code of calling Java class.
• Create the following structure in your project folder

Datasource and Data nodes

• /apps/demoproject/components/datasource node has the HTML file in which we are calling the Java backend class
• While /apps/demoproject/components/common/data node has the nodes which represent data. In our case, we have colour nodes. Note the folders common and data are of type sling:Folder.
• Add following code in the datalist.html file

<sly data-sly-use.data="org.redquark.demo.core.datasource.Datasource" />

• Create a class named Datasource and paste the following code in it.
• Here datapath is the value of the property data_path stored under the colors node of the component's cq:dialog. In our case, it will read as "colors".
• Then we are the resource object of the node /apps/demoproject/components/common/data/colors 
• Then we are storing the colors in the Map<String, String> via node iteration.
• Then comes the most important logic of creating com.adobe.granite.ui.components.ds.DataSource object. Here we are converting the Map created previously into the DataSource object ds.
• After setting the ds, we are setting it in the request object.
• Now go to any page of your website and drag & drop the datasourceDemo component and open the dialog. You will then see the colours are populated in the dropdown.

Edit dialog

Conclusion

Congratulations!! 🙋 today we have discussed how to populate data dynamically from a Granite DataSource. I hope you enjoyed this post.

You can find the complete code of this project on my GitHub in this commit. Feel free to fork or open issues, if any.

I would love to hear your thoughts on this and would like to have suggestions from you to make it better. 

Feel free to befriend me on Facebook, Twitter or Linked In or say Hi by email.

Happy Coding 😊