Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Create custom path component using lightning web component
<template>
<lightning-card variant="Narrow" >
<lightning-spinner alternative-text="Loading" size="small" if:true={isLoading}></lightning-spinner>
<!--Display the button on the top-->
<p slot="actions" if:true={isTop}>
<lightning-button if:true={showButton} variant="brand" label={buttonLabel} title={buttonLabel} onclick={handleClick}></lightning-button>
</p>
<div class="slds-m-around_small" if:true={isTop}>
<lightning-progress-indicator current-step={currentValue} type={pathType} has-error="false" variant="shaded">
<template if:true={pathValues} for:each={pathValues} for:item="step" for:index="index">
<lightning-progress-step data-index={index} data-value={step.value}
onclick={handleSelectChange} key={step.value} label={step.label}
value={step.value}>
</lightning-progress-step>
</template>
</lightning-progress-indicator>
</div>
<!--Display the button in the same row-->
<lightning-layout multiple-rows if:false={isTop}>
<lightning-layout-item size="12" padding="around-small" small-device-size="3" medium-device-size="6" large-device-size="10" >
<lightning-progress-indicator current-step={currentValue} type={pathType} has-error="true" variant="base">
<template if:true={pathValues} for:each={pathValues} for:item="step" for:index="index">
<lightning-progress-step data-index={index} data-value={step.value}
onchange={handleSelectChange} onclick={handleSelectChange}
onselect={handleSelectChange} key={step.value} label={step.label}
value={step.value}>
</lightning-progress-step>
</template>
</lightning-progress-indicator>
</lightning-layout-item>
<lightning-layout-item size="12" padding="around-small" small-device-size="2" medium-device-size="2" large-device-size="2">
<lightning-button if:true={showButton} variant="brand" label={buttonLabel} title={buttonLabel} onclick={handleClick}></lightning-button>
</lightning-layout-item>
</lightning-layout>
</lightning-card>
</template>
import { api, LightningElement, track, wire } from 'lwc';
import { getRecord, getFieldValue, updateRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { getPicklistValuesByRecordType, getObjectInfo } from 'lightning/uiObjectInfoApi';
const fields = [];
var DUMMY_RECORDTYPE_ID = '012000000000000AAA';
export default class PathComponent extends LightningElement {
@api recordId; /* Id the record */
@api objectApiName; /* object api name. For example, Account, Invoice__c */
@api fieldApiName; /* field api name. For example, Rating, Status__c */
@api values; /* picklist values comma separated if the values are not part of picklist field */
@api currentValue; /* current value of the field */
@api pathType; /* type of the path. For base, path */
@api buttonLocation; /* location of the button. For top, same row */
@api buttonLabel = 'Update Current Value'; /* label of the button */
@api showButton = false;
@api recordTypeName; /* record type name */
@track pathValues = [];
isLoading = false;
isTop = false;
errorMessage;
isError = false;
recordTypeId;
connectedCallback() {
if(this.buttonLocation === 'Top'){
this.isTop = true;
}else{
this.isTop = false;
}
fields.push(this.objectApiName+'.'+this.fieldApiName);
if(this.recordTypeName){
fields.push(this.objectApiName+'.RecordTypeId');
}
if(this.values){
let allValues = this.values.split(',');
for(let i=0; i<allValues.length; i++){
this.pathValues.push({
label : allValues[i],
value : allValues[i]
});
}
}else{
//this.handlePicklistValues();
}
}
/* get the current value for the piklist field */
@wire(getRecord, { recordId: '$recordId', fields })
getfieldValue({error, data}){
if(data){
let fieldValue = getFieldValue(data, this.objectApiName+'.'+this.fieldApiName);
this.recordTypeId = getFieldValue(data, this.objectApiName+'.RecordTypeId');
if(!this.currentValue){
this.currentValue = fieldValue;
}
if(this.recordTypeId){
//DUMMY_RECORDTYPE_ID = this.recordTypeId;
}else{
this.recordTypeId = DUMMY_RECORDTYPE_ID;
}
}else if(error){
this.isError = true;
this.errorMessage = error.body.message;
}
}
@wire(getPicklistValuesByRecordType, { objectApiName: '$objectApiName', recordTypeId: '$recordTypeId' })
fetchValues({error, data}){
if(data && data.picklistFieldValues){
try{
if(!this.values){ // check if the values are not there then add the values to the picklist
let allValues = data.picklistFieldValues[this.fieldApiName];
this.pathValues = [];
allValues.values.forEach(option => {
this.pathValues.push({
label : option.label,
value : option.value
});
});
}
}catch(err){
this.isError = true;
this.errorMessage = err.message;
}
}else if(error){
this.isError = true;
this.errorMessage = 'Object is not configured properly please check';
}
}
handleSelectChange(event){
event.preventDefault();
this.currentValue = event.target.value;
if(!this.showButton){
const changeEvent = new CustomEvent('change', {
detail: {
value : this.currentValue
}
});
this.dispatchEvent(changeEvent);
}
}
handleClick(event){
event.preventDefault();
this.isLoading = true;
const fields = {};
fields['Id'] = this.recordId; //ID_FIELD.fieldApiName
fields[this.fieldApiName] = this.currentValue; // STAGENAME_FIELD.fieldApiName
const recordInput = { fields };
updateRecord(recordInput)
.then(() => {
this.dispatchEvent(
new ShowToastEvent({
title: 'Success',
message: 'Record updated',
variant: 'success'
})
);
})
.catch(error => {
console.error(' Error updating record ', error);
this.dispatchEvent(
new ShowToastEvent({
title: 'Error updating record',
message: error.body.message,
variant: 'error'
})
);
})
.finally(() => {
this.isLoading = false;
});
}
}
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>54.0</apiVersion>
<isExposed>true</isExposed>
<masterLabel>Path Component</masterLabel>
<targets>
<target>lightning__RecordPage</target>
<target>lightning__FlowScreen</target>
</targets>
<!-- Configuring the design attributes -->
<targetConfigs>
<targetConfig targets="lightning__RecordPage, lightning__FlowScreen">
<property name="recordId" type="String" label="Record Id" description="The Salesforce Object Record Id!"/>
<property name="objectApiName" type="String" label="Object Api Name" description="Salesforce Object API Name"/>
<property name="fieldApiName" type="String" label="Picklist Field API Name" description="Picklist Field API Name" />
<property name="currentValue" type="String" label="The current picklist value!"
description="The current picklist value!" />
<property name="pathType" type="String" label="Type of the path."
description="The type of path you wanted to show. Valid values are base, path" />
<property name="values" type="String" label="The picklist field values"
description="provide all the picklist api name comma separated"/>
<property name="buttonLocation" type="String" label="Location of the button"
description="Where you wanted to display the button. The valid values are Top, SameRow"/>
<property name="buttonLabel" type="String" label="The Label of the button"
description="The Label of the button. For Example, Mark as Current Status"/>
<property name="recordTypeName" type="String" label="Name of the record type"
description="Please provide the name of the record type if you are using record type name" />
<property name="showButton" type="Boolean" label="Show Action Button?"
description="Select True if you wanted to see the button, False if you do not wanted to show the action" />
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment