Activity Forums Salesforce® Discussions How to open a div on a particular row in a Salesforce lightning table list?

  • Deepak

    Member
    December 6, 2019 at 8:35 am

    Step 1 : Create Apex Controller : dataTableCtrl.apxc
    From Developer Console >> File >> New >> Apex Class
    /* sfdcmonkey.com || Date 01/31/2018 || API Version 41.0 */
    public class tableWithManageCtrl {
    @AuraEnabled
    public static List < account > fetchAccount() {

    List < Account > returnList = new List < Account > ();

    for (Account acc: [select id, Name, Type, Industry, Phone, Fax from account LIMIT 10]) {
    returnList.add(acc);
    }
    return returnList;
    }
    }

    Step 2 : Create Child Lightning Component  : auraIfContains.cmp
    The purpose to create this child component is, create a Alternate/Workaround for contains() function in ‘aura:if’ Condition in Lightning Component.

    check following post on this step 2 workaround :

    Alternate/Workaround for contains() function in aura:if Condition in Lightning Component

    <aura:component >
    <aura:handler name="init" value="{!this}" access="global" action="{!c.doInit}" />
    <aura:attribute name="list" type="string[]" />
    <aura:attribute name="element" type="String" />
    <aura:attribute name="condition" type="Boolean" />
    <aura:handler name="change" value="{!v.list}" action="{!c.doInit}"/>

    <aura:if isTrue="{!v.condition}">
    {!v.body}
    </aura:if>
    </aura:component>

    auraIfContainsController.js

    ({
    doInit: function(component, event, helper) {
    var getList = component.get('v.list');
    var getElement = component.get('v.element');
    var getElementIndex = getList.indexOf(getElement);

    if(getElementIndex != -1){
    component.set('v.condition',true);
    }else{
    component.set('v.condition',false);
    }
    },
    })

    Step 3 : Create Parent Lightning Component  : dataTableWithDynamicCol.cmp

    <!-- sfdcmonkey.com || Date 01/31/2017 || API Version 41.0 || Parent Component-->
    <aura:component controller="tableWithManageCtrl" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
    <aura:attribute name="searchResult" type="List" description="use for store and display account list return from server"/>
    <aura:attribute name="options"
    type="List"
    default="[
    {'label': 'Type', 'value': 'Type'},
    {'label': 'Industry', 'value': 'Industry'},
    {'label': 'Phone', 'value': 'Phone'},
    {'label': 'Fax', 'value': 'Fax'},
    ]"/>

    <aura:attribute name="selectedValues" type="List" default="Name"/>
    <aura:attribute name="isOpen" type="boolean" default="false"/>

    <!--Use aura:if tag to display Model Box, on the bese of conditions. [isOpen boolean attribute] -->
    <aura:if isTrue="{!v.isOpen}">
    <!--###### MODAL BOX Start From Here ######-->
    <div role="dialog" tabindex="-1" aria-labelledby="header99" class="slds-modal slds-fade-in-open ">
    <div class="slds-modal__container">
    <!-- ###### MODAL BOX HEADER Part Start From Here ######-->
    <div class="slds-modal__header">
    <button class="slds-button slds-modal__close slds-button--icon-inverse" title="Close" onclick="{!c.closeModel}">
    X
    <span class="slds-assistive-text">Close</span>
    </button>
    <h2 id="header99" class="slds-text-heading--medium">Manage Table Columns</h2>
    </div>
    <!--###### MODAL BOX BODY Part Start From Here ######-->
    <div class="slds-modal__content slds-p-around--medium">
    <div class="slds-p-around_medium">
    <lightning:checkboxGroup aura:id="mygroup"
    name="checkboxGroup"
    label="Manage Cloumn"
    options="{! v.options }"
    value="{! v.selectedValues }"
    />
    </div>
    </div>
    <!--###### MODAL BOX FOOTER Part Start From Here ######-->
    <div class="slds-modal__footer">
    <button class="slds-button slds-button--neutral" onclick="{!c.closeModel}" >Done</button>
    </div>
    </div>
    </div>
    <div class="slds-backdrop slds-backdrop--open"></div>
    <!--###### MODAL BOX Part END Here ######-->
    </aura:if>

    <div class="slds-m-around--large">
    <!--###### lightning button icon for show/hide columns popup ######-->
    <div class="slds-clearfix">
    <div class="slds-float_right">
    <lightning:buttonIcon size="large" onclick="{!c.openModel}" iconName="utility:matrix" variant="bare" title="manage table columns" alternativeText="Settings" iconClass="dark"/>
    </div>
    </div>

    <br/><br/>
    <!--###### lightning data table start ######-->
    <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="Account Name">Account Name</div>
    </th>
    <!--###### the value of element attribute in child component must be same as checkboxGroup value  ######-->
    <c:auraIfContains list="{!v.selectedValues}"  element="Type">
    <th scope="col"><div class="slds-truncate" title="Type">Type</div></th>
    </c:auraIfContains>
    <c:auraIfContains list="{!v.selectedValues}"  element="Industry">
    <th scope="col"><div class="slds-truncate" title="Industry">Industry</div></th>
    </c:auraIfContains>
    <c:auraIfContains list="{!v.selectedValues}"  element="Phone">
    <th scope="col"><div class="slds-truncate" title="Phone">Phone</div></th>
    </c:auraIfContains>
    <c:auraIfContains list="{!v.selectedValues}"  element="Fax">
    <th scope="col"><div class="slds-truncate" title="Fax">Fax</div></th>
    </c:auraIfContains>
    </tr>
    </thead>
    <tbody>

    <!--### display all records of searchResult attribute by aura:iteration ###-->
    <aura:iteration items="{!v.searchResult}" var="acc">
    <tr>

    <td><div class="slds-truncate">{!acc.Name}</div></td>
    <c:auraIfContains list="{!v.selectedValues}"  element="Type">
    <td><div class="slds-truncate">{!acc.Type}</div></td>
    </c:auraIfContains>
    <c:auraIfContains list="{!v.selectedValues}"  element="Industry">
    <td><div class="slds-truncate">{!acc.Industry}</div></td>
    </c:auraIfContains>
    <c:auraIfContains list="{!v.selectedValues}"  element="Phone">
    <td><div class="slds-truncate">{!acc.Phone}</div></td>
    </c:auraIfContains>
    <c:auraIfContains list="{!v.selectedValues}"  element="Fax">
    <td><div class="slds-truncate">{!acc.Fax}</div></td>
    </c:auraIfContains>
    </tr>
    </aura:iteration>
    </tbody>
    </table>
    </div>

    </aura:component>

    check code comments.
    dataTableWithDynamicColController.js

    ({
    doInit: function(component, event, helper) {
    var action = component.get("c.fetchAccount");
    action.setCallback(this, function(response) {
    var state = response.getState();
    if (state === "SUCCESS") {
    var storeResponse = response.getReturnValue();
    // set searchResult list with return value from server.
    component.set("v.searchResult", storeResponse);
    }

    });
    $A.enqueueAction(action);
    },
    openModel: function(component, event, helper) {
    // for Display Model,set the "isOpen" attribute to "true"
    component.set("v.isOpen", true);
    },

    closeModel: function(component, event, helper) {
    // for Hide/Close Model,set the "isOpen" attribute to "Fasle"
    component.set("v.isOpen", false);
    },
    })

    Step 4 : Create Lightning Application for Testing: demo.app
    From Developer Console >> File >> New >> Lightning Application

    <aura:application extends="force:slds">
    <c:dataTableWithDynamicCol/>
    <!-- here c: is org. default namespace prefix-->
    </aura:application>

    Output :

Log In to reply.

Popular Salesforce Blogs

Popular Salesforce Videos