Maîtriser le formulaire de modification d’enregistrement Lightning dans LWC Salesforce

Bonjour les pionniers…

Dans le monde du développement Salesforce, les composants Web Lightning (LWC) ont révolutionné la façon dont nous construisons des interfaces utilisateur. L’un des composants clés de notre boîte à outils est le formulaire Lightning Record Edit, qui simplifie le processus de modification des enregistrements dans Salesforce.

Dans ce blog, nous approfondirons les tenants et les aboutissants du composant Lightning Record Edit Form dans LWC, en utilisant l’objet Contact comme exemple.

Alors, commençons…

Qu’est-ce que le formulaire de modification d’enregistrement Lightning dans LWC ?

Le formulaire Lightning Record Edit Form est un composant LWC puissant qui offre un moyen simplifié de créer, afficher ou modifier un enregistrement dans Salesforce. Il gère les opérations de récupération, d’affichage et de mise à jour des données, ce qui en fait un outil essentiel pour créer des interfaces conviviales.

Création d’un formulaire de modification d’enregistrement Lightning dans LWC :

Commençons par créer un formulaire de modification d’enregistrement Lightning pour l’objet Contact dans LWC. Voici un exemple simple de la façon d’y parvenir :

RecordEditFormComp.html

<template>
    <lightning-card title="Record Edit Form Example" >
    <lightning-record-edit-form object-api-name={Contact_Object} onsuccess={handleSuccess} onerror={handleError} >
        <div class="slds-grid" >
            <div class="slds-size_2-of-2 slds-grid slds-wrap slds-form_horizontal slds-form" >
                <lightning-input-field field-name={FirstName} ></lightning-input-field>
                <lightning-input-field field-name={LastName} ></lightning-input-field>
                <lightning-input-field field-name={Email} ></lightning-input-field>
                <lightning-input-field field-name={Mobile} ></lightning-input-field>
                
            </div>
        </div>
        <lightning-button type="submit" variant="brand" label="Save Contact" class="slds-align_absolute-center"  onclick={refreshClick}></lightning-button>

    </lightning-record-edit-form>
</lightning-card>
</template>

RecordEditFormComp.js

import { LightningElement } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import CONTACT_OBJECT from '@salesforce/schema/Contact';
import FIRSTNAME_FIELD from '@salesforce/schema/Contact.FirstName';
import LASTNAME_FIELD from '@salesforce/schema/Contact.LastName';
import EMAIL_FIELD from '@salesforce/schema/Contact.Email';
import MOBILE_FIELD from '@salesforce/schema/Contact.MobilePhone';


export default class RecordEditFormComp extends LightningElement {
Contact_Object = CONTACT_OBJECT;
FirstName = FIRSTNAME_FIELD;
LastName = LASTNAME_FIELD;
Email = EMAIL_FIELD;
Mobile = MOBILE_FIELD;

handleSuccess(event){
    const toastEvent = new ShowToastEvent({
        title : 'Success',
        message : 'Your Contact has been added successfully' ,
        varient : 'success' 
    });
    this.dispatchEvent(toastEvent);
}

handleError(event) {
    let errorMessage = event.detail.detail;
    console.log("response",errorMessage);
    this.dispatchEvent(
        new ShowToastEvent({
            title: 'Error',
            message: errorMessage,
            variant: 'error'
        })
    );
}

}

RecordEditFormComp.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>59.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Dans ce code LWC :

1. Nous utilisons le composant pour créer un formulaire permettant de créer des enregistrements de contact.
2. Nous spécifions l’attribut object-API-name comme « Contact » pour indiquer que nous travaillons avec des enregistrements de contact.
3. À l’intérieur du formulaire, nous incluons les composants pour les champs FirstName, LastName et Email, Mobile de l’objet Contact.
4. Nous incluons également un composant pour enregistrer les modifications.
5. Nous importons la classe ShowToastEvent nécessaire à partir du framework Lightning Web Component.
6. Nous définissons une méthode nommée handleSuccess pour gérer l’événement de réussite déclenché par le formulaire de modification d’enregistrement. Dans la méthode handleSuccess, nous créons un nouveau ShowToastEvent et le diffusons pour afficher un message de réussite à l’utilisateur. Il en va de même pour l’événement handleError.

Sortir:

Ainsi, nous avons appris à créer un formulaire de modification d’enregistrement éclair dans Salesforce.

Conclusion:

Dans cet article de blog, nous avons exploré le composant Lightning Record Edit Form dans les composants Web Lightning, en utilisant l’objet Contact comme exemple. Nous avons appris respectivement à créer un formulaire de modification d’enregistrement, à gérer les succès et à gérer les événements d’erreur.

Bonne lecture…

Ressources:

1. Guide du développeur de composants Web Lightning
2. Bibliothèque de composants Lightning
3. Trailhead : Notions de base des composants Web Lightning

Vous pouvez également lire :

1. Une introduction à Salesforce CPQ
2. Salesforce CPQ et ses fonctionnalités clés
3. Libérer la puissance de l’IA : Einstein pour les développeurs
4. Révolutionner l’engagement client : le chatbot Salesforce Einstein