You need to sign in to do that
Don't have an account?
Akshay Shrivastava
Show records based on selection of picklist value
i want to show records based on picklist selection..
if i select 2 then .. two accounts show
if select 4 then.. four accounts show.
component....---
<aura:component implements="flexipage:availableForAllPageTypes"
controller="GetAccountChild"
access="global" >
<aura:attribute name="accList"
type="List"/>
<aura:attribute name="Accounts" type="Account[]"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init"
value="{!this}"
action="{!c.doInit}"/>
<lightning:select name="cStat" label="select a value" value="New" aura:id="statusPicklist" >
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</lightning:select>
<br/><br/>
<lightning:datatable data="{! v.acctList }"
columns="{! v.mycolumns }"
keyField="id"
hideCheckboxColumn="true"/>
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
<aura:attribute name="activeSections" type="List"/>
<div class="slds-border_bottom">
<h1>Accounts</h1></div>
<div class="slds-scrollable_y">
<div class="slds-text-longform">
<lightning:input value="{!v.searchKeyword}"
placeholder="search Accounts.."
aura:id="searchField"
label="Account Name"/>
<lightning:button onclick="{!c.Search}"
variant="brand"
label="Search"
iconName="utility:search"/>
<lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-2">
<div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
<aura:iteration items="{!v.accList}"
var="acc">
<lightning:accordionSection name="{!acc.Name}"
label="{!acc.Name}">
<div class="slds-scrollable" style="height:10rem;width:24rem">
<div class="slds-text-longform" style="width:150%">
<lightning:tabset selectedTabId="one">
<lightning:tab label="Contacts" id="one">
<aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
<li>Contact {!index + 1} Name : {!con.Name}</li>
<li>Contact Phone :</li>
<p><lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone></p>
<br></br>
</aura:iteration>
</lightning:tab>
<lightning:tab label="Opportunities" id="two">
<aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
<li>Opportunities {!index + 1} Name : {!opp.Name}</li>
<li>ID : {!opp.Id}</li>
<br></br>
</aura:iteration>
</lightning:tab>
</lightning:tabset>
</div>
</div>
</lightning:accordionSection>
</aura:iteration>
</div>
</div>
</div>
</lightning:accordion>
</div>
</div>
</aura:component>
controller----
({
doInit : function(component, event, helper) {
helper.accordHelper(component,event,helper)
},
handleSectionToggle: function (component, event, helper) {
var openSections = event.getParam("openSections");
if (openSections.length === 0) {
alert("All sections are closed");
} else {
alert(openSections);
}
},
Search: function(component, event, helper) {
helper.accordHelper(component, event);
},
onChange: function (cmp, event, helper) {
var selectedPicklistValue= component.find("statusPicklist").get("v.value");
alert("selectedPicklistValue ==>" +selectedPicklistValue)
}
})
helper..---
({
accordHelper :function(component, event, helper) {
component.set('v.mycolumns');
var action=component.get("c.showAccountsForAccordion");
action.setParams({ searchKey : component.get("v.searchKeyword") });
action.setCallback(this,function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + JSON.stringify(allValues));
component.set('v.activeSections', allValues.Name);
component.set('v.accList', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
})
can anyone help on this
if i select 2 then .. two accounts show
if select 4 then.. four accounts show.
component....---
<aura:component implements="flexipage:availableForAllPageTypes"
controller="GetAccountChild"
access="global" >
<aura:attribute name="accList"
type="List"/>
<aura:attribute name="Accounts" type="Account[]"/>
<aura:attribute name="mycolumns" type="List"/>
<aura:handler name="init"
value="{!this}"
action="{!c.doInit}"/>
<lightning:select name="cStat" label="select a value" value="New" aura:id="statusPicklist" >
<option value="2">2</option>
<option value="4">4</option>
<option value="10">10</option>
</lightning:select>
<br/><br/>
<lightning:datatable data="{! v.acctList }"
columns="{! v.mycolumns }"
keyField="id"
hideCheckboxColumn="true"/>
<aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
<aura:attribute name="searchKeyword" type="String" description="use for store user search input"/>
<aura:attribute name="activeSections" type="List"/>
<div class="slds-border_bottom">
<h1>Accounts</h1></div>
<div class="slds-scrollable_y">
<div class="slds-text-longform">
<lightning:input value="{!v.searchKeyword}"
placeholder="search Accounts.."
aura:id="searchField"
label="Account Name"/>
<lightning:button onclick="{!c.Search}"
variant="brand"
label="Search"
iconName="utility:search"/>
<lightning:accordion allowMultipleSectionsOpen="true" activeSectionName="{! v.activeSections }" onsectiontoggle="{! c.handleSectionToggle }">
<div class="demo-only demo-only--sizing slds-grid slds-wrap">
<div class="slds-size_1-of-2">
<div class="slds-box slds-box_x-small slds-text-align_left slds-m-around_x-small">
<aura:iteration items="{!v.accList}"
var="acc">
<lightning:accordionSection name="{!acc.Name}"
label="{!acc.Name}">
<div class="slds-scrollable" style="height:10rem;width:24rem">
<div class="slds-text-longform" style="width:150%">
<lightning:tabset selectedTabId="one">
<lightning:tab label="Contacts" id="one">
<aura:iteration items="{!acc.Contacts}" var="con" indexVar="index">
<li>Contact {!index + 1} Name : {!con.Name}</li>
<li>Contact Phone :</li>
<p><lightning:formattedPhone value="{!con.Phone}"></lightning:formattedPhone></p>
<br></br>
</aura:iteration>
</lightning:tab>
<lightning:tab label="Opportunities" id="two">
<aura:iteration items="{!acc.Opportunities}" var="opp" indexVar="index">
<li>Opportunities {!index + 1} Name : {!opp.Name}</li>
<li>ID : {!opp.Id}</li>
<br></br>
</aura:iteration>
</lightning:tab>
</lightning:tabset>
</div>
</div>
</lightning:accordionSection>
</aura:iteration>
</div>
</div>
</div>
</lightning:accordion>
</div>
</div>
</aura:component>
controller----
({
doInit : function(component, event, helper) {
helper.accordHelper(component,event,helper)
},
handleSectionToggle: function (component, event, helper) {
var openSections = event.getParam("openSections");
if (openSections.length === 0) {
alert("All sections are closed");
} else {
alert(openSections);
}
},
Search: function(component, event, helper) {
helper.accordHelper(component, event);
},
onChange: function (cmp, event, helper) {
var selectedPicklistValue= component.find("statusPicklist").get("v.value");
alert("selectedPicklistValue ==>" +selectedPicklistValue)
}
})
helper..---
({
accordHelper :function(component, event, helper) {
component.set('v.mycolumns');
var action=component.get("c.showAccountsForAccordion");
action.setParams({ searchKey : component.get("v.searchKeyword") });
action.setCallback(this,function(response){
var state = response.getState();
if(state === "SUCCESS"){
var allValues = response.getReturnValue();
console.log("allValues--->>> " + JSON.stringify(allValues));
component.set('v.activeSections', allValues.Name);
component.set('v.accList', allValues);
}
else if(state === "ERROR") {
var errors = response.getError();
if(errors){
if(errors[0] && errors[0].message){
console.log("Error Message: " + errors[0].message);
}
}
else{
console.log("Unknown Error");
}
}
});
$A.enqueueAction(action);
}
})
can anyone help on this
Can You Explain More About This
i want a option like a picklist...
If picklist have 3 options..
2,
4,
10,
Then if user select 4 then...4 accounts should be show....like this..
Try Below Code Changes By Are In Bold
Please Mark It As Best Answer If it Helps
Thank You!