I would like the

        <div aura:id="main" style="padding:15px;" class="slds-grid">

to turn red if the escalation level is M2 or orange if the escalation level is M1. My Javascript is as follow. How do I get the escalation level from data.getReturnValue()

doInit : function(component, event, helper) {
    var action = component.get("c.findCase");
        recordId: component.get("v.recordId")
    action.setCallback(this, function(data) {
        component.set("v.details", data.getReturnValue());
  • Thanks for the answers I will try them shortly. Is it possible to get the value for escalation level from data.getReturnValue(). I posted another question were this would help Feb 22, 2019 at 2:01
  • if its in the data structure, yes.
    – glls
    Feb 22, 2019 at 3:38
  • How would I pull that out. It gets returned in public static List<Case> findCase (Id recordId) { List<Case> details = [SELECT IsEscalated, Escalation_Level__c, Escalation_Type__c, Escalation_Details__c FROM Case WHERE Id=:recordId]; return details; Feb 22, 2019 at 4:28

2 Answers 2


It's easier if you define styles in your component's CSS style file, and conditionally apply classes - although you can conditionally generate the CSS itself if you really want to.

Here's what the former approach looks like, if we adapt some examples from CSS in Components and Conditional Expressions to your situation:

Component Markup

    <aura:attribute name="details" type="Map" />
    <div class="{! v.details.Escalation_Level__c == 'M2' ? 'escalated' : (v.details.Escalation_Level__c == 'M1' ? 'escalated-more' : '') }">

This uses a nested ternary operator to select from three choices (M1, M2, or anything else). I wouldn't generally nest any more levels as the logic becomes hard to maintain; if your logic is more complex, you could populate the desired style in a separate component attribute and update it in a change handler.

At this level, however, you don't have to write any more lines of JavaScript - it's all driven by the data you're already populating.

Style File

.THIS.escalated {
    color: red;

.THIS.escalated-more {
    color: orange;

The .THIS selectors can be confusing and there's some nuance, so I recommend reading the CSS in Components documentation linked above.


You can also leverage existing SLDS classes such as the ones provided in the alerts blueprints, and based on your logic, if x is returned simply use the $A.util class methods, such as toggle to add/remove the slds class which will automatically add the èredè background to your div:


<div aura:id="main" class="slds-notify slds-notify_alert slds-theme_alert-texture slds-theme_error" role="alert">
  <span class="slds-assistive-text">error</span>
  <h2>Some redundant message</h2>

the class that handles the color here is slds-theme_error, so you can toggle it as follows in your callback:

 const mainCmp = cmp.find('main');
 $A.util.toggleClass(mainCmp, 'slds-theme_error');

the other classes are there to add texture amongst other things. so you dont really need them if all you want is a red background color.

for orange, you can use slds-theme_warning.

You must log in to answer this question.

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