Skip to content

Component Name: customOrderPath

Last Updated: 2025-09-29 Source Code: https://bitbucket.org/i2cinc/i2c.salesforce.metadata/src/STAGING/force-app/main/default/lwc/customOrderPath

API Name: c-customOrderPath Type: UI Component (Path) Target: Not specified

Business Purpose

Displays a custom path UI for Order status progression (similar to Salesforce Path component). Shows picklist values as path steps, highlights current status, allows clicking to select next status, and includes special logic for cancelling Activated orders with confirmation dialog.

User Interface

Visual Description

  • Layout: Horizontal path with status steps
  • Key UI Elements: Status buttons, "Mark Status as Complete" button
  • Responsive: SLDS path styling
  • States: Complete (green), Current (blue), Incomplete (gray)

Component Structure

Files

  • customOrderPath.html - Template
  • customOrderPath.js - Controller (217 lines)
  • customOrderPath.js-meta.xml - Configuration

JavaScript Controller

Properties (API)

@api recordId

  • Type: String
  • Description: Order record ID

Tracked Properties

selectedValue

  • User's manually selected status

showSpinner

  • Loading state during update

btnLabel

  • Dynamic button label based on context

currentStatus

  • Current Order.Status value

allPicklistValues

  • All Status picklist values

Wire Adapters

@wire(getObjectInfo, { objectApiName: ORDER_OBJECT })

  • Gets Order object metadata

@wire(getPicklistValues, { recordTypeId, fieldApiName: Order.Status })

  • Loads Status picklist values

@wire(getRecord, { recordId, fields: ['Order.Id', 'Order.Status'] })

  • Loads current Order status
  • Updates button label based on status

Computed Properties

picklistValues

  • Filters and maps picklist to path items
  • Excludes "Cancelled" unless it's current status
  • Assigns CSS classes (complete/current/incomplete)

buttonLabel

  • Returns current button label

Event Handlers

handleSelect(event)

  • User clicks a status step
  • Sets selectedValue
  • Changes button label to "Mark as Current Status"

async handleMarkAsSelected()

Special Logic: - If currentStatus === "Activated": - Shows browser confirm() dialog - If confirmed, updates to "Cancelled" - Returns early - Otherwise: - If no manual selection, auto-increments to next status - Updates Order.Status via updateRecord() - Shows toast on success/error

Events

Uses ShowToastEvent for user feedback

Styling

SLDS Classes

  • slds-path__item
  • slds-is-complete, slds-is-current, slds-is-active, slds-is-incomplete

Dependencies

Lightning Platform

  • lightning/uiObjectInfoApi: Object/picklist metadata
  • lightning/uiRecordApi: getRecord, updateRecord
  • lightning/platformShowToastEvent: Toast notifications

Objects

  • Order: Id, Status

Usage Examples

<!-- On Order record page -->
<c-custom-order-path record-id={recordId}></c-custom-order-path>

⚠️ Pre-Go-Live Concerns

CRITICAL

  • Browser confirm() dialog: Uses browser confirm() instead of Lightning modal (poor UX, not customizable)
  • No validation rules respected: Directly updates Status field without checking validation

HIGH

  • No unit tests: Zero coverage
  • Auto-increment logic fragile: Assumes picklist order determines workflow (lines 134-136)
  • Hardcoded "Activated" and "Cancelled": Logic tied to specific status values (lines 90, 100)
  • Missing error details: Lines 167-196 parse error but may miss some formats

MEDIUM

  • Path excludes Cancelled: Users can't see Cancelled in path unless already Cancelled (lines 57-61)
  • Button label management complex: Multiple places update btnLabel

LOW

  • selectedValue reset: Line 164 resets after update (may be intentional)

Maintenance Notes

Complexity: Medium-High Key Notes: - Custom implementation of Salesforce Path for Order.Status - "Activated" status gets special treatment (cancel confirmation) - Auto-increment assumes picklist order = workflow order - Uses browser confirm() which should be replaced with Lightning modal - Filtering logic excludes "Cancelled" from path unless current

Browser Compatibility: - Standard browser support (browser confirm() works everywhere)