+ Start a Discussion
Akshay ShrivastavaAkshay Shrivastava 

i want to put filter on accordian

In the below code filter showing accounts list..and accordian also showing account list.. i want to show filter on accordian list only. 


<aura:component implements="flexipage:availableForAllPageTypes" 
                controller="GetAccountChild"
                access="global" >
    
    <aura:attribute name="accList"
                    type="List"/>
    <aura:attribute name="Accounts" type="Account[]"/>
    
    
    <aura:handler name="init"
                  value="{!this}"
                  action="{!c.doInit}"/>
    <lightning:card title="Filtered Accounts">
        <div class="search-field">
            <lightning:input aura:id="nameFilter" label="Filter names" onchange="{!c.handleNameFilterChange}" />
        </div>
        <div class="results">
            <aura:if isTrue="{!v.Accounts.length > 0}">
                <p class="has-results">
                    Showing {!v.Accounts.length} accounts(s):
                </p>
                <ol class="slds-list_dotted">
                    <aura:iteration items="{!v.Accounts}" var="Account">
                        <li>
                            <a class="Account-name" onclick="{!c.handleClickAccountName}" data-sfid="{!Account.Id}">
                                {!Account.Name}
                            </a>
                        </li>
                    </aura:iteration>
                </ol>
                <aura:set attribute="else">
                    <p class="no-results">Nothing to show.</p>
                </aura:set>
            </aura:if>
        </div>
    </lightning:card>
    <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:accordion 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>


this code is working properly.. i just want to put filter 
Best Answer chosen by Akshay Shrivastava
CharuDuttCharuDutt
Hii  Akshay Shrivastava
Try The Below Code  Changes Made By Me Are In BOLD
<aura:component controller="AccRelatedConC"
   implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >
   <aura:attribute name="accList" type="List"/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="activeSections" type="List" />

   <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"/>

   <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 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.SearchHelper( component)
    },
        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.SearchHelper(component, event);
        
    },
})

HELPER
({

    SearchHelper : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
         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);
    }
});


APEX
public class AccRelatedConC {
  @AuraEnabled(cacheable=true)
    public static List<Account> fetchAcc (String searchKey){
        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';
        }system.debug(Database.query( query ));
         return Database.query( query );
        
    }  
}
Please Mark It As Best Answer If It Helps
Thank You!

 

All Answers

CharuDuttCharuDutt
Hii  Akshay Shrivastava

Can You Pleae Explain More About Your Requirement
Akshay ShrivastavaAkshay Shrivastava
Hii CharuDutt
I have created a search field.. which showing accounts name..
I have also created accordian .. which showing accounts name and details..
now i want search field to work on accordian..


<lightning:card title="Filtered Accounts">
        <div class="search-field">
            <lightning:input aura:id="nameFilter" label="Filter names" onchange="{!c.handleNameFilterChange}" />
        </div>
        <div class="results">
            <aura:if isTrue="{!v.Accounts.length > 0}">
                <p class="has-results">
                    Showing {!v.Accounts.length} accounts(s):
                </p>
                <ol class="slds-list_dotted">
                    <aura:iteration items="{!v.Accounts}" var="Account">
                        <li>
                            <a class="Account-name" onclick="{!c.handleClickAccountName}" data-sfid="{!Account.Id}">
                                {!Account.Name}
                            </a>
                        </li>
                    </aura:iteration>
                </ol>
                <aura:set attribute="else">
                    <p class="no-results">Nothing to show.</p>
                </aura:set>
            </aura:if>
        </div>
    </lightning:card>
User-added imageUser-added image


i want search field on accourdian
 
 
CharuDuttCharuDutt
Hii  Akshay Shrivastava
Try The Below Code  Changes Made By Me Are In BOLD
<aura:component controller="AccRelatedConC"
   implements="flexipage:availableForRecordHome,force:hasRecordId" access="global"  >
   <aura:attribute name="accList" type="List"/>
   <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
   <aura:attribute name="activeSections" type="List" />

   <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"/>

   <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 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.SearchHelper( component)
    },
        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.SearchHelper(component, event);
        
    },
})

HELPER
({

    SearchHelper : function(component, event, helper) {
        var action = component.get('c.fetchAcc');
         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);
    }
});


APEX
public class AccRelatedConC {
  @AuraEnabled(cacheable=true)
    public static List<Account> fetchAcc (String searchKey){
        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';
        }system.debug(Database.query( query ));
         return Database.query( query );
        
    }  
}
Please Mark It As Best Answer If It Helps
Thank You!

 
This was selected as the best answer