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

[vijayk3327]

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

→ Get source code live demo link:-

Step 1:- Create Lightning Application : courseApp.app

<aura:application extends="force:slds"> <c:coursesCmp/> </aura:application>

Step 2:- Create Lightning Component : courseCmp.cmp

` <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

({ doInit:function(component, event, helper){ helper.courseListItemsView(component); helper.getCurrentUser(component); }, })

Step 4:- Create Lightning Component : courseCmpHelper.js

` ({

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

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

→ Get source code live demo link:-