+ Start a Discussion
Dharmendra Kumar 60Dharmendra Kumar 60 

How to perform rowaction using iteration component

I am trying to build a custom component using <aura:iteration>  and add the rowaction "Add" and "View" ,which will take the user to "Add New Campaign member" and 'View related Campaign Member " respectively for each campaign record. Something like this -

User-added image
Server Side Controller :-

public class MarketingCampaignController {
    @AuraEnabled
    public static List<Campaign> CampaignsSOQL(string searchString) {
        String queryString = 'Select id, name,type,status from Campaign ';
        if(searchString!=null && searchString!=''){
            searchString = '%'+string.escapeSingleQuotes(searchString)+'%'; 
            queryString = queryString+ 'where Name Like:searchString';
        }
        queryString = queryString + ' Limit 10000';
        List<Campaign> campList = database.query(queryString);
        
        return campList;
    }
}

Component :-

<aura:component controller="MarketingCampaignController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <aura:attribute name="campList" type="Object"/>
     <aura:attribute name="accSearchValue" type="String" default=""/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <div class="slds-card">
        <div class="slds-card__header slds-grid">
            <header class="slds-media slds-media_center slds-has-flexi-truncate">
                <div class="slds-media__figure">
                    <lightning:Icon iconName="standard:account"  size="Medium" 
                             class="slds-icon slds-input__icon slds-input__icon_right " />
                </div>
                <div class="slds-media__body">
                    <h2><span class="slds-text-heading_medium">Marketing Campaigns</span></h2>
                </div>
            </header>
            <div class="slds-no-flex">
                <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_right">
                    <lightning:input value="{!v.accSearchValue}" placeholder="Search" type="text" label="" name="Campaign Search" onchange="{!c.doInit}"/>
                </div>        
            </div>
        </div>
        
        <table class="slds-table slds-table_bordered slds-table_cell-buffer">       
    <thead>
        <tr class="slds-text-title_caps"> 
            <th scope="col">
                <div class="slds-truncate" title="Name"></div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Name"></div>
            </th>           
           <th scope="col">
                <div class="slds-truncate" title="Name">Name</div>
            </th>       
            <th scope="col">
                <div class="slds-truncate" title="Approver">Type</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Approver">StartDate</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Approver">Status</div>
            </th>   
        </tr>
    </thead>
    <tbody> 
        <!--### display all records of searchResult attribute by aura:iteration ###-->
        <aura:iteration items="{!v.campList}" var="camp" indexVar="count" >
            <tr>
                <td>
            {!count + 1}
        </td>       
           <td>
                 <div class="slds-align_absolute-center slds-p-top_small">
                <lightning:button variant="success"  label="View" title="Brand action" onclick="{!c.view}" />
            &nbsp;&nbsp;<lightning:button variant="success" label="Add" title="Brand action" onclick="{!c.Add}" />
            </div>
                </td>
               <td >
                    <div class="slds-truncate">{!camp.Name}</div>
                </td>
                
                <td>
                    <div class="slds-truncate">{!camp.Type}</div>
                </td>
                <td >
                    <div class="slds-truncate">{!camp.StartDate}</div>
                </td>
                <td>
                    <div class="slds-truncate">{!camp.Status}</div>
                </td> 
            </tr>
        </aura:iteration>     
    </tbody>
</table>
        </div>
        <footer class="slds-card__footer"></footer>              
</aura:component>


How to implement those Rowaction buttons ? Kindly help.
Rameshwar gaurRameshwar gaur
Make a Modal Popup Box
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
     
    <div class="slds-m-around_xx-large">
        
        <!--Use aura:if tag to display/hide popup based on isModalOpen value-->  
        <aura:if isTrue="{!v.isModalOpen}">
             
            <!-- Modal/Popup Box starts here-->
            <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <!-- Modal/Popup Box Header Starts here-->
                    <header class="slds-modal__header">
                        <lightning:buttonIcon iconName="utility:close"
                                              onclick="{! c.closeModel }"
                                              alternativeText="close"
                                              variant="bare-inverse"
                                              class="slds-modal__close"/>
                        <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Modal/PopUp Box</h2>
                    </header>
                    <!--Modal/Popup Box Body Starts here-->
                    <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                        <p><b>Put Your View Code  Here</b>
                        </p>
                    </div>
                    <!--Modal/Popup Box Footer Starts here-->
                    <footer class="slds-modal__footer">
                        <lightning:button variant="neutral"
                                          label="Cancel"
                                          title="Cancel"
                                          onclick="{! c.closeModel }"/>
                        <lightning:button variant="brand"
                                          label="OK"
                                          title="OK"
                                          onclick="{!c.submitDetails}"/>
                    </footer>
                </div>
            </section>
            <div class="slds-backdrop slds-backdrop_open"></div>
        </aura:if>
    </div>

And JS 
view: function(component, event, helper) {
      // Set isModalOpen attribute to true
      component.set("v.isModalOpen", true);
   },
  
   closeModel: function(component, event, helper) {
      // Set isModalOpen attribute to false  
      component.set("v.isModalOpen", false);
   },

Please refer to this link if need more help http://www.sfdcpoint.com/salesforce/modal-popup-lightning-component-salesforce/

I Hope this solve Your Problem.
Rameshwar gaurRameshwar gaur
Also  pass Id in your code too
<lightning:button variant="success"  label="View" title="Brand action" value="{!camp.Id}" onclick="{!c.view}" />
<lightning:button variant="success" label="Add" title="Brand action" value="{!camp.Id}"  onclick="{!c.Add}" />

Use it to call record from your org using js and apex.
Dharmendra Kumar 60Dharmendra Kumar 60
Hi Rameshwar,
Thanks for your response. I have fixed this issue .
Can we have filtering in Lightning datatable/iteration similar to the filtering capacity in excel ? If you have any idea , please help.
 
Rameshwar gaurRameshwar gaur
Hi Dharmendra 
Yes you can add filter in Lightning datatable/itration.Take a look at my code on account object which filter on name and id on click.
Component
<aura:component controller="Account_sorting">
    <aura:attribute name="recordId" type="Account" />
    <aura:attribute name="sort" type="boolean" default="false"/>
    <aura:attribute name="account" type="List"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
     
    
    <!-- Use the Apex model and controller to fetch server side data -->
    <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer">
        
        <thead>          
            <tr class="slds-text-heading--small"> 
                <!-- Use the Onclick for call function -->
               <th scope="col" onclick="{!c.sortid}" Name="ID"><span class="slds-truncate">Account Id</span></th>
                <th scope="col" onclick="{!c.sortname}" Name="Name"><span class="slds-truncate">Account Name</span></th>
                <th scope="col" ><span class="slds-truncate">Industry</span></th>
                <th scope="col" onclick="{!c.sortphone}" Name="Phone"><span class="slds-truncate">Phone</span></th>
                <th scope="col" ><span class="slds-truncate">Website</span></th>

                
            </tr>
            
        </thead>
        
        
        <tbody>
            <aura:iteration items="{!v.account}" var="account">
                <tr>
                    <th scope="row">{!account.Id}</th>
                    <td >{!account.Name}</td>                      
                    <td>{!account.Industry}</td>                
                    <td>{!account.Phone}</td>
                    <td>{!account.Website}</td>                     
                </tr>
            </aura:iteration>
        </tbody>
    </table>
    
</aura:component>

Controler
({
    doInit : function(component, event, helper) {
        helper.getAccount(component);
    },
     sortid : function(component, event, helper) {
        helper.getsortedid(component, event);
    }
    ,
     sortname : function(component, event, helper) {
        helper.getsortedname(component, event);
    }
    ,
     sortphone : function(component, event, helper) {
        helper.getsortedphone(component, event);
    }
})

Helper
({
    getAccount : function(component) {
        var action = component.get("c.getAccount");
        
        //Set up the callback
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    },
    getsortedid : function(component, event) {
        var action = component.get("c.getsorted");
        if(component.get("v.sort") == false)
        {
            action.setParams({ str : 'ID',order:'ASC' }); 
            component.set("v.sort",true);
        }
        else
        {
            action.setParams({ str : 'ID',order:'DESC' }); 
            component.set("v.sort",false);
        }
       
        
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    },
        getsortedname : function(component, event) {
        var action = component.get("c.getsorted");
         if(component.get("v.sort") == false)
        {
            action.setParams({ str : 'Name',order:'ASC' }); 
            component.set("v.sort",true);
        }
        else
        {
            action.setParams({ str : 'Name',order:'DESC' }); 
            component.set("v.sort",false);
        }
        
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    },
        getsortedphone : function(component, event) {
        var action = component.get("c.getsorted");
         if(component.get("v.sort") == false)
        {
            action.setParams({ str : 'Phone',order:'ASC' }); 
            component.set("v.sort",true);
        }
        else
        {
            action.setParams({ str : 'phone',order:'DESC' }); 
            component.set("v.sort",false);
        }
        
        var self = this;
        action.setCallback(this, function(actionResult) {
            var state = actionResult.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.account", actionResult.getReturnValue());
            }            
        });
        $A.enqueueAction(action);
    }
   
})

Apex
public class Account_sorting {
	@AuraEnabled
    public list<Account> accountlist {get;set;}
    @AuraEnabled
   public static List<Account> getAccount() {
      list<Account> accountlist = [SELECT Id, Name, BillingState,Website, Phone, Industry from Account LIMIT 10];
       return accountlist;
   }
     @AuraEnabled
   public static List<Account> getsorted(String str,String order) {
       String query='SELECT Id, Name, BillingState,Website, Phone, Industry from Account ORDER BY '+str+' '+order+' NULLS LAST LIMIT 20 ';
      list<Account> accountlist = database.query(query);
       return accountlist;
   }
}

You can also do that for Lightning Datatable.Here is a link where you find the code for that and instruction.
http://sfdcmonkey.com/2019/03/06/implement-sorting-salesforce-lightning-datatable/

Hope this help you.
 
Dharmendra Kumar 60Dharmendra Kumar 60
Hi Rameshwar,
Thanks for your input . This implements sorting capability in the different columns.
I am looking for filtering cabability in Lightning datatable/iteration as we do row filtering by values in excel .Please help you you have any idea.