0

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.

Path renderding incorrectly

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;
        }
    }

It's now working as intended. Path renderding correctly

1 Answer 1

1

This happened because of the component loaded in DOM and your data is not available to set the current step.

In your js file, I have created on variable to indicate whether the data is available or not. based on this variable render your component in html. I have also updated the currentStep getter method.

HTML::

<template>
        <template lwc:if={dataAvailable}>
                <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>
</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 = [];
    dataAvailable = false;//add this variable

    @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;
            this.dataAvailable = true; // make variable true
        }
    }

    get currentStep() {// updated the current step method
        if (this.caseStatusPicklistValues) {
            return this.caseStatusPicklistValues[0].value;
        }
    }
}

Output::

enter image description here

1
  • 1
    Yeah that was it, i modified the the current step method to find the correct status value instead of returning always the first one and it's working as intended. Like this -> const step = this.caseStatusPicklistValues.find(step => step.label === statusValue);
    – banjug
    Commented Jan 9 at 13:12

You must log in to answer this question.

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