AEM: Ways to populate a Selection Widget

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 contain 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 a 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:

[java]
@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<String> 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());
}
}
[/java]

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 which 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 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 the similar way, we can also create Checkboxes and Radio buttons with dynamic options.