I have the following apex class where I am returning a wrapper class back the lightning web component and access the values of that wrapper object from javascript and html to carry out some processing.

The challenge I am facing here is I am able to access the wrapper object's value from javascript by using object.property.fieldname but I am unable to do so from html. in HTML I am trying to use this value in the if condition but when I load the component it is throwing an error saying value is undefined.

How do I achieve this? I only want to display the markup if the slaGreen boolean is true.

public with sharing class CaseTimerHelper {

    public class caseTimerHelperWrapper{
        public Boolean slaGreen;

        public Boolean slaYellow;

        public Boolean slaRed;

        public Long slaTimeLeft;

        public caseTimerHelperWrapper(){
            this.slaGreen = false;
            this.slaRed = false;
            this.slaYellow = false;
            this.slaTimeLeft = 0;


    public static caseTimerHelperWrapper calculateTimer(Id recordId) {

        String queueName = '';
        Long timeLeft;
        Decimal qSLAHrs;

        Case caseQueueName = [SELECT Id,Owner.Name FROM Case WHERE Id = :recordId];
        queueName = caseQueueName.Owner.Name;
//        Decimal qSLAHrs = Queue_SLA__mdt.getInstance(queueName).SLA_in_Hours__c;
        QueueSLAs__c cSLA = QueueSLAs__c.getValues(queueName);
        if (cSLA != null)
            qSLAHrs = cSLA.SLA_in_Hours__c;

        system.debug('The queue name is ' + qSLAHrs);

        List<Case_Status_Update__c> caseStatusUpdates = [
                SELECT Id, Status_Start_Time__c
                FROM Case_Status_Update__c
                WHERE Ticket__c = :recordId AND Status_End_Time__c = NULL AND Status__c = 'Response received'
                ORDER BY CreatedDate DESC

        if (caseStatusUpdates.isEmpty() || caseStatusUpdates.size() == 0 || qSLAHrs == null) {
            caseTimerHelperWrapper ct = new caseTimerHelperWrapper();
            ct.slaGreen = true;
            return ct;


.js file

import {LightningElement, api, track, wire} from 'lwc';
import timeLeft from '@salesforce/apex/caseTimerHelper.calculateTimer';

export default class CaseTimer extends LightningElement {
    @track timeVal = '0 hours: 0 minutes :0 seconds';
    totalMillisecondsLeft = 0;
    @api recordId;
    @track error;
    @track greenBool;
    @track caseTimerWrapper;

    connectedCallback() {
        this.timeIntervalInstance = setInterval( ()=> {
            console.log('I am in connectedCallback log1');
        }, 1000);

    handleData() {
        timeLeft({recordId: this.recordId})
            .then(result => {
                this.caseTimerWrapper = result;
                console.log('###log1 the value of wrapper class is  ' + this.caseTimerWrapper);
                this.totalMillisecondsLeft = this.caseTimerWrapper.slaTimeLeft;
                this.greenBool = this.caseTimerWrapper.slaGreen;
                console.log('log1 log2 the data from slaGreen ' + this.caseTimerWrapper.slaTimeLeft);
                console.log('log1 log2 the value of parentThis.totalMillisecondsLeft ' + this.totalMillisecondsLeft);

                var hours = Math.floor((this.totalMillisecondsLeft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                console.log('log1 the value of hours is part1 ' + hours);
                var minutes = Math.floor((this.totalMillisecondsLeft % (1000 * 60 * 60)) / (1000 * 60));
                var seconds = Math.floor((this.totalMillisecondsLeft % (1000 * 60)) / 1000);

                // Output the result in the timeVal variable
                this.timeVal = hours + " hours: " + minutes + " minutes: " + seconds + " seconds";
            .catch(error => {
                this.error = error;

html file

    <lightning-card title="SLA Status" icon-name="standard:today">
        <template if:true={caseTimerWrapper.slaGreen}>
            <div style="padding: 20px;border-radius: 6px;">
                <div style=" color: darkgreen ; font-size: 20px;text-align:center;">{timeVal}</div>


You need to add an if statement to check for the data being loaded. I'd suggest:

<lightning-card if:true={caseTimerWrapper} title="SLA Status" icon-name="standard:today">

This way, the card won't load until the data is ready, then the green part will happen as you expect.

Alternatively, set a default object when the component is created:

@track caseTimerWrapper = {};

This would also serve to prevent the error from happening.

  • That's it! Thanks my man! But I am having hard time understanding why? I am trying to fetch the data during initialization itself so the data should be already there right? Am I missing something? Mar 24 at 15:28
  • @HarshaVardhan There's a call that has to go to the server, so by the time your first render happens, the variable is still uninitialized unless you set a default value. Even though it only takes a few milliseconds to get the data, it's still too late for the first render to see the data.
    – sfdcfox
    Mar 24 at 15:36
  • That makes sense sfdcfox. Thanks again! Mar 24 at 15:48

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.