AEM: Ways to populate a Selection Widget

One of the powerful features that AEM offers is its authoring capabilities. It provides easy to use GUI for authors to create and edit content. When it comes to authoring the content, dialog plays a vital role in that. A dialog accepts inputs via Widgets and then makes that input available for further use. One of the most commonly used widget is the Selection Widget. If you have a nice handy JSON data source that is conveniently organized into key/value pairs, you can use this to populate the values for the selection widget (dropdown, combo box, radio buttons, and checkboxes) in the dialog. In this blog post, we’ll talk about the ways to populate the selection widget.
There are commonly two ways to provide the options for a selection widget:

1) Static
2) Dynamic
1) Static: When the options are limited in number and are generally fixed, we use this. Making them static will result in a faster response and better performance.

The dialog.xml file that contains static options will look like this: <selection jcr:primaryType="cq:Widget" fieldLabel="Select the author name" fieldDescription="Please select" name="./selection" type="select" xtype="selection"> <options jcr:primaryType="cq:WidgetCollection"> <option1 jcr:primaryType="nt:unstructured" text="Laura" value="Laura"/> <option2 jcr:primaryType="nt:unstructured" text="Olive" value="Olive"/> <option3 jcr:primaryType="nt:unstructured" text="Larry" value="Larry"/> </options> </selection>

Please note that the JSON format for options of selection widget should be of the following format [ { "value": 10, "text": "A" }, { "value": 20, "text": "B" } ]

Here text denotes string that will appear in the dialog dropdown and value is used for background processing in the application logic.
2) Dynamic: When we have to calculate our options based on some parameters, or they are provided by some third-party service, we use the dynamic way of populating it. Dynamic options can be generated using any file that will output JSON data. The file could be a static file that contains the JSON data or can be some OSGi service or OSGi configuration that will generate dynamic JSON data. Here dynamic options are fetched using OSGi Factory Configuration. This post uses a Java Servlet which generates the options for dropdown and creates a JSON from the configuration values received the Factory Service. Here the OSGI factory configuration is FelixConfig and the service that uses this FactoryConfig Component/Service to add configuration and accept values of properties is FelixConfigInterface. The OSGi Factory Configuration used is:

The first step is to create a servlet that will return the dynamic JSON data in the above-specified format:

@SlingServlet(paths = "/bin/service/felix", methods = "GET")
public class FelixConfigServlet extends SlingSafeMethodsServlet {

@Reference
FelixConfigInterface felixConfigInterface;

@Override
protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
JSONArray jsonArray = new JSONArray();
response.setContentType("application/json");
response.setCharacterEncoding("UTF-8");
List&lt;String&gt; list = felixConfigInterface.getFactoryConfigs();
JSONObject json = new JSONObject();
int count = 0;
for (String name : list) {
JSONObject jsonObject = null;
count++;
try {
jsonObject = new JSONObject();
jsonObject.put("text", name);
jsonObject.put("value", count);
} catch (JSONException e) {
e.printStackTrace();
}
jsonArray.put(jsonObject);
}
response.getWriter().write(jsonArray.toString());
}
}

The next step is to create a component in the ‘/apps’ directory in the usual way and create the dialog which will have a selection widget that uses the above-created servlet to populate its values.

In the dialog, instead of having a static options array, we have a Servlet path, which will return a JSON. Values will get populated from this JSON.
In the dialog, create a dropdown widget (xtype: selection, type:select) and add a property as below:
Property name: “options”
Property value: “/bin/service/felix” (path of the servlet)
Save the changes and the dropdown will get populated by values provided in the OSGi Factory Configuration

In a similar way, we can also create Checkboxes and Radio buttons with dynamic options.

Source: https://www.tothenew.com/blog/aem-ways-to-populate-a-selection-widget/