Change background color of lightning:tab on load based on records size

Question

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>
    <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:recordForm>
        </div>

    </lightning:tab>
    <lightning:tab label="Item Three">

        <div class= "slds-scrollable_y" style="height:440px;" aura:id = "customDiv">
            <lightning:card>
                <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/>
                            <span>{!acc1.acc.Age_of_Account__c}</span>
                        </div>
                        <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>
                        <div class="slds-col slds-size_2-of-7">
                            <span>Program</span> <br/>
                            <span>{!acc1.acc.Industry}</span>

                        </div>
                        <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}" />
                        </div>

                    </div> 

                    <br/>
                </aura:iteration>  
            </lightning:card>
        </div>

    </lightning:tab>
</lightning:tabset>

Controller.JS

({
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');
    });
    $A.enqueueAction(action);
}

})

CSS

.THIS.clrYellow {
background-color:yellow;

}

Renderer.js

({
afterRender: function(component,helper){
    this.superAfterRender();
   // 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.

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.