0

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{
        @AuraEnabled
        public Boolean slaGreen;

        @AuraEnabled
        public Boolean slaYellow;

        @AuraEnabled
        public Boolean slaRed;

        @AuraEnabled
        public Long slaTimeLeft;

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

    }

    @AuraEnabled
    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';
    timeIntervalInstance;
    totalMillisecondsLeft = 0;
    @api recordId;
    @track error;
    @track greenBool;
    @track caseTimerWrapper;

    connectedCallback() {
        this.timeIntervalInstance = setInterval( ()=> {
            console.log('I am in connectedCallback log1');
            this.handleData();
        }, 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

<template>
    <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>
            </div>
        </template>

</template>

1 Answer 1

0

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.

3
  • 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? Commented Mar 24, 2021 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
    Commented Mar 24, 2021 at 15:36
  • That makes sense sfdcfox. Thanks again! Commented Mar 24, 2021 at 15:48

You must log in to answer this question.

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