AEM: Ways to populate a Selection Widget

20 / Jul / 2015 by Surabhi Katiyar 3 comments

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 which is conveniently organised 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.

Selection_023

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:

Selection_026

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&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());
}
}
[/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.

Selection_019

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

Selection_025

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

FOUND THIS USEFUL? SHARE IT

comments (3)

  1. Mateo Recoba

    Hi.

    This example is for a no-touch dialog, and I am trying to make it work on a cp:dialog.

    With xtype: selection, type:select does not work, so i put sling:resourceType = granite/ui/components/foundation/form/select

    But the to servlet is never reached.

    What should i do?

    Thanks in advance
    Mateo

    Reply
  2. Praveen

    Good one, It would be much better it you provide one component to author those drop down value, as business cannot go to felix control to add those values….

    Reply

Leave a Reply to Sumedha Cancel reply

Your email address will not be published. Required fields are marked *