Data Masking In Lightning Component, Show Data in Table on MouseOver,mask

Sometimes we have some sensitive data in our data table column ,such as PIN numbers,password some confrontational details. and we don’t want to show it every time on screen. so for this we can hide this sensitve fields details in Data table by mask this field column.and when the user do some event like mouseover on the particular field column on data table then we can show the field value and on the mouseout again we can masked the field data.

Today In this post we are going to create a sample custom data table with mask the sensitive data in lightning component. and when the user will mouseover on the mask column we will show the data and on the mouseout we will hide the data on table.

From developer console >> file >> new >> Apex Class

dataMaskingCtrl.apxc

public class dataMaskingCtrl {
  @AuraEnabled
    public static List<Contact> initMethod(){
        return [SELECT Name, Email, Department,LeadSource from contact Limit 25];
    }
}

From developer console >> file >> new >> Lightning Component

dataMasking.cmp

<aura:component controller="dataMaskingCtrl">
  <!--aura init handler , call js "loadData" function on component load, and display contact data on table-->   
  <aura:handler name="init" value="{!this}" action="{!c.loadData}"/>
 
 <!--Declare Attributes-->  
  <aura:attribute name="contactList" type="List"/>

  <div class="slds-p-around--large">
    <!--https://www.lightningdesignsystem.com/components/data-tables/-->
    <table class="slds-table slds-table_bordered slds-table_cell-buffe">
      <thead>
        <tr class="slds-text-title_caps">
          <th scope="col">
            <div class="slds-truncate" title="Name">Name</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Email">Email</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="Department">Department</div>
          </th>
          <th scope="col">
            <div class="slds-truncate" title="First Name">Lead Source</div>
          </th>
        </tr>
      </thead>
      <!--table body start, 
        Iterate contact list as a <tr>
        -->
      <tbody>
        <aura:iteration items="{!v.contactList}" var="con">
          <tr>
            <th scope="row">
              <div class="slds-truncate" >
                <ui:outputText value="{!con.Name}" />
              </div>
            </th>
            <th scope="row">
              <div class="slds-truncate" >
                <ui:outputText value="********************" title="{!con.Email}" mouseout="{!c.onMouseOut}" mouseover="{!c.onMouseOver}"/>
              </div>
            </th>
            <th scope="row">
              <div class="slds-truncate">
                <ui:outputText value="{!con.Department}" />
              </div>
            </th>
            <th scope="row">
              <div class="slds-truncate" >
                <ui:outputText value="{!con.LeadSource}" />
              </div>
            </th>
          </tr>
        </aura:iteration>
      </tbody>
    </table>
  </div>
</aura:component>

see code comments.

dataMaskingController.js

({
    loadData: function(component, event, helper) {
        //call apex class method
        var action = component.get('c.initMethod');
        action.setCallback(this, function(response) {
            //store state of response
            var state = response.getState();
            if (state === "SUCCESS") {
                //set response value in contactList attribute on component.
                var responseData = response.getReturnValue();
                component.set('v.contactList', responseData);
            }
        });
        $A.enqueueAction(action);
    },

    // show data value on mouse hover in table column 
    onMouseOver: function(component, event, helper) {
        // find the current element (column source) by event 
        var eventGetSource = event.getSource();
        // get the field actual value which is store in title, 
        var eventSourceVal = eventGetSource.get("v.title");
        // set the value of column with title on mouse over  
        eventGetSource.set("v.value", eventSourceVal);
    },

    // hide data value on mouse out in table column
    onMouseOut: function(component, event, helper) {
        // find the current element (column source) by event 
        var eventGetSource = event.getSource();
        //mask or hide data again on mouse out with ****..
        eventGetSource.set("v.value", '********************');
    },
})

See Code Comments

From developer console >> file >> new >> Lightning Application

demo.app [Lightning Application]

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

Output Data Mask:

Like our facebook page for new post updates. & Don’t forget to bookmark this site for your future reference.

if you have any suggestions or issue with it, you can post in comment box 🙂

Dynamic Data Masking In Lightning Component, Show Data in Table on MouseOver