{"id":22961,"date":"2015-07-20T21:36:23","date_gmt":"2015-07-20T16:06:23","guid":{"rendered":"http:\/\/www.tothenew.com\/blog\/?p=22961"},"modified":"2016-08-29T17:44:32","modified_gmt":"2016-08-29T12:14:32","slug":"aem-ways-to-populate-a-selection-widget","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/aem-ways-to-populate-a-selection-widget\/","title":{"rendered":"AEM: Ways to populate a Selection Widget"},"content":{"rendered":"
\n

One of the powerful features that AEM offers<\/a> 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<\/strong> 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.<\/p>\n

There are commonly two ways to provide the options for a selection widget:
\n
\n1) Static<\/b><\/p>\n

2) Dynamic<\/b><\/p>\n<\/div>\n

1) Static:<\/b>\u00a0When 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.<\/p>\n

\"Selection_023\"<\/p>\n

The dialog.xml file that contain static options will look like this:<\/p>\n

<selection jcr:primaryType=\"cq:Widget\"\r\n    fieldLabel=\"Select the author name\"\r\n    fieldDescription=\"Please select\"\r\n    name=\".\/selection\"\r\n    type=\"select\"\r\n    xtype=\"selection\">\r\n    <options jcr:primaryType=\"cq:WidgetCollection\">\r\n        <option1\r\n            jcr:primaryType=\"nt:unstructured\"\r\n            text=\"Laura\"\r\n            value=\"Laura\"\/>\r\n        <option2\r\n            jcr:primaryType=\"nt:unstructured\"\r\n            text=\"Olive\"\r\n            value=\"Olive\"\/>    \r\n        <option3\r\n            jcr:primaryType=\"nt:unstructured\"\r\n            text=\"Larry\"\r\n            value=\"Larry\"\/>    \r\n    <\/options>\r\n<\/selection><\/pre>\n
Please note that the JSON format for options of selection widget should be of the following format<\/b><\/p>\n
[<\/span>\r\n    {<\/span>\r\n        \"value\"<\/span>:<\/span> 10<\/span>,<\/span>\r\n        \"text\"<\/span>:<\/span> \"A\"<\/span>\r\n    },<\/span> {<\/span>\r\n        \"value\"<\/span>:<\/span> 20<\/span>,<\/span>\r\n        \"text\"<\/span>:<\/span> \"B\"<\/span>\r\n    }<\/span>\r\n]<\/span> <\/code><\/pre>\n
Here text<\/b>\u00a0denotes string that will appear in the dialog dropdown and value<\/b> is used for background processing in the application logic.<\/p>\n
\"Selection_026\"<\/p>\n
The first step is to create a servlet that will return the dynamic JSON data in the above specified format:<\/p>\n
[java]
\n@SlingServlet(paths = "\/bin\/service\/felix", methods = "GET")
\npublic class FelixConfigServlet extends SlingSafeMethodsServlet {<\/p>\n
@Reference
\nFelixConfigInterface felixConfigInterface;<\/p>\n
@Override
\nprotected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response) throws IOException {
\nJSONArray jsonArray = new JSONArray();
\nresponse.setContentType("application\/json");
\nresponse.setCharacterEncoding("UTF-8");
\nList&lt;String&gt; list = felixConfigInterface.getFactoryConfigs();
\nJSONObject json = new JSONObject();
\nint count = 0;
\nfor (String name : list) {
\nJSONObject jsonObject = null;
\ncount++;
\ntry {
\njsonObject = new JSONObject();
\njsonObject.put("text", name);
\njsonObject.put("value", count);
\n} catch (JSONException e) {
\ne.printStackTrace();
\n}
\njsonArray.put(jsonObject);
\n}
\nresponse.getWriter().write(jsonArray.toString());
\n}
\n}
\n[\/java]<\/p>\n
Next step is to create a component in the ‘\/apps’ directory in the usual way\u00a0and create the dialog which will have a selection widget which uses the above-created servlet to populate its values.<\/p>\n
\"Selection_019\"<\/a><\/p>\n
In the dialog,instead of having a static options array we have a Servlet path, which will return a\u00a0JSON. Values will get populated from this JSON.<\/p>\n
In dialog,\u00a0 create a dropdown widget (xtype: selection, type:select) and add a property as below:<\/p>\n
Property name: \u201coptions<\/strong>\u201d<\/p>\n
Property value:\u00a0 \u201c\/bin\/service\/felix<\/strong>\u201d\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 (path of the servlet)<\/p>\n
Save the changes and the dropdown will get \u00a0populated by values provided in the OSGi Factory Configuration<\/p>\n
\"Selection_025\"<\/p>\n
In the similar way, we can also create Checkboxes and Radio buttons with dynamic options.<\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":202,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":45},"categories":[1],"tags":[1235,4847,1581,2002,49,4850],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/22961"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/202"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=22961"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/22961\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=22961"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=22961"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=22961"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
2) Dynamic: <\/b>When\u00a0we 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<\/a> 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 \u00a0FactoryConfig Component\/Service to add configuration and accept values of properties is FelixConfigInterface. The OSGi Factory Configuration used is:<\/p>\n