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
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.
Happy Coding 😊
Hi, Great Article.
ReplyDeleteI can't find the value of this AppConstants.DATASOURCE_PATH anywhere. Can you please help me out with the value that's supposed to be in there?
AppConstants.DATASOURCE_PATH = "/apps/demoproject/components/common/data/".
DeleteCheck this repository for all the code - https://github.com/ani03sha/aem-demo
Hi Anirudh,
ReplyDeleteThanks for this great article, Could you please tell me, how to use datasource in touch-ui multifield case ? (If our dropdown is under multifield). We found that, after clicking on the ADD button, it doesn't load the data, We have to close the dialog and open it again (as it requires dropdown to be present in its structure.)