Monday 8 July 2019

AEM - Touch UI dropdown from JSON file/Servlet

Populate Touch UI Dropdown options from JSON file or Servlet which returns JSON

In AEM classic UI, the selection/dropdown widget's options can be populated using JSON response(via JSON file or servlet) but in Touch UI, you need to write a piece of code to achieve same. This blog is about a utility which populates dropdown options dynamically from a JSON file which presents in the repository or from the servlet JSON response.

Custom Utility to populate a dropdown

This custom java utility populates touch UI dropdown from JSON data.

Steps are as follows:

  1. Create a dropdown using granite/coral select type and create datasource node under the select node.
  2. Add following properties to datasource node : 
    - options (String) - path of json file or Servlet, which returns json examples : 
      /apps/commons/utils/json/dropdown/color.json   /bin/utils/json/dropdown/style - sling:resourceType (String) - utils/granite/components/select/datasource/json- repoSource (Boolean) - optional property to specify file in repository or servlet json source. 
    • true(Default) : to read JSON file stored in repository   
    • false : to get JSON from another Servlet

if repoSource property is true JSON file will be read using Node API, if false then another HTTP call is to be made to get JSON response either from json file or servlet. 
if repoSource is false it works in both cases in file or servlet JSON response. This property is just added to avoid unnecessary HTTP call if the file is in the repository.



datasource node properties



    You can find the example that explains how to use datasource with to populate touch UI dropdown at https://helpx.adobe.com/experience-manager/using/creating-granite-datasource.html

    Utility Servlet code
    https://github.com/arunpatidar02/aem63app-repo/blob/master/java/dropdown/PopulateTouchUIDropdownFromJsonResource.java


    POM file changes
    Add below dependencies in parent and core pom(if not already added) 

    1. GSON
     <dependency>
      <groupId>com.google.code.gson</groupId> 
      <artifactId>gson</artifactId>
           <version>2.8.5</version>
     </dependency>

     2. HTTP Client 
      <dependency>
          <groupId>org.apache.httpcomponents</groupId>
          <artifactId>httpclient</artifactId>
          <version>4.5.5</version> 
     </dependency>


    Example JSON file/response
    The Josn response can have array of options in below formates:
    {"text": "White","value": "white"}
    {"text": "White","value": "white","disabled": true} - to disable option in dropdown
    {"text": "White","value": "white","selected": true} - to preselect option in dropdown


    Example file -
    https://github.com/arunpatidar02/aem63app-repo/blob/master/java/dropdown/sample.json


    Conclusion

    This utility can be used to render any touch UI dropdown options from json source similar to classic UI. This Utility uses GSON to parse JSON and create options. If you are looking for same using JSONObject API, you can check example at https://github.com/arunpatidar02/aem63app-repo/blob/master/java/DatasourceJson.java

    3 comments:

    1. This comment has been removed by a blog administrator.

      ReplyDelete
    2. Hi, I need to render the json present in the dam path to my dropdown . So , could you please let me know whether this approach will work.

      ReplyDelete
      Replies
      1. Hi, This will work but you need to read original rendition of xml to get the binary stream

        Delete

    AEMaaCS - Core Component's Children Editor

    If you are using core components, you should be familiar with the children-editor for Tabs, Accordion, and Carousel. These components are th...

    About Me

    My photo
    https://www.linkedin.com/in/arunpatidar26/ https://experienceleaguecommunities.adobe.com/t5/user/viewprofilepage/user-id/6786635 https://community.adobe.com/t5/user/viewprofilepage/user-id/12372253 https://forums.adobe.com/people/Arun+Patidar