I'm creating a custom path for the Case Status field to use in a Community page. The Status values are dynamically populated since different Record Types have different Statuses. My problem is that compared to the standard path component my custom one is not rendering correctly.
the top one is the standard one, the bottom one my custom. As you can see the current status is selected with the outline only, just like it would be if you select another status on the path. Do you know how to force it to render correctly?
If I use a console.log
at the end of get currentStep()
I see that the current status is undefined
at first and then the function runs a second time and finds the correct status. I think it may have something to do with it but I can't find a solution.
HTML
<template>
<lightning-card>
<div class="slds-m-around_medium slds-readonly-path">
<lightning-progress-indicator record-id={recordId} current-step={currentStep} type="path">
<template for:each={steps} for:item="step">
<lightning-progress-step label={step.label} value={step.value} key={step.label}></lightning-progress-step>
</template>
</lightning-progress-indicator>
</div>
</lightning-card>
</template>
JS
import { LightningElement, api, wire } from "lwc";
import { getRecord } from "lightning/uiRecordApi";
import { getPicklistValues } from 'lightning/uiObjectInfoApi';
import CASE_STATUS_FIELD from '@salesforce/schema/Case.Status';
const FIELDS = ["Case.Status", "Case.RecordTypeId"];
export default class CustomPath extends LightningElement {
@api recordId;
@wire(getRecord, { recordId: "$recordId", fields: FIELDS })
case;
caseStatusPicklistValues;
steps = [];
@wire(getPicklistValues, {
recordTypeId: '$case.data.fields.RecordTypeId.value',
fieldApiName: CASE_STATUS_FIELD
})
wiredPicklistValues({ error, data }) {
if (data) {
this.caseStatusPicklistValues = data.values.map((picklistValue, index) => {
return {
label: picklistValue.label,
value: 'step-' + (index + 1)
};
});
this.steps = this.caseStatusPicklistValues;
}
}
get currentStep() {
if (this.case.data) {
const statusValue = this.case.data.fields.Status.value;
const step = this.steps.find(step => step.label === statusValue);
return step ? step.value : null;
}
}
}
EDIT after @tushar-jadav response:
I used the modified code provided in the answer and changed the getter for currentStep to this:
get currentStep() {
if (this.caseStatusPicklistValues) {
const statusValue = this.case.data.fields.Status.value;
const step = this.caseStatusPicklistValues.find(step => step.label === statusValue);
return step ? step.value : null;
}
}