Day 17 - Granite Datasources (Dynamic Dropdown) | AEM Community Blog Seeding

[kautuk_sahni]

Day 17 - Granite Datasources (Dynamic Dropdown) by Red Quark

Abstract

Howdy fellow devs ! In AEM development, sometimes we might have requirements to populate the same data at multiple places. For e.g., suppose we have a requirement to create a text, an image and a video component and we need to provide background colour to these components in the form of a dropdown. These background colours will be same throughout our 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 are normally used to dynamically populate data in the dialog fields such as dropdowns. Thus, we only have to maintain our dropdown values only at one location and it can be used throughout our entire code. Pretty cool, eh ?

Code Example
In this post, we are going to create a simple component which will use three dropdowns with countries , colors and fonts options. Instead of following the conventional approach of creating nodes of options underneath the dropdown node, we will use json files with all the data and then that data will be populated in the component’s dialog.

So, without further ado, let’s see how we can achieve this -

1. We will upload three json files in our DAM. So, start up your AEM instance and upload three json files with the following data (you can create new files with the given names and data and upload iin your dam). The location of folders should be /content/dam/aemtutorials.

Read Full Blog

Day 17 - Granite Datasources (Dynamic Dropdown)

Q&A

Please use this thread to ask the related questions.