Actions au niveau des lignes dans Datatable dans Lightning Web Component -LWC

Bonjour les pionniers,

Dans cet article de blog, nous apprendrons comment gérer les actions au niveau des lignes dans Lightning Datatable dans Lightning Web Component (CHANCE).

Critères d’acceptation : Créez une table de données Lightning qui affichera tous les détails du produit. Le composant Détails du produit doit avoir des actions au niveau de 2 lignes.

1. Afficher les détails – Lorsque l’utilisateur clique sur le bouton, il doit être redirigé vers la page de détails du produit (page d’enregistrement).
2. Supprimer – Lorsque l’utilisateur clique sur le bouton, il doit supprimer le produit de la base de données.

Action au niveau de la ligne dans Datatable dans LWC :

RowLevelAction.Controller

public class ProductClass {
    @AuraEnabled(cacheable = true)
    public static List<Product2> getProductDetails(){
        List<Product2> prodList = [SELECT Name, ProductCode, Family, IsActive, Description FROM Product2];
        return prodList;
    }

}

RowLevelActionComp.html

<template>
    <lightning-card title="Row Level Action on Product" icon-name="standard:product"> <br/>
        <template if:true={data}>
            <lightning-datatable key-field="Id" data={data} columns={columns} onrowaction={handleRowLevelAct}>

            </lightning-datatable>
        
        </template>
         <!-- Spinner -->
            <div if:true={showLoadingSpinner}>
                <lightning-spinner alternative-text="Loading" size="large"></lightning-spinner>
            </div>
    

    </lightning-card>
</template>

RowLevelActionComp.js

import { LightningElement, track, wire } from 'lwc';
import PaymentDetails from '@salesforce/apex/ProductClass.getProductDetails';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';
import { deleteRecord } from 'lightning/uiRecordApi';


//define row actions
const actions = [
    { label: 'Show Details', name: 'view' },
    { label: 'Delete', name: 'delete' }
 ];

const columns = [
    {label: 'Product Name',fieldName: 'Name' , type: 'text', sortable: true },
    {label: 'Product Code',fieldName: 'ProductCode' , type: 'text', sortable: true },
    {label: 'Product Family',fieldName: 'Family' , type: 'picklist', sortable: true },
    {label: 'Active',fieldName: 'IsActive' , type: 'checkbox', sortable: true },
    {label: 'Description',fieldName: 'Description' , type: 'text', sortable: true },
    {
        type: 'action',
        typeAttributes: {
            rowActions: actions,
            menuAlignment: 'right'
        }
    } 

]

export default class RowLevelActionComp extends NavigationMixin (LightningElement) {
 columns = columns;
@track error;
@track data;
@track showLoadingSpinner = false;
refreshTable;

//retrieving the products using wire service...
@wire(PaymentDetails)
wiredProd({error, data}){
    if(data){
        console.log('data is =>',data);
        this.data = data;
    } else if(error){
        this.error = "No Products to show";
    }
}

// Handle auto-number click event
handleRowLevelAct(event) {
    const recordId = event.detail.row.Id
    const actionName = event.detail.action.name;

    

    switch (actionName) {
        case 'view':
            this[NavigationMixin.Navigate]({
                type: 'standard__recordPage',
                attributes: {
                    recordId: recordId,
                    objectApiName: 'Product2',
                    actionName: 'view'
                }
            });
            break;
        case 'delete':
            this.showLoadingSpinner = true;
            deleteRecord(recordId)
            .then(() => {
                this.showLoadingSpinner = false;
               this.dispatchEvent(
                   new ShowToastEvent({
                       title : 'Success',
                       message : 'Your Product has been deleted successfully' ,
                       variant : 'success'
                   })
               );
               return refreshApex(this.refreshTable);
               
            })
            .catch(error => {
                this.dispatchEvent(
                    new ShowToastEvent({
                        title : 'Error while deleting record',
                        message : error.body.message ,
                        variant : 'success'
                    })
                );
        
             });
             break;
 
}
 }
}

RowLevelActionComp.xml

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

    </targets>
</LightningComponentBundle>

Dans l’exemple ci-dessus, dans le contrôleur, nous avons récupéré tous les détails du produit de l’objet Product.

Les données récupérées sont affichées dans un tableau de données Lightning avec des colonnes respectivement pour le nom du produit, le code du produit, la famille de produits, l’actif et la description.

Ici, supprimer l’enregistrement, NavigationMixinet AfficherToastEvent sont déjà importés selon les exigences. La colonne « Action » comprend les actions au niveau de la ligne pour Afficher les détails et « Supprimer ».

Le handleRowLevelAct La méthode est invoquée lorsqu’une action de ligne est déclenchée. Il vérifie le nom de l’action et exécute l’action correspondante.

Spinner dans LWC :

Nous avons utilisé une roulette de chargement dans ce composant Lightning Web. Comme c’est la meilleure pratique pour améliorer l’expérience utilisateur et indiquer qu’un processus est en cours.

Sortir:

Dans cette table de données éclair, lorsque l’utilisateur clique sur la flèche vers le bas sur le côté droit, le menu d’action au niveau de la ligne sera visible.

Ainsi, lorsque l’utilisateur clique sur « Afficher les détails », il sera redirigé vers la page de détail/page d’enregistrement du produit. Et, lorsque l’utilisateur clique sur « Supprimer », cet enregistrement particulier sera supprimé de la base de données.

De cette manière, nous avons appris à gérer les actions au niveau des lignes dans Lightning Datatable dans Lightning Web Component (LWC).

Restez à l’écoute !!

Les références:

1. Lot Apex dans Salesforce

2. Apex asynchrone dans Salesforce

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