lightning:accordionSection row actions
Sample example to show how to use the lightning:accordionSection row actions whihc enables a custom menu implementation. Actions are displayed to the right of the section title.
Apex Class
|
1 2 3 4 5 6 7 8 9 10 11 12 |
public class AccountContactList { @AuraEnabled public static List<Account> getAllAccounts(){ return [Select Id , Name , (Select Id , Name,Email from Contacts) from Account] ; } @AuraEnabled public static void deleteAccount(String accId){ delete [Select Id , Name , (Select Id , Name,Email from Contacts) from Account where id=:accId] ; } } |
Lightning Component
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,flexipage:availableForRecordHome,force:hasRecordId,force:hasSObjectName" access="global" controller="AccountContactList"> <aura:attribute name="accounts" type="Account[]"/> <aura:attribute name="currentId" type="String"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <lightning:accordion aura:id="accordion" onsectiontoggle="{! c.onsectiontoggle }"> <aura:iteration items="{!v.accounts}" var="obj"> <lightning:accordionSection name="{!obj.Id}" label="{!obj.Name}"> <aura:set attribute="body"> <aura:iteration items="{!obj.Contacts}" var="con"> <p>{!con.Name}</p> <p>{!con.Email}</p> </aura:iteration> </aura:set> <aura:set attribute="actions"> <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu"> <lightning:menuItem value="View_Account" label="View Account" /> <lightning:menuItem value="DeleteAccount" label="Delete Account" /> </lightning:buttonMenu> </aura:set> </lightning:accordionSection> </aura:iteration> </lightning:accordion> </aura:component> |
Controller.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
({ doInit : function(component, event, helper) { var action = component.get("c.getAllAccounts"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { console.log(response.getReturnValue()); component.set("v.accounts", response.getReturnValue()); } }); $A.enqueueAction(action); }, onsectiontoggle: function (cmp ,event){ var val = cmp.find("accordion").get('v.activeSectionName') ; console.log('val'+val); cmp.set("v.currentId" ,val) ; }, handleSelect: function (cmp, event) { var selectedMenuItemValue = event.getParam("value"); console.log('selectedMenuItemValue'+selectedMenuItemValue); var currentId = cmp.get("v.currentId"); console.log('currentId'+currentId); switch (selectedMenuItemValue) { case 'View_Account': var urlEvent = $A.get("e.force:navigateToURL"); urlEvent.setParams({ "url": "/"+currentId }); urlEvent.fire(); break; case 'DeleteAccount': var action = cmp.get("c.deleteAccount"); action.setParams({accId:currentId}); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { $A.get('e.force:refreshView').fire(); } }); $A.enqueueAction(action); break; } }, }) |
Understanding code
1. The below code is used to set the row level actions
|
1 2 3 4 5 6 |
<aura:set attribute="actions"> <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu"> <lightning:menuItem value="View_Account" label="View Account" /> <lightning:menuItem value="DeleteAccount" label="Delete Account" /> </lightning:buttonMenu> </aura:set> |
2. On row click of the button menu, we are handling the on the select event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
handleSelect: function (cmp, event) { var selectedMenuItemValue = event.getParam("value"); console.log('selectedMenuItemValue'+selectedMenuItemValue); var currentId = cmp.get("v.currentId"); console.log('currentId'+currentId); switch (selectedMenuItemValue) { case 'View_Account': var urlEvent = $A.get("e.force:navigateToURL"); urlEvent.setParams({ "url": "/"+currentId }); urlEvent.fire(); break; case 'DeleteAccount': var action = cmp.get("c.deleteAccount"); action.setParams({accId:currentId}); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { $A.get('e.force:refreshView').fire(); } }); $A.enqueueAction(action); break; } }, |
