0

I am trying to follow this example and apply it to the Case object. I would like to evaluate the Case Status in a Switch statement to set "currentStep" value.

HTML

<template>
 <lightning-progress-indicator record-id={recordId} current-step={currentStep} type="path" has-error="true" variant="base">
    <lightning-progress-step label="New" value="1"></lightning-progress-step>
    <lightning-progress-step label="Paperwork In Review" value="2"></lightning-progress-step>
    <lightning-progress-step label="Change Pending" value="3"></lightning-progress-step>
    <lightning-progress-step label="Paperwork Approved" value="4"></lightning-progress-step>
    <lightning-progress-step label="Inspection Approved" value="5"></lightning-progress-step>
    <lightning-progress-step label="Project Approved" value="6"></lightning-progress-step>
</lightning-progress-indicator>

JavaScript

import { LightningElement, api, wire, track } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
    'Case.Status'
];

export default class ProgressIndicator extends LightningElement {

    @track currentStep;
    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    case;

    get status() {
        return this.case.data.fields.Status.value;
    }

    renderedCallback() {
        switch (this.FIELDS.case.status) {
            case "New":
                this.currentStep = "1";
                break
            case "Paperwork In Review":
                this.currentStep = "2";
                break
            case "Change Pending":
                this.currentStep = "3";
                break
            case "Paperwork Approved":
                this.currentStep = "4";
                break
            case "Inspection Approved":
                this.currentStep = "5";
                break
            case "Project Approved":
                this.currentStep = "6";
                break
        }
    }
}

Meta

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>48.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightningCommunity__Page</target>
    </targets>
</LightningComponentBundle>

*Updated JavaScript

import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';

const FIELDS = [
    'Case.Status'
];

export default class ProgressIndicator extends LightningElement {

    @api recordId;
    @wire(getRecord, { recordId: '$recordId', fields: FIELDS })
    case;

    get status() {
        return this.case.data.fields.Status.value;
    }

    get currentStatus(){
        let tempCurrentStatus
        if(this.case.data) {
            switch (this.case.data.fields.Status.value) {
                case "New":
                    tempCurrentStatus = "1";
                    break
                case "Paperwork In Review":
                    tempCurrentStatus = "2";
                    break
                case "Change Pending":
                    tempCurrentStatus = "3";
                    break
                case "Paperwork Approved":
                    tempCurrentStatus = "4";
                    break
                case "Inspection Approved":
                    tempCurrentStatus = "5";
                    break
                case "Project Approved":
                    tempCurrentStatus = "6";
                    break
            }
        }
        return tempCurrentStatus;
    }
}

Updated HTML

<template>
     <lightning-progress-indicator record-id={recordId} current-step={currentStatus} type="path" has-error="true" variant="base">
0

There is no need to write the logic in renderedCallback, instead the logic should be in one of the method which you should get invoked whenever the component is rendered.

You need to replace the method renderedCallback with below

get currentStatus(){
        let tempCurrentStatus
        switch (this.FIELDS.case.status) {
            case "New":
                tempCurrentStatus = "1";
                break
            case "Paperwork In Review":
                tempCurrentStatus = "2";
                break
            case "Change Pending":
                tempCurrentStatus = "3";
                break
            case "Paperwork Approved":
                tempCurrentStatus = "4";
                break
            case "Inspection Approved":
                tempCurrentStatus = "5";
                break
            case "Project Approved":
                tempCurrentStatus = "6";
                break
        }
   return tempCurrentStatus;
}

And remove the variable currentStatus.

13
  • Kiran "And remove the variable currentStatus": are you referring to: @track currentStep;? – Tom May 14 '20 at 0:16
  • yes that is correct. if you have getter then you would not need that and that is always a calculated value so I would not consider storing it. – Kiran Machhewar May 14 '20 at 0:19
  • Kiran, how do I set my currentStep attribute on my markup? current-step={tempCurrentStatus} ? – Tom May 14 '20 at 0:42
  • no change would be needed in markup it should stay as it is which is current-step = {currentStep} – Kiran Machhewar May 14 '20 at 0:45
  • Kiran - I am a little confused, if I remove the @track currentStep variable, how do we pass the value of tempCurrentStatus to the current-step attribute? – Tom May 14 '20 at 0:50
0

Field names are case sensitive. Use the getFieldValue method instead:

import CASESTATUSFIELD from '@salesforce/schema/Case.Status';
import { getFieldValue } from 'lightning/uiRecordApi';

...

get status() {
  return getFieldValue(this.case.data, CASESTATUSFIELD);
}

Instead of a switch, you can use a simple array:

this.currentStep = ''+[
  "",
  "New",
  "Paperwork In Review",
  "Change Pending",
  "Paperwork Approved",
  "Inspection Approved",
  "Project Approved",
].indexOf(getFieldValue(this.case, CASESTATUSFFIELD));

This shouldn't be in the renderedCallback, as that causes an infinite loop. Instead, you should be able to simply:

get currentStep() {
  return ""+[
  "",
  "New",
  "Paperwork In Review",
  "Change Pending",
  "Paperwork Approved",
  "Inspection Approved",
  "Project Approved",
  ].indexOf(getFieldValue(this.case, CASESTATUSFFIELD));
}

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.