Extension des composants Web Lightning Omnistudio

Personnalisez le comportement et le style d'une application en étendant les composants Web Omnistudio Lightning. Par exemple, remplacez les propriétés, ajoutez d'autres composants ou insérez du code HTML.

Remarque Si vous désactivez Exécution de package géré dans Configuration et utilisez l'exécution standard, nous recommandons de ne pas étendre les composants Web Lightning tels que Block ou TypeAhead. La modification de ces composants peut entraîner des incompatibilités entre Omnistudio et Omnistudio pour les packages gérés.

Dans cet exemple de code, un composant Web Lightning personnalisé étend le composant Web Lightning Bouton. Remplacez la variable d'espace de noms de l'exemple de code par l'espace de noms du package Omnistudio que vous utilisez. Pour Omnistudio à l'exécution standard, l'espace de noms est omnistudio.

//.js

import Button from "namespace/button";

export default class buttonExtended extends Button {  
//override the property here so it gets triggered

    onclickbutton() {    
    this.label = "Button clicked";  

}}

//.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?><LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>45.0</apiVersion>    
    <isExposed>true</isExposed>    
    <masterLabel>button_extended</masterLabel>    
    <description>Button extended</description>    
    <targets>      
        <target>lightning__RecordPage</target>      
        <target>lightning__AppPage</target>      
        <target>lightning__HomePage</target>  
    </targets>
    <runtimeNamespace>namespace</runtimeNamespace>
</LightningComponentBundle>

//.html

<template>
//add HTML here to override the template layout
</template>

//_slds.css

//add CSS to override or append the SLDS theme css
.slds-button {
    background: #cccccc;
    border-color: #dddddd;
}

Remarque

Les composants Web Lightning personnalisés élaborés hors du package ne peuvent utiliser aucun composant Web Salesforce Lightning qui utilise des ressources Salesforce ou affecte le composant à l'exécution. Pour plus d'informations, consultez Modules Salesforce.

Remarque

Les composants Web Lightning personnalisés ne renvoient pas d'erreurs, sauf si le mode de débogage est activé. Pour plus d'informations, voir Débogage de composants Web Lightning.

1. Assurez-vous que vous avez configuré IDX Workbench ou Salesforce DX localement. Pour plus d'informations sur la configuration d'IDX Workbench ou Salesforce DX, consultez Configuration de composants Web Lightning.
2. Choisissez le composant que vous souhaitez étendre. Pour la liste des composants Web Lightning, voir Composants Web Lightning OmniStudio.
3. Pour créer un composant Web Lightning, accédez à votre dossier lwc dans votre projet, puis exécutez la commande lightning generate component Salesforce CLI . Par exemple :

   sf lightning generate component --type lwc --name componentname_extended

   Pour plus d'informations sur la création d'un composant Web Lightning, consultez Création de composants Web Lightning . Pour la liste complète des commandes Salesforce CLI disponibles, voir Lightning Commands (Commandes Lightning).

4. Dans votre fichier JavaScript, importez et étendez le composant Web Lightning. Voir l'exemple de code sur cette page.
5. Pour rendre le composant Web Lightning personnalisé compatible avec les composants Web Lightning Omnistudio, vous devez définir deux balises de métadonnées dans votre fichier de configuration XML:
   • Si Lightning Web Security (LWS) est désactivé, ajoutez l'espace de noms de votre package OmniStudio en utilisant la balise de métadonnées runtimeNamespace . Consultez l'exemple de code dans cette page. Pour plus d'informations sur la recherche de l'espace de noms de votre package, consultez Afficher l'espace de noms et la version des packages gérés.
     

     Important Si LWS est activé, la définition de runtimeNamespace dans vos composants entraîne des erreurs similaires à « Impossible d'utiliser l'espace de noms d'exécution 'somename' dans le module c-someComponentName ». Pour déterminer si LWS est activé dans votre organisation, consultez Activation de Lightning Web Security dans une organisation.
   • Définissez la balise de métadonnées isExposed sur true. Voir l'exemple de code sur cette page.
6. Activez un composant Web Lightning personnalisé pour passer des appels à distance en utilisant l'utilitaire Action commune. Voir Appels distants dans des Omniscripts à partir de composants Web Lightning.