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

Lightning Component

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.

data masking salesforce lightning component mask

 

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

dataMaskingCtrl.apxc

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

dataMasking.cmp

  • see code comments.
dataMaskingController.js

  • See Code Comments
From developer console >> file >> new >> Lightning Application
demo.app [Lightning Application]

Output Data Mask:

data masking salesforce lightning component 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 🙂

 

(Visited 2,603 times, 1 visits today)

Leave a Reply