Adding a Custom Style CSS for Specific Role & Profile in Salesforce | how to apply CSS Style based on Specific Role/Profile in Salesforce lightning component

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.

Don’t forget to check out:- How to add custom style css and change the text color & text size through JavaScript in lightning web component – LWC Click Here For More Information

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

👉 Download Free Ebook →

👉 Get Free Course →

Challenges in your career

🎯 If You Are Facing Any Of These 6 Challenges in your career.

Learn Salesforce Development
Career Confusion
No Interview Call
Low Salary
No Promotion/Growth
No Finding New Job Opportunity
Why you stucking from past so many years in same company?

You can download file directly from github by Click Here.

Other related post that would you like to learn in Salesforce

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

<div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">

```
 
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/05/thumbsUpLike.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:16px; font-style:italic; display:inline-block; margin-right:5px;">Don't forget to check out:-</span><a href="https://www.w3web.net/" target="_blank" rel="noopener noreferrer" style="text-decoration:none;" data-aura-rendered-by="440:0">An easy way to learn step-by-step online free Salesforce tutorial, To know more Click  <span style="color:#ff8000; font-size:18px;" data-aura-rendered-by="442:0">Here..</span></a></strong></p>

```
 
```
```
            <br/><br/>
```

            <p data-aura-rendered-by="435:0"><img src="https://www.w3web.net/wp-content/uploads/2021/07/tickMarkIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;" data-aura-rendered-by="436:0"><strong data-aura-rendered-by="437:0"><span style="font-size:17px; font-style:italic; display:inline-block; margin-right:5px; color:rgb(255 128 0);">You May Also Like →</span> </strong></p>

            <div style="display:block; overflow:hidden;">

                <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/lwc-get-set-lightning-checkbox-value/" target="_blank" rel="noopener noreferrer">How to get selected checkbox value in lwc</a></li>

                        <li><a href="https://www.w3web.net/display-account-related-contacts-in-lwc/" target="_blank" rel="noopener noreferrer">how to display account related contacts based on AccountId in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to create lightning datatable row actions in lwc</a></li>

                        <li><a href="https://www.w3web.net/if-and-else-condition-in-lwc/" target="_blank" rel="noopener noreferrer">how to use if and else condition in lwc</a></li>

                        <li><a href="https://www.w3web.net/get-selected-radio-button-value-and-checked-default-in-lwc/" target="_blank" rel="noopener noreferrer">how to display selected radio button value in lwc</a></li>

```
                    </ul>
```
```
            </div>
```
```
 
```

            <div style="width: 50%; float:left; display:inline-block">

                    <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;">

                        <li><a href="https://www.w3web.net/display-account-related-contacts-lwc/" target="_blank" rel="noopener noreferrer">display account related contacts based on account name in lwc</a></li>

                        <li><a href="https://www.w3web.net/create-lightning-datatable-row-actions-in-lwc/" target="_blank" rel="noopener noreferrer">how to insert a record of account Using apex class in LWC</a></li>

                        <li><a href="https://www.w3web.net/fetch-picklist-values-dynamic-in-lwc/" target="_blank" rel="noopener noreferrer">how to get picklist values dynamically in lwc</a></li>

                        <li><a href="https://www.w3web.net/edit-save-and-remove-rows-dynamically-in-lightning-component/" target="_blank" rel="noopener noreferrer">how to edit/save row dynamically in lightning component</a></li>

                        <li><a href="https://www.w3web.net/update-parent-object-from-child/" target="_blank" rel="noopener noreferrer">update parent field from child using apex trigger</a></li>

```
                    </ul>
```
```
                </div>
```

               <div style="clear:both;"></div>

```
               <br/>
```

                <div class="youtubeIcon">

                    <a href="https://www.youtube.com/channel/UCW62gTen2zniILj9xE6LmOg" target="_blank" rel="noopener noreferrer"><img src="https://www.w3web.net/wp-content/uploads/2021/11/youtubeIcon.png" width="25" height="25" style="vertical-align:top; margin-right:10px;"/> <strong>TechW3web:-</strong> To know more, Use this <span style="color: #ff8000; font-weight: bold;">Link</span> </a>

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

TechW3web:- To know more, Use this Link

Further post that would you like to learn in Salesforce

The Sitemap to Find all Published Post of The Tutorial w3web.net Click Here For More Information

TechW3web:- To know more, Use this Link

FAQ (Frequently Asked Questions)

How do you add custom CSS in lightning component?

Add CSS to a component bundle by clicking the STYLE button in the Developer Console sidebar. You can't add a 'style' tag in component markup or when you dynamically create a component in JavaScript code.

How do you use external CSS in lightning component?

To reference an external CSS resource, upload it as a static resource and use a 'ltng:require' tag in your . cmp or . app markup. ltng:require enables you to load external CSS and JavaScript libraries for your component or app.

What is CSS in Salesforce?

Cascading Style Sheets (CSS) provide a flexible way to add style to the pages of your website. This collection of formatting rules governs the appearance of your pages, and lets you define the fonts, colors, layout, and other presentation features.

Vijay Kumar

Hi, This is Vijay Kumar behind the admin and founder of w3web.net. I am a senior software developer and working in MNC company from more than 8 years. I am great fan of technology, configuration, customization & development. Apart of this, I love to write about Blogging in spare time, Working on Mobile & Web application development, Salesforce lightning, Salesforce LWC and Salesforce Integration development in full time. [Read full bio] | | The Sitemap where you can find all published post on w3web.net