Rendu de modèle dans LWC Salesforce

Bonjour les pionniers !

Dans le domaine du développement Salesforce, les composants Web Lightning (LWC) sont devenus un outil puissant pour créer des interfaces utilisateur dynamiques et interactives. Au cœur de LWC se trouve son système de rendu de modèles, qui régit la manière dont les composants affichent les données et répondent aux interactions de l’utilisateur.

Dans ce blog, nous découvrirons le rendu de modèles ou le rendu conditionnel dans LWC et fournirons un exemple.

Alors, commençons…

Comprendre le rendu des modèles dans LWC

Le rendu de modèle dans LWC est le processus de génération dynamique de contenu HTML basé sur le fichier modèle du composant et les données qui lui sont fournies. LWC utilise une approche de rendu réactif, ce qui signifie que l’interface utilisateur se met à jour automatiquement chaque fois que les données sous-jacentes changent. Il en résulte une expérience utilisateur fluide et réactive.

Comprenons cela avec un exemple approprié.

Prenons un scénario dans lequel un utilisateur demande la création d’un compte. Voici donc le formulaire « Demande de compte » (un formulaire de modification d’enregistrement) avec ses champs tels que Nom, Téléphone, E-mail, Adresse de livraison, Adresse de facturation et un champ de case à cocher : « Adresse de facturation identique à l’adresse de livraison ».

Lorsque l’utilisateur coche la case, tous les champs de l’adresse de facturation doivent être masqués (car cela indique que l’adresse de facturation est égale à l’adresse de livraison). Lorsque l’utilisateur décoche la case ou la conserve telle quelle, le champ d’adresse de facturation doit être visible et l’utilisateur doit pouvoir y ajouter des détails.

Si vous souhaitez apprendre à créer un formulaire de modification d’enregistrement dans LWC, vous pouvez suivre ce lien.

Solution LWC :

templateRenderingLWC.html

<template>
    <div class="slds-modal__content slds-p-around_medium" >
        <div class="slds-box box-config  slds-box_x-small slds-text-heading_medium" style="font-family:Arial ;" ><b>Make a request for your Account here!!</b></div>

        <div class="slds-grid slds-wrap slds-p-around" >
            <lightning-card>

                <lightning-record-edit-form object-api-name={Account_Request_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={Name} ></lightning-input-field>
                            <lightning-input-field field-name={Phone} ></lightning-input-field>
                            <lightning-input-field field-name={Email} ></lightning-input-field>
                            <lightning-input-field field-name={ShippingCity} ></lightning-input-field>
                            <lightning-input-field field-name={ShippingState} ></lightning-input-field>
                            <lightning-input-field field-name={ShippingPostalCode} ></lightning-input-field>
                    
                            <lightning-input-field field-name={BillingAddSameasShippingAdd}   type="checkbox" onchange={handleCheckboxChange} ></lightning-input-field>
    
                                <template if:false={visible} >
                                    <div class="slds-size_2-of-2 slds-grid slds-wrap slds-form_horizontal slds-form" >

                                        <lightning-input-field field-name={BillingCity} ></lightning-input-field>
                                        <lightning-input-field field-name={BillingState} ></lightning-input-field>
                                        <lightning-input-field field-name={BillingPostalCode} ></lightning-input-field>
                                    </div>
                                   
                                </template>                       
                        </div>
                    </div>
                    <lightning-button type="submit" variant="brand" label="Save Request" class="slds-align_absolute-center" ></lightning-button>

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

        </div>
    </div>
</template>

templateRenderingLWC.js

import { LightningElement, track } from 'lwc';
import {ShowToastEvent} from 'lightning/platformShowToastEvent';
import ACCOUNT_REQUEST_OBJECT from '@salesforce/schema/AccountRequest__c';
import NAME_FIELD from '@salesforce/schema/AccountRequest__c.Name';
import PHONE_FIELD from '@salesforce/schema/AccountRequest__c.Phone__c';
import EMAIL_FIELD from '@salesforce/schema/AccountRequest__c.Email__c';
import BILLING_CITY_FIELD from '@salesforce/schema/AccountRequest__c.BillingCity__c';
import BILLING_STATE_FIELD from '@salesforce/schema/AccountRequest__c.BillingState__c';
import BILLING_POSTAL_CODE_FIELD from '@salesforce/schema/AccountRequest__c.BillingPostalCode__c';
import SHIPPING_CITY_FIELD from '@salesforce/schema/AccountRequest__c.ShippingCity__c';
import SHIPPING_STATE_FIELD from '@salesforce/schema/AccountRequest__c.ShippingState__c';
import SHIPPING_POSTAL_CODE_FIELD from '@salesforce/schema/AccountRequest__c.ShippingPostalCode__c';
import CHECKBOX_FIELD from '@salesforce/schema/AccountRequest__c.Billing_Add_same_as_Shipping_Add__c';

export default class TemplateRenderingLWC extends LightningElement {

    @track visible = false;

//Map the HTML side and above imported object and its fields here
Account_Request_Object = ACCOUNT_REQUEST_OBJECT;
Name = NAME_FIELD;
Phone = PHONE_FIELD;
Email = EMAIL_FIELD;
BillingCity = BILLING_CITY_FIELD;
BillingState = BILLING_STATE_FIELD;
BillingPostalCode = BILLING_POSTAL_CODE_FIELD;
ShippingCity = SHIPPING_CITY_FIELD;
ShippingState = SHIPPING_STATE_FIELD;
ShippingPostalCode = SHIPPING_POSTAL_CODE_FIELD;
BillingAddSameasShippingAdd = CHECKBOX_FIELD;

//Handle checkbox chanages here
    handleCheckboxChange(event) {
             //this.visible = event.target.checked;
             if(this.visible==true)
             {
                 this.visible=false;
             }
             else{
                 this.visible=true;
             }
             
        }


//Handle success event here
handleSuccess(event){
    const toastEvent = new ShowToastEvent({
        title : 'Success',
        message : 'Your Account creation request has been sent successfully' ,
        varient : 'success' 
    });
    this.dispatchEvent(toastEvent);
}

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

templateRenderingLWC.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>

CHANCE Sortie 1 :

Ici, nous n’avons pas coché la case. Ainsi, nous avons rempli toutes les valeurs.

CHANCE Sortie 2:

Dans la sortie ci-dessus, nous avons utilisé le rendu du modèle. Ainsi on coche la case, elle cache les champs de facturation.

Vous pouvez voir qu’ici nous avons utilisé une case à cocher pour que l’adresse de facturation soit la même que l’adresse de livraison. Mais comment ça marche ?

Ainsi, pour que l’adresse de facturation soit la même que l’adresse de livraison, nous implémentons simplement la logique de déclenchement. Si vous souhaitez en savoir plus, suivez ce lien.

Conclusion

De cette façon, nous avons implémenté ici le rendu de modèle ou le rendu conditionnel en utilisant l’exemple d’adresse.

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