Blog

Dynamic Progress Indicator In LWC

Dynamic Progress Indicator In LWC
Dynamic Progress Indicator In LWC

Creating Dynamic Progress Indicator Using lWC.

HTML File

				
					<template>
    <div class="slds-card">
        <lightning-progress-indicator class={dynamicClassName} current-step={currentStatus} type="path" variant="base">
            <template for:each={statusValues} for:item="step">
                <lightning-progress-step label={step.value} title={step.value} value={step.value} key={step.value}></lightning-progress-step>
            </template>
        </lightning-progress-indicator>
    </div>
</template>

JS File

				
					import { LightningElement, wire, track, api } from 'lwc';
import JobApplicationStatusValues from '@salesforce/apex/CommonMethods.getPicklistValues';
import { getRecord, getFieldValue, } from "lightning/uiRecordApi";
import STATUS_FIELD from "@salesforce/schema/Candidate__c.Job_Application_Status__c";

export default class DynamicProgressIndicator extends LightningElement {


    @track statusValues = [];
    @track currentStatus;
    @api recordId;  

    @wire(JobApplicationStatusValues) addFieldsToPath({ error, data }) {
        let tempStatus = [];
        if (data) {
            let i = 0;
            for (let key in data) {
                tempStatus.push({
                    value: data[key],
                    key: key,
                    className: 'slds-path__item slds-is-incomplete',
                });
                i++;
            }
            this.statusValues = JSON.parse(JSON.stringify(tempStatus));
        } else { 
            console.log('error in getting values',error)
        }
    }

    @wire(getRecord, { recordId: "$recordId", fields:[STATUS_FIELD] } )
    caseRecord({ error, data }) {
        if (data) {
            this.currentStatus = getFieldValue(data, STATUS_FIELD);
        } else { 
            console.log('error in getting values',error)
        }
    }  

    connectedCallback() { 
        this.recordId = this.recordId;
    }

}

XML File

				
					<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>61.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <objects>
                <object>cbugs__Candidate__c</object>
                <object>Account</object>
                <object>Contact</object>
            </objects>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

In this video we have demonstrated and explain the code.

Leave a Reply