I am trying to change background color of lightning:tab based on controller.js logic. But i am unable to do that. If the record size is zero, then want to add background color as Yellow.

<aura:component controller= "CustomController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >

<aura:attribute name="recordId" type="String" /> <!-- Fetched current loaded record  -->
<aura:attribute name="recordId1" type="Id" /> <!--Setting the record Id from the Controller.JS -->
<aura:attribute name="DisplaFields" type="String[]" default="Name,Type,Industry"/>
<aura:attribute name="isModalOpen" type="boolean" default="false"/>
<aura:attribute name="AccWraplist" type="sObject[]" />

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

<lightning:tabset variant="scoped">
    <lightning:tab label="Item One">
        One Content !
    <lightning:tab aura:id ="item2" label="Item Two">

        <div class="slds-col">
            <lightning:recordForm recordId="{!v.recordId}" density="comfy"  objectApiName="Account" 
                                  fields="{!v.DisplaFields}"  columns="6" class="slds-form-element slds-form-element_edit slds-form-element_readonly slds-form-element_stacked  slds-hint-parent" mode="readonly" >

    <lightning:tab label="Item Three">

        <div class= "slds-scrollable_y" style="height:440px;" aura:id = "customDiv">
                <aura:iteration var="acc1" items="{!v.AccWraplist}" indexVar = "test1" >

                    <div class="slds-grid slds-wrap">

                        <div class="slds-col slds-size_2-of-7">
                            <span>Start Date</span> <br/>
                        <div class="slds-col slds-size_2-of-7">
                            <span>Date Completed</span> <br/>
                            <span><lightning:formattedDateTime value="{!acc1.acc.CreatedDate}" year="numeric" month="numeric" day="numeric"/></span>
                        <div class="slds-col slds-size_2-of-7">
                            <span>Program</span> <br/>

                        <div class="slds-col slds-size_1-of-7">
                               <lightning:buttonIcon aura:id = "buttonID" iconName="utility:chevrondown"  value = "{!test1}" title="Default" alternativeText="Default"   onclick="{!c.toggle}" />





doInit : function(component, event, helper) {
    var action = component.get("c.getAccounts");

    action.setCallback(this, function(a) {
        component.set("v.AccWraplist", a.getReturnValue());
        var elem = component.find('customDiv');
        $A.util.addClass(elem, 'clrYellow');



.THIS.clrYellow {



afterRender: function(component,helper){
   // alert('Inside afterrender');
    console.log('afterRender event handler is running now');
    var elem1 = component.find("customDiv");
   $A.util.addClass(elem1, 'clrYellow');



But it is not changing the background color. I want look and feel like this one. enter image description here

1 Answer 1


This is not allowed by that component. If you want to call attention to the tab, use an icon for iconName (left) or endIconName (right). You can also add a title for additional text that can appear when the user hovers over the tab.

  • Hi @sfdcfox, thank you for your answer. Can you please provide if any such kind of example. So that i will try to implement and checks if that suits in this scenario. Thank you.
    – Aryan
    May 10, 2020 at 8:27
  • @Aryan I created a quick example for you to see in LWC, the documentation for lightning:tab shows how to do it in Aura.
    – sfdcfox
    May 10, 2020 at 8:36
  • So you are saying that- on load of component it's not possible. When the user clicks something on the page, we can do this right ?
    – Aryan
    May 10, 2020 at 8:46
  • @Aryan Yes, you can do so during the load of a component. The example was meant only to demonstrate how to dynamically set the icon. You simply need an attribute, and you can set that attribute any time you like.
    – sfdcfox
    May 10, 2020 at 8:51
  • Onload of component can is set iconName for lightning:tab in the controler.js ?
    – Aryan
    May 10, 2020 at 8:57

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .