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
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:
Step 2: Add a property “resourceType” in datasource which can be mapped to “paths” and “resourceTypes” of the servlet.
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 |
Fig -2 Add Resource Type Property In Data Source |
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.
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
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.
Step5: Add the Title and Value in the Generic List Item component.
Title: The title which will be visible to the author in drop down.
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
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.
- 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.
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 |
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 |
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.
ReplyDeleteThank you very much for shared this. I got lot of ideas after reading this. Share more as similar to this.
core java training in chennai
core java classes
core javaTraining in Tambaram
c c++ courses in chennai
C Language Training
javascript training in chennai
Appium Training in Chennai
JMeter Training in Chennai
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.
DeleteSpring 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
Well written post with worthy information. It will definitely be helpful for all. Do post more like this.
ReplyDeleteBlue Prism Training in Chennai
Blue Prism Training in Anna Nagar
RPA Training in Chennai
RPA course in Chennai
UiPath Training in Chennai
RPA Training in Velachery
Machine Learning Course in Chennai
Blue Prism Training in Chennai
Thanks for this wonderful blog it is really informative to all.
ReplyDeleteTOEFL Coaching in Chennai
TOEFL Training in Chennai
Spoken English in Chennai
french courses in chennai
pearson vue test center in chennai
German Classes in Chennai
TOEFL Coaching in VelaChery
TOEFL Coaching in Tambaram
IELTS Coaching in anna nagar
best spoken english institute in anna nagar
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.
ReplyDeleteI have been reading for the past two days about your blogs and topics, still on fetching! Wondering about your words on each line was massively effective. Techno-based information has been fetched in each of your topics. Sure it will enhance and fill the queries of the public needs. Feeling so glad about your article. Thanks…!
ReplyDeleteselenium training in chennai
selenium online courses best selenium online training
selenium testing training
selenium classes
This is the first & best article to make me satisfied by presenting good content. I feel so happy and delighted. Thank you so much for this article.
ReplyDeleteLearn Best Digital Marketing Course in Chennai
Digital Marketing Course Training with Placement in Chennai
Best Big Data Course Training with Placement in Chennai
Big Data Analytics and Hadoop Course Training in Chennai
Best Data Science Course Training with Placement in Chennai
Data Science Online Certification Course Training in Chennai
Learn Best Android Development Course Training Institute in Chennai
Android Application Development Programming Course Training in Chennai
Learn Best AngularJS 4 Course Online Training and Placement Institute in Chennai
Learn Digital Marketing Course Training in Chennai
Digital Marketing Training with Placement Institute in Chennai
Learn Seo Course Training Institute in Chennai
Learn Social Media Marketing Training with Placement Institute in Chennai
Thanks for sharing an informative blog keep rocking bring more details.I like the helpful info you provide in your articles. I’ll bookmark your weblog and check again here regularly. I am quite sure I will learn much new stuff right here! Good luck for the next!
ReplyDeleteWeb Designing Training Institute in Chennai | web design training class in chennai | web designing course in chennai with placement
Mobile Application Development Courses in chennai
Data Science Training in Chennai | Data Science courses in Chennai
Professional packers and movers in chennai | PDY Packers | Household Goods Shifting
Web Designing Training Institute in Chennai | Web Designing courses in Chennai
Google ads services | Google Ads Management agency
Web Designing Course in Chennai | Web Designing Training in Chennai
This is excellent information. Thanks for sharing.
ReplyDeleteBalaji 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