Ad Code

Wednesday, January 16, 2019

Dynamically Populate Drop Down Values in AEM

Hello Everyone,

You must be thinking that what I am gonna talk about here if there are hundreds of blogs
available over the internet about dynamic drop down. So there are really some things which
might be new to you and this blog won't disappoint you.

There are so many places in AEM project  where we need to dynamically populate
drop down for instance populate the list of pages, populate the country list and so on.
There are two types of use cases which are being used in each and every project.
  • Dynamically populate drop down based on datasource (Build on logic)
  • Dynamically Populate drop down based on values available statically using ACS Commons Generic list. (No logic)
Dynamically Populate Drop Down Based On Datasource

Problem Statement: Let suppose I have a requirement of pulling all the children pages of a root path in drop down.
Solution:
Step 1: Make a drop down widget and create a datasource node under it like this:
Fig -1 Data Source Node Under Select Widget
Step 2: Add a property “resourceType” in datasource which can be mapped to “paths” and “resourceTypes” of the servlet.
Fig -2 Add Resource Type Property In Data Source
Step3: Write a java class mapped to datasource and write a logic to dynamically populate values in the drop down.
sling:resourceType of datasource = sling.servlet.paths of servlet
OR
sling:resourceType of datasource = sling.servlet.resourceTypes of servlet



Note: I have seen people writing a new servlet for every select but actually this is not required. We can get more control on the component if multiple select can use the same service.To make this point clear read the problem statements below and understood how we can solve this.
Let’s discuss few more problem statements:
  • In a project there can be situations where in a component A, you want to pull drop down from Root X and in the component B, you want to pull drop down from Root Y.
Solution: you can add a property may be rootPath in datasource node and fetch the value of that rootPath in the servet and show values.
  • There can be a situation that in component A you want to pull list of pages but in component B you want to pull list of countries.
Solution: You can add a property may be selector as “pageListing” for fetching all the pages or “countryList” to fetch all the countries list and in the servlet call different functions to dynamically populate different values.
Fig -4

Check the code for the above problem statement on github from here.
See the demo video for more visibility over all the problem statements and solutions:

Demonstration Video On How to Populate Drop Down Dynamically Based On DataSource:


Dynamically Populate Drop Down Based On Values Available Statically
Using ACS Commons Generic List

If you are working in AEM platform, you must be aware about ACS Commons and its features and here I am going to describe one feature which is Generic Lists.

Using generic lists, if you have some values and want to populate these values dynamically in drop down you can do. The benefit is if one day author want to add one more value, he can add one more value by himself.

Prerequisites: Your AEM instance must have acs commons package.
Step1: Go to misadmin and select Generic Lists under acs commons.
Step2: Click on New.
Step3: Select generic list template and click on Create.
Step4:Open the page and drag and drop a component named Generic List Item.
Fig -4 

Step5: Add the Title and Value in the Generic List Item component.
Fig -5 Generic List Items
Title: The title which will be visible to the author in drop down.
Value: Value is what gets stored corresponding to what text you selected from drop down. Now values are ready to populate in drop down component.
  • Make a drop down widget and create a datasource node.
  • Add following values in the datasource node.
Fig -6 Data Source Node for using ACS Commons Generic List 
1. sling:resourceType="acs-commons/components/utilities/genericlist/datasource"
2. path="/etc/acs-commons/lists/country-list" //This path is the page path you created earlier and added generic list item.
This is how you can dynamically populate all the values in drop down using generic lists.
Demonstration Video On How to Populate Drop Down Based on Values Available Statically Using ACS Commons Generic List:

If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com


Hope it will help you guys !!
Thanks and Happy Learning.

26 comments:

  1. Replies
    1. A IEEE project is an interrelated arrangement of exercises, having a positive beginning and end point and bringing about an interesting result in Engineering Colleges for a particular asset assignment working under a triple limitation - time, cost and execution. Final Year Project Domains for CSE In Engineering Colleges, final year IEEE Project Management requires the utilization of abilities and information to arrange, plan, plan, direct, control, screen, and assess a final year project for cse. The utilization of Project Management to accomplish authoritative objectives has expanded quickly and many engineering colleges have reacted with final year IEEE projects Project Centers in Chennai for CSE to help students in learning these remarkable abilities.



      Spring Framework has already made serious inroads as an integrated technology stack for building user-facing applications. Spring Framework Corporate TRaining the authors explore the idea of using Java in Big Data platforms.
      Specifically, Spring Framework provides various tasks are geared around preparing data for further analysis and visualization. Spring Training in Chennai

      Delete
  2. Thank you Shivani for sharing such an important information. Can you please tell me how can i achieve the values in second drodown based on the first one using DataSource.

    ReplyDelete
  3. This is excellent information. Thanks for sharing.
    Balaji bike transportation is the top most service provider for Bike Loading services in pune,Bike unloading services in pune,Bike loading in pune,Bike unloading in pune
    Bike Loading services in pune
    Bike unloading services in pune
    Bike loading in pune
    Bike unloading in pune

    ReplyDelete
  4. I feel satisfied to read your blog, you have been delivering a useful & unique information to our vision.keep blogging.
    Digital Marketing Course In Kolkata
    Web Design Course In Kolkata

    ReplyDelete
  5. Thanks for sharing this valuable information with us keep Blogging ...Sarkari Job as a job site, help candidates to know the various Sarkari recruitment posting that are available. We also guide candidates by posting latest jobs helping them with links to apply for jobs, providing them with papers and methods for preparation and lots more...

    ReplyDelete
  6. Thanks for sharing this valuable information to our vision. You have posted a worthy blog keep sharing.
    Digital Marketing Course In Kolkata
    Web Design Course In Kolkata
    SEO Course In Kolkata

    ReplyDelete
  7. Thanks for the job listing. It will definitely help people who are looking for job. Also check our Assam govt jobs which has latest job postings from all over the india.

    ReplyDelete
  8. Your style is very unique compared to other folks I've read stuff from. Many thanks for posting when you have the opportunity, blog Guess I will just book mark this site.
    Selenium Training in chennai | Selenium Training in anna nagar | Selenium Training in omr | Selenium Training in porur | Selenium Training in tambaram | Selenium Training in velachery

    ReplyDelete
  9. This blog is the general information for the feature. You got a good work for these blog.We have a developing our creative content of this mind.Thank you for this blog. This for very interesting and useful. good job
    Ai & Artificial Intelligence Course in Chennai
    PHP Training in Chennai
    Ethical Hacking Course in Chennai Blue Prism Training in Chennai
    UiPath Training in Chennai

    ReplyDelete
  10. Hi my program is not able to find the dropDown servlet
    //Servlet
    @Component(
    service = Servlet.class,
    property = {
    "sling.servlet.selectors=" + DropDownServlet.DEFAULT_SELECTOR,
    Constants.SERVICE_DESCRIPTION + "= Dynamic Drop Down",
    "sling.servlet.paths=/maps/core/servlets/spa/DropDownServlet"
    })
    public class DropDownServlet extends SlingSafeMethodsServlet {}


    //cq:dialog entry





    Thanks, Viyom

    ReplyDelete
  11. Hi ,
    I am trying to create Tab component. In Tabs Component cq:dialog I have 2 tabs. First Tabs take names of tab in textfield and second tab user can select active tab from drop down. I am trying to dynamically load dropdown from first tab through java.
    For which I have written DropDownServlet. My component is not able to find the component.
    Kindly help

    ReplyDelete
  12. Hi,
    I have a requirement in which I have to populate values into the dropdown from multifield. Both the multifield and dropdown exists in the same dialog. Multifield contains two textbox i.e. Label & Value. So the items added to the multifield should populate in the dropdown.
    Since both exist in the same dialog the solutioning becomes difficult. Kindly help.
    Thanks.

    ReplyDelete
  13. Thanks for the blog article.Thanks Again. Keep writing.
    java course
    learn java online

    ReplyDelete