Welcome back All, here we will learn about the dynamic field of Lightning Component. As Most of you must be aware of that In Lightning, Component Dynamic component is not available. Recently I was working on one of my projects and implemented the Dynamic binding using the lightning component so I am going to share how I implemented the same so that it may help others.
As we all know that we can use the Dynamic Binding in the VisualForce page but in Lightning Component it is not Possible.
In this example, We will show the list of Objects in a picklist and when user will select any object it will dynamically show the TOP 15 records in a table.
Output
Step1 – Create Apex Class
DynamicBindingDemoController.class
[gist]bbdffd3849af765ecacab071e3edfb36[/gist]
https://gist.github.com/amitastreait/bbdffd3849af765ecacab071e3edfb36.js
Step2 – Create the Lightning Component
DynamicBindingDemo.cmp
[gist]42e2f6b27c270e0ccd65d3f653f45683[/gist]
See the comments into the component.
Step3: – Click on Controller from the right and paste the below code for Controller Javascript
DynamicBindingDemoController.js
[codesyntax lang=”javascript” container=”div” doclinks=”1″]
({
doInit : function(component, event, helper) {
helper.onInit(component, event, helper);
},
doHandleChange : function(component, event, helper) {
helper.onHandleChange(component, event, helper);
},
})
[/codesyntax]
Step4: – Click on Helper from the right and paste the below code for Helper Javascript
DynamicBindingDemoHelper.js
[gist]4ea5725d25651d4642ff91a67dda107a[/gist]
See the comments.
Step5: – Create Lightning Application
DynamicBindingDemoApplication.app
[codesyntax lang=”xml” container=”div” doclinks=”1″]
<aura:application access="Global" extends="force:slds" > <c:DynamicBindingDemo /> </aura:application>
[/codesyntax]
Click on Preview to see the output of the component.
Happy learning 🙂
Sharing is caring 🙂 😉
Resource:-