Using Component.find vs Document.getElementById to Dynamically Hide or Show Content in Lightning Components

Business Scenario: To dynamically Show or Hide content in Lightning Components.

Using "Document.getElementById"

  • Below are Component and Controller code to show or hide content by using Document.getElementById

  • HideShow.cmp
    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
        <!--Set component attribute-->
        <aura:attribute name="valSet" type="Set"/>
        
        <center>
            <!--Button to display Set values-->
            <lightning:button onclick="{!c.getSetValues}" label="Set Values"/>
        </center>
        
        <!--Construct HTML Table using SLDS-->
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout">
        <thead>
          <tr class="slds-text-heading--label">
            <th scope="col"><div class="slds-truncate" title="ID">SET DATA</div></th>
          </tr>
        </thead>    
        <tbody id="bodyId">
          <aura:iteration items="{!v.valSet}" var="s">
            <tr>
              <td><div class="slds-truncate" title="{!s}">{!s}</div></td>
            </tr>
          </aura:iteration>
        </tbody>
      </table>
    </aura:component>
    

    HideShow.js
    /** Client-side Controller **/
    ({
        getSetValues: function(cmp) {
            // Get dom id for the table body
            var x = document.getElementById("bodyId");
            
            // Variable to input Set values manually
            var tempSet = ['SetValue1', 'SetValue2', 'SetValue3', 'SetValue4', 'SetValue5', 'SetValue6'];
            
            // Assign above variable to the Set attribute
            cmp.set("v.valSet", tempSet);
            
            // Below logic to show/hide table body based on user click        
            if (x.style.display === "block") {
                x.style.display = "none";
            } else {
                x.style.display = "block";
            }          
        }
    })
    

    Output:


  • Here "Document.getElementById" works fine when we have unique DOM element with the Id that is being used for reference. Now lets say if we have two DOM elements with the same Id and in this case the "Document.getElementById" will only work for the last referenced DOM element!

  • Using "Component.find"

  • Below are Component, Controller, and Style code to show or hide content by using Component.find

  • HideShow.cmp
    <aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,force:lightningQuickAction" access="global" >
        <!--Set component attribute-->
        <aura:attribute name="valSet" type="Set"/>
        <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
        
        <center>
            <!--Button to display Set values-->
            <lightning:button onclick="{!c.toggleText}" label="Set Values"/>
        </center>
        
        <!--Construct HTML Table using SLDS-->
        <table class="slds-table slds-table--bordered slds-table--striped slds-table--cell-buffer slds-table--fixed-layout" aura:id="bodyId">
        <thead>
          <tr class="slds-text-heading--label">
            <th scope="col"><div class="slds-truncate" title="ID">SET DATA</div></th>
          </tr>
        </thead>    
        <tbody>
          <aura:iteration items="{!v.valSet}" var="s">
            <tr>
              <td><div class="slds-truncate" title="{!s}">{!s}</div></td>
            </tr>
          </aura:iteration>
        </tbody>
      </table>
    </aura:component>
    

    HideShow.js
    /** Client-side Controller **/
    ({
        doInit: function(cmp) {
            // Variable to input Set values manually
            var tempSet = ['SetValue1', 'SetValue2', 'SetValue3', 'SetValue4', 'SetValue5', 'SetValue6'];
            
            // Assign above variable to the Set attribute
            cmp.set("v.valSet", tempSet);
        },
        toggleText: function(cmp) {                
            var toggleText = cmp.find("bodyId");
            $A.util.toggleClass(toggleText, "toggle");
        }
    })
    

    HideShow.css
    /*toggleCss.css*/
    .THIS.toggle {
        display: none;
    }
    

    Output:

  • Here "Component.find" is Salesforce provided standard way of referring component Id and it works fine no matter how may other component elements have same Id!

  • Reference Links:
  • Salesforce Documentation Link for Dynamically Showing or Hiding Markup.
  • Also refer aura:if documentations for dynamic toggling content in Lightning Components.

  • Thank you!

    Comments

    Popular posts from this blog

    Displaying Toast Message from Modal in Lightning Components

    Lightning Component to display dynamic sObject data

    Lightning RecordForm - An enhanced Lightning Data Service