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 😎?
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.