w3web.net -- Adding custom style in lightning component

Adding a Custom Style CSS for Specific Role & Profile in Salesforce

Hey guys, today in this post we are going to learn about How to Apply a Custom Style CSS for Specific Role & Profile in Lightning Component.

Real time scenarios:- Add a custom style CSS if User Role is “Sales Manager East” and Profile Name is “Custom: Support Profile” then the value of status color has to be changed into red otherwise It has to be blue color.

Files we used in this post example:-

courseApp.app Lightning Application It is used for call the component to preview on browser.
courseCmp.cmp Lightning Component It is used for create a table for display the fields of sObjects.
courseCmpController.js JavaScript Controller File It is used for communicate to server side apex method and fetch the value from init fuction.
courseCmpHelper.js JavaScript Helper File Helper function call in to javascript init function.
newStudentCtr.apxc Apex Class Controller It is used for match the user role and user profile name from database.

Custom Object:- Course__c

Custom Object Fields:-


Picklist Value:-


Custom Object and their fields

We retrieve custom field of sObject and display on the table.


Note:- Custom sObject >> Course__c and there Custom Fields

You need to change custom sObject and fields name with your custom sObject and fields name.

Also You need to change Role and Profile name as per your requirement.

Step 1:- Create Lightning Application : courseApp.app

From Developer Console >> File >> New >> Lightning Application

courseApp.app [Component Application File]

Step 2:- Create Lightning Component : courseCmp.cmp

From Developer Console >> File >> New >> Lightning Component

courseCmp.cmp [Lightning Component File]

Step 3:- Create Lightning Component : courseCmpController.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Controller

courseCmpController.js [JavaScript Controller]

Step 4:- Create Lightning Component : courseCmpHelper.js

From Developer Console >> File >> New >> Lightning Component >> JavaScript Helper

courseCmpHelper.js [JavaScript Helper File]

w3web.net -- helper function in lightning component

Step 5:- Create Lightning Application : newStudentCtr.apxc

From Developer Console >> File >> New >> Apex Class

newStudentCtr.apxc [Apex Class Controller]

Other related post that would you like to learn…

Leave a Comment