Parcours Salesforce personnalisé LWC / Blogs / Perficient

Créer une expérience utilisateur transparente et intuitive est crucial pour toute application. Dans Salesforce, un excellent moyen de guider les utilisateurs à travers les différentes étapes d’un processus consiste à utiliser des indicateurs de progression. Dans cet article de blog, je vais vous montrer comment créer un chemin Salesforce personnalisé à l’aide de l’outil lightning-progress-indicator composant dans Lightning Web Components (LWC). Cet exemple se concentrera sur un formulaire de détails utilisateur, démontrant comment naviguer entre les sections avec un indicateur visuel clair.

Introduction

L’assistant Salesforce Path affiche un guide visuel en haut des enregistrements, montrant les différentes étapes ou étapes d’un processus. Le personnaliser avec LWC vous permet de tirer parti des dernières technologies Salesforce pour une expérience utilisateur plus dynamique et personnalisée. En créant un LWC Salesforce Path personnalisé, vous pouvez fournir aux utilisateurs une interface attrayante qui indique clairement leur progression.

Scénario

Nous avons un Projet objet utilisé pour suivre les projets de mise en œuvre pour les clients. Le Statut Le champ de liste de sélection de l’enregistrement de projet peut avoir les valeurs suivantes :

• Nouveau
• En cours
• En attente
• Complété
• Échoué

Nous souhaitons créer un chemin qui représente visuellement ces statuts sur la page d’enregistrement du projet. Le chemin sera mis à jour dynamiquement en fonction du statut sélectionné et fournira un bouton pour sélectionner le statut final, permettant aux utilisateurs de suivre plus facilement la progression du projet en un coup d’œil.

Étapes de mise en œuvre

Créer le composant LWC

1.Modèle HTML :

<template>
    <lightning-card title="Project Status Path">
        <div class="slds-p-around_medium">
            <!-- Path Indicator -->
            <lightning-progress-indicator 
                current-step={currentStep}
                variant="base">
                <template for:each={statusOptions} for:item="status">
                    <lightning-progress-step 
                        key={status.value}
                        label={status.label}
                        value={status.value}>
                    </lightning-progress-step>
                </template>
            </lightning-progress-indicator>

            <!-- Status Selector -->
            <div class="slds-m-top_medium">
                <lightning-combobox
                    name="status"
                    label="Select Final Status"
                    value={selectedStatus}
                    placeholder="Select Status"
                    options={statusOptions}
                    onchange={handleStatusChange}>
                </lightning-combobox>

                <lightning-button
                    class="slds-m-top_medium"
                    label="Select Closed Status"
                    variant="brand"
                    onclick={handleSelectStatus}>
                </lightning-button>
            </div>
        </div>
    </lightning-card>
</template>

2. Contrôleur JavaScript :

import { LightningElement, track, api } from 'lwc';
import { getRecord, updateRecord } from 'lightning/uiRecordApi';
import STATUS_FIELD from '@salesforce/schema/Project__c.Status__c';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';

export default class ProjectPath extends LightningElement {
    @api recordId;
    @track statusOptions = [
        { label: 'New', value: 'New' },
        { label: 'In Progress', value: 'In Progress' },
        { label: 'On Hold', value: 'On Hold' },
        { label: 'Completed', value: 'Completed' },
        { label: 'Failed', value: 'Failed' }
    ];
    @track selectedStatus="";
    @track currentStep = 'New';

    connectedCallback() {
        this.fetchRecord();
    }

    fetchRecord() {
        getRecord({ recordId: this.recordId, fields: [STATUS_FIELD] })
            .then(result => {
                this.selectedStatus = result.fields.Status__c.value;
                this.currentStep = this.selectedStatus;
            })
            .catch(error => {
                console.error('Error fetching record:', error);
            });
    }

    handleStatusChange(event) {
        this.selectedStatus = event.detail.value;
    }

    handleSelectStatus() {
        const fields = {};
        fields.Id = this.recordId;
        fields.Status__c = this.selectedStatus;
        const recordInput = { fields };

        updateRecord(recordInput)
            .then(() => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Success',
                        message: 'Status updated successfully',
                        variant: 'success'
                    })
                );
                this.currentStep = this.selectedStatus;
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title: 'Error',
                        message: 'Error updating status',
                        variant: 'error'
                    })
                );
                console.error('Error updating record:', error);
            });
    }
}

3. Styles CSS (facultatif) :

.slds-progress-indicator .slds-progress-step {
    transition: background-color 0.3s;
}

.slds-progress-indicator .slds-progress-step.slds-is-complete {
    background-color: #0ced48; /* Green for Completed */
}

.slds-progress-indicator .slds-progress-step.slds-is-active {
    background-color: #22A7F0; /* Blue for Active */
}

.slds-progress-indicator .slds-progress-step.slds-is-incomplete {
    background-color: #d8d8d8; /* Gray for Incomplete */
}

.slds-progress-indicator .slds-progress-step[data-value="Failed"] {
    background-color: #f44336; /* Red for Failed */
}

Résultat final

En suivant ces étapes, vous créerez un indicateur de chemin dynamique pour l’objet Projet, permettant aux utilisateurs de suivre visuellement l’état de leur projet. Cela améliore l’expérience utilisateur et simplifie la gestion de projet.

Conclusion

Dans cet article, nous avons expliqué comment créer un LWC de chemin Salesforce personnalisé à l’aide de l’outil lightning-progress-indicator composant. Cette implémentation améliore non seulement l’expérience utilisateur, mais aide également à gérer efficacement les statuts des projets.

Pour des conseils techniques plus détaillés, visitez le Documentation pour les développeurs Salesforce. Si vous souhaitez approfondir votre compréhension des composants Web Lightning, consultez notre guide sur Implémentation de composants Lightning.