0

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. enter image description here

0

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.

9
  • 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 '20 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 '20 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 '20 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 '20 at 8:51
  • Onload of component can is set iconName for lightning:tab in the controler.js ?
    – Aryan
    May 10 '20 at 8:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.