LWC custom path requires conditional loading of stages

Question

I have a custom LWC component where I build up a Path in order to display the full picklist value name instead of just a tick when the stage is completed. This all works nicely. The original @wire without the condition is this

    import { LightningElement, wire, api } from "lwc";
    import { getObjectInfo } from "lightning/uiObjectInfoApi";
    import { getPicklistValues } from "lightning/uiObjectInfoApi";
    import MY_OBJECT from "@salesforce/schema/My_Object__c";
    import MY_OBJECT_STATUS from "@salesforce/schema/My_Object__c.Status__c";
    import MY_OBJECT_ACCEPTANCE from "@salesforce/schema/My_Object__c.Parent__r.Acceptance__c";

    export default class MyObjectPath extends LightningElement {
      @api objectApiName;
      @api recordId;
      stageOptions;
      status = MY_OBJECT_STATUS;
      acceptance = MY_OBJECT_ACCEPTANCE;

      currentStep = "slds-path__item slds-is-current";
      completeStep = "slds-path__item slds-is-active";
      incompleteStep = "slds-path__item slds-is-incomplete";

      @wire(getObjectInfo, { objectApiName: MY_OBJECT })
      myObject;

    @wire(getPicklistValues, {
        recordTypeId: "$myObject.data.defaultRecordTypeId",
        fieldApiName: MY_OBJECT_STATUS
    })
    picklistValues({ data }) {
        if (data) {
          let increment = 1;
          this.stageOptions = data.values.map((item) => {
            return {
              position: increment++,
              value: item.value,
              pathStatus: this.incompleteStep,
              tickIcon: false
            };
          });
        }
    }

Except I now have a requirement to exclude certain stages based on a condition. The code below is what I tried but I get an error in the js

Array.prototype.map() expects a value to be returned at the end of arrow function.

and if I ignore it the component fails so this is not a solution.

    import { LightningElement, wire, api } from "lwc";
    import { getObjectInfo } from "lightning/uiObjectInfoApi";
    import { getPicklistValues } from "lightning/uiObjectInfoApi";
    import MY_OBJECT from "@salesforce/schema/My_Object__c";
    import MY_OBJECT_STATUS from "@salesforce/schema/My_Object__c.Status__c";
    import MY_OBJECT_ACCEPTANCE from "@salesforce/schema/My_Object__c.Parent__r.Acceptance__c";

    export default class RegistryTransferPath extends LightningElement {
      @api objectApiName;
      @api recordId;
      stageOptions;
      status = MY_OBJECT_STATUS;
      acceptance = MY_OBJECT_ACCEPTANCE;

      currentStep = "slds-path__item slds-is-current";
      completeStep = "slds-path__item slds-is-active";
      incompleteStep = "slds-path__item slds-is-incomplete";

      @wire(getObjectInfo, { objectApiName: MY_OBJECT })
      registryTransfer;

      @wire(getPicklistValues, {
        recordTypeId: "$myObject.data.defaultRecordTypeId",
        fieldApiName: MY_OBJECT_STATUS
      })
      picklistValues({ data }) {
        if (data) {
          let increment = 1;
          this.stageOptions = data.values.map((item) => {
            if (
              item.value === "Awaiting Approval" ||
              item.value === "Contract Acceptance"
            ) {
              if (this.acceptance === "Enabled") {
                return {
                  position: increment++,
                  value: item.value,
                  pathStatus: this.incompleteStep,
                  tickIcon: false
                };
              }
            } else {
              return {
                position: increment++,
                value: item.value,
                pathStatus: this.incompleteStep,
                tickIcon: false
              };
            }
          });
        }
      }

I've tried finding a way to do this but am stuck. How would I exclude the 2 options if my condition is met?

RubenDG · Accepted Answer · 2024-12-06 08:27:10Z

Since you're excluding "Awaiting Approval" and "Contract Acceptance" when acceptance is not "Enabled", this is the case when that function doesn't return a value, therefore Array.map() throws that error.
To exclude those value you should first call Array.filter(), then call Array.map(). You could apply De Morgan's laws to get the conditions needed to filter out those values.
Moreover, since this.acceptance === "Enabled" does not depend upon iteration value, you could move it outside the loop.

if (data) {
    let increment = 1;
    const isAcceptanceEnabled = this.acceptance === "Enabled";
    this.stageOptions = data.values
        .filter((item) => isAcceptanceEnabled || (item.value !== "Awaiting Approval" && item.value !== "Contract Acceptance"))
        .map((item) => {
            return {
                position: increment++,
                value: item.value,
                pathStatus: this.incompleteStep,
                tickIcon: false
            };
        });
}

Works like a dream :)

Irene
– Irene

2024-12-08 22:55:53 +00:00
Commented Dec 8, 2024 at 22:55 — Irene
– Irene, Commented Dec 8, 2024 at 22:55

hendra · Accepted Answer · 2024-12-06 07:45:29Z

your javascript syntax inside map need to have correct return based on if-else condition.

A map() creates an array, so a return is expected for all code paths (if/elses).

you can combine the first if condition with this.acceptance === "Enabled" and no need to put else because it will throw "Unnecessary 'else' after 'return'"

 @wire(getPicklistValues, {
    recordTypeId: "$myObject.data.defaultRecordTypeId",
    fieldApiName: MY_OBJECT_STATUS
  })
  picklistValues({ data }) {
    if (data) {
      let increment = 1;
      this.stageOptions = data.values.map((item) => {
            if ((item.value === "Awaiting Approval" ||
            item.value === "Contract Acceptance" )
            && (this.acceptance === "Enabled")) {
                return {
                position: increment++,
                value: item.value,
                pathStatus: this.incompleteStep,
                tickIcon: false
                };
            }
            return {
              position: increment++,
              value: item.value,
              pathStatus: this.incompleteStep,
              tickIcon: false
            };
          
        } 
      );
    }
  }

Doing this you changed the logic of OP code, now both if and else condition return the same object, so they are now useless (no filter happens). — RubenDG
– RubenDG, Commented Dec 6, 2024 at 8:28
i was trying to fix that javascript map error. even OP code have same return value. let OP edit it accordingly — hendra
– hendra, Commented Dec 6, 2024 at 9:47

Stack Exchange Network

LWC custom path requires conditional loading of stages

2 Answers 2

You must log in to answer this question.

Linked

Hot Network Questions

LWC custom path requires conditional loading of stages

2 Answers 2

You must log in to answer this question.

Linked

Related

Hot Network Questions