w3web.net -- Adding custom style in lightning component

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

by
1,052 views


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

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:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!

 

custom style CSS for specific role and profile in salesforce -- w3web.net

 

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

Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 

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

courseApp.app [Component Application File]

  1.    <aura:application extends="force:slds">
  2.     <c:coursesCmp/>
  3.   </aura:application>

Step 2:- Create Lightning Component : courseCmp.cmp

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

courseCmp.cmp [Lightning Component File]

  1.   <aura:component controller="newStudentCtr" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction,lightning:actionOverride" access="global" >    
  2.     <aura:attribute name="coursesObj" type="Course__c" default="{'sobjectType':'Course__c'}"/>    
  3.     <aura:handler name="init" value="{!this}" action="{!c.doInit}"/> 
  4.     <aura:attribute name="courseListItems" type="Course__c[]"/>
  5.     <aura:attribute name="profileRole" type="boolean" default="false"/>
  6.  
  7.     <div class="slds">        
  8.         <div class="slds-p-horizontal--medium">    
  9.             <table class="slds-table slds-table_col-bordered slds-table_bordered ">
  10.                 <thead>   
  11.                     <tr>
  12.                         <th>Course Name</th>
  13.                         <th>Duration</th>
  14.                         <th>Fees</th>
  15.                         <th>Status</th>              
  16.                     </tr>
  17.                 </thead>
  18.                 <tbody>   
  19.                     <aura:iteration items="{!v.courseListItems}" var="courseVar">
  20.                         <tr>
  21.                             <td>{!courseVar.Name}</td>
  22.                             <td>{!courseVar.Duration__c}</td>
  23.                             <td>{!courseVar.Fees__c}</td>
  24.                             <td>
  25.                                 <aura:if isTrue="{!v.profileRole}">
  26.                                     <span style="color:red;">{!courseVar.Status__c}</span>
  27.                                     <aura:set attribute="else">
  28.                                         <span style="color:blue;">{!courseVar.Status__c}</span>
  29.                                     </aura:set>
  30.                                 </aura:if>                          
  31.                             </td>
  32.                         </tr>
  33.                     </aura:iteration>
  34.                 </tbody>  
  35.             </table>
  36.         </div>   
  37.  
  38. <br/><br/>
  39.    <!--Start RelatedTopics Section-->
  40. <div style="border:1px #ddd solid; padding:10px; background:#eee; margin:40px 0;">
  41.  
  42.             <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>
  43.  
  44.             <br/><br/>
  45.             <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>
  46.             <div style="display:block; overflow:hidden;"> 
  47.                 <div style="width: 50%; float:left; display:inline-block">
  48.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  49.                         <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>
  50.                         <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>
  51.                         <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>
  52.                         <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>
  53.                         <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>
  54.                     </ul>
  55.             </div>
  56.  
  57.             <div style="width: 50%; float:left; display:inline-block">
  58.                     <ul style="list-style-type: square; font-size: 16px; margin: 0 0 0 54px; padding: 0;"> 
  59.                         <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>
  60.                         <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>
  61.                         <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>
  62.                         <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>
  63.                         <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>
  64.                     </ul>
  65.                 </div>
  66.                <div style="clear:both;"></div> 
  67.                <br/>
  68.                 <div class="youtubeIcon">
  69.                     <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>
  70.                 </div>
  71.     </div>
  72.  
  73. </div>
  74.  
  75.   <!--End RelatedTopics Section-->
  76.  
  77.     </div>
  78. </aura:component>

Step 3:- Create Lightning Component : courseCmpController.js

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

courseCmpController.js [JavaScript Controller]

  1.    ({
  2.     doInit:function(component, event, helper){        
  3.         helper.courseListItemsView(component);
  4.         helper.getCurrentUser(component);
  5.     },
  6.  })

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

  1.   ({
  2.  
  3. 	courseListItemsView : function(component, event, helper) {
  4. 		var action = component.get('c.studentCourseMethd');
  5.         var courseListItems= component.get('v.courseListItems');        
  6.         action.setCallback(this, function(response){
  7.             var state = response.getState();
  8.             if(state == 'SUCCESS'){
  9.                 var result  = response.getReturnValue();
  10.                 component.set('v.courseListItems', result);                
  11.             }
  12.         });
  13.         $A.enqueueAction(action);
  14. 	},    
  15.  
  16.     getCurrentUser:function(component,event,helper){
  17.         var action =   component.get('c.userProfileRole');        
  18.         action.setCallback(this, function(response){
  19.           var state = response.getState();            
  20.         if(state == 'SUCCESS'){
  21.             var result = response.getReturnValue();              
  22.            component.set("v.profileRole",result);
  23.           }
  24.         });
  25.  
  26.       $A.enqueueAction(action);
  27.     },    
  28.  })

Step 5:- Create Lightning Application : newStudentCtr.apxc

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

newStudentCtr.apxc [Apex Class Controller]

  1.    public class newStudentCtr {
  2.  
  3.     @AuraEnabled
  4.     public static List<Course__c> studentCourseMethd(){
  5.         List<Course__c> listViewStudentObj = NEW List<Course__c>();
  6.         FOR(Course__c studentList:[SELECT Id, Name, Duration__c,Fees__c,Status__c FROM Course__c ]){
  7.             listViewStudentObj.add(studentList);
  8.         }
  9.         RETURN listViewStudentObj;
  10.     }
  11.  
  12. @AuraEnabled
  13.     public static BOOLEAN userProfileRole(){
  14.         USER usr= [SELECT Id, UserRole.Name,Profile.Name FROM USER WHERE Id=: userInfo.getUserId() AND UserRoleId!=NULL];
  15.         system.debug('usr#### ' + usr);
  16.         IF(usr.UserRole.Name=='Sales Manager East' && usr.Profile.Name=='Custom: Support Profile') {
  17.             RETURN TRUE;
  18.         }ELSE{RETURN FALSE;}
  19.     }    
  20.  }

 
 

Further post that would you like to learn in Salesforce

 
 

 

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.

Related Topics | You May Also Like

 
Note:: – You will get an email, so put correct email and mobile number and BEGIN YOUR JOURNEY from Today!
 
 
  

Our Free Courses →

👉 Get Free Course →

đź“Ś Salesforce Administrators

đź“Ś Salesforce Lightning Flow Builder

đź“Ś Salesforce Record Trigger Flow Builder
👉 Get Free Course →

đź“Ś Aura Lightning Framework

đź“Ś Lightning Web Component (LWC)

đź“Ś Rest APIs Integration


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

Leave a Comment