+ Start a Discussion
Akshay ShrivastavaAkshay 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
CharuDuttCharuDutt
Hii Akshay Shrivastava
Can You Explain More About This
Akshay ShrivastavaAkshay Shrivastava
Hii CharuDutt
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..
CharuDuttCharuDutt
Hii Akshay Shrivastava
Try Below Code Changes By Are In Bold
 
<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:attribute name="NumberRecords" type="Integer" description="use for store user search input" default='2' />
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>

     <lightning:select aura:id="select" name="select" label="Select Number Of Records To Show " onchange="{! c.onChange }">
        <option value="">choose one...</option>
        <option value="2">2</option>
        <option value="4">4</option>
        <option value="10">10</option>
        <option value="20">20</option>
        <option value="30">30</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>


helper..---

({
    accordHelper :function(component, event, helper) {
         component.set('v.mycolumns');
        var action=component.get("c.showAccountsForAccordion");

           action.setParams({ searchKey : component.get("v.searchKeyword"),
                          lmt : component.get("v.NumberRecords")});

        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);
    }
    
    
})

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 (component, evt, helper) {
         var selectedLimit = component.find('select').get('v.value');
         var converted = Number(selectedLimit);
         component.set('v.NumberRecords', converted);
    }

})



Apex Class

public class AccRelatedConC {
  @AuraEnabled(cacheable=true)
    public static List<Account> fetchAcc (String searchKey ,integer lmt){
        String query= 'SELECT Id, Name,(select id,Name,AccountId from contacts Where AccountId != Null),'+
                '(select id,Name,AccountId from opportunities Where AccountId != Null) FROM Account';
         if ( searchKey != Null ) {
            String key = '%' + searchKey + '%';
            query += ' WHERE Name LIKE :key limit '+ lmt;
        }system.debug(Database.query( query ));
         return Database.query( query );
        
    }  
}
Please Mark It As Best Answer If it Helps
Thank You!