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;}
