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

Vijay Kumar
3 min readOct 22, 2020
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.appLightning ApplicationIt is used for call the component to preview on browser.courseCmp.cmpLightning ComponentIt is used for create a table for display the fields of sObjects.courseCmpController.jsJavaScript Controller FileIt is used for communicate to server side apex method and fetch the value from init fuction.courseCmpHelper.jsJavaScript Helper FileHelper function call in to javascript init function.newStudentCtr.apxcApex Class ControllerIt is used for match the user role and user profile name from database.

Custom Object:- Course__c

Custom Object Fields:-

Name,
Duration__c,
Fees__c,
Status__c

Picklist Value:-

Active,
Inactive

Custom Object and their fields

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

Live Demo

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]

<aura:application extends=”force:slds”>

<c:coursesCmp/>

</aura:application>

Step 2:- Create Lightning Component : courseCmp.cmp

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

courseCmp.cmp [Lightning Component File]

<aura:component controller=”newStudentCtr” implements=”force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:actionOverride” access=”global” >

<aura:attribute name=”coursesObj” type=”Course__c” default=”{‘sobjectType’:’Course__c’}”/>

<aura:handler name=”init” value=”{!this}” action=”{!c.doInit}”/>

<aura:attribute name=”courseListItems” type=”Course__c[]”/>

<aura:attribute name=”profileRole” type=”boolean” default=”false”/>

<div class=”slds”>

<div class=”slds-p-horizontal — medium”>

<table class=”slds-table slds-table_col-bordered slds-table_bordered “>

<thead>

<tr>

<th>Course Name</th>

<th>Duration</th>

<th>Fees</th>

<th>Status</th>

</tr>

</thead>

<tbody>

<aura:iteration items=”{!v.courseListItems}” var=”courseVar”>

<tr>

<td>{!courseVar.Name}</td>

<td>{!courseVar.Duration__c}</td>

<td>{!courseVar.Fees__c}</td>

<td>

<aura:if isTrue=”{!v.profileRole}”>

<span style=”color:red;”>{!courseVar.Status__c}</span>

<aura:set attribute=”else”>

<span style=”color:blue;”>{!courseVar.Status__c}</span>

</aura:set>

</aura:if>

</td>

</tr>

</aura:iteration>

</tbody>

</table>

</div>

</div>

</aura:component>

Step 3:- Create Lightning Component : courseCmpController.js

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

courseCmpController.js [JavaScript Controller]

({

doInit:function(component, event, helper){

helper.courseListItemsView(component);

helper.getCurrentUser(component);

},

})

Step 4:- Create Lightning Component : courseCmpHelper.js

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

courseCmpHelper.js [JavaScript Helper File]

({

courseListItemsView : function(component, event, helper) {

var action = component.get(‘c.studentCourseMethd’);

var courseListItems= component.get(‘v.courseListItems’);

action.setCallback(this, function(response){

var state = response.getState();

if(state == ‘SUCCESS’){

var result = response.getReturnValue();

component.set(‘v.courseListItems’, result);

}

});

$A.enqueueAction(action);

},

getCurrentUser:function(component,event,helper){

var action = component.get(‘c.userProfileRole’);

action.setCallback(this, function(response){

var state = response.getState();

if(state == ‘SUCCESS’){

var result = response.getReturnValue();

component.set(“v.profileRole”,result);

}

});

$A.enqueueAction(action);

},

})

Step 5:- Create Lightning Application : newStudentCtr.apxc

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

newStudentCtr.apxc [Apex Class Controller]

public class newStudentCtr {

@AuraEnabled

public static List<Course__c> studentCourseMethd(){

List<Course__c> listViewStudentObj = new List<Course__c>();

for(Course__c studentList:[Select Id, Name, Duration__c,Fees__c,Status__c From Course__c ]){

listViewStudentObj.add(studentList);

}

return listViewStudentObj;

}

@AuraEnabled

public static boolean userProfileRole(){

User usr= [SELECT Id, UserRole.Name,Profile.Name from user WHERE Id=: userInfo.getUserId() And UserRoleId!=null];

system.debug(‘usr#### ‘ + usr);

if(usr.UserRole.Name==’Sales Manager East’ && usr.Profile.Name==’Custom: Support Profile’) {

return true;

}else{return false;}

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

No responses yet

Write a response