Erweitern von OmniStudio Lightning-Webkomponenten

Passen Sie das Verhalten und den Stil einer Anwendung an, indem Sie OmniStudio Lightning-Webkomponenten erweitern. Überschreiben Sie beispielsweise Eigenschaften, fügen Sie andere Komponenten hinzu oder fügen Sie HTML ein.

Hinweis Wenn Sie unter "Setup" die Laufzeit für verwaltete Pakete deaktivieren und die Standardlaufzeit verwenden, sollten Sie Lightning-Webkomponenten wie "Block" oder "TypeAhead" nicht erweitern. Das Ändern dieser Komponenten kann zu Inkompatibilitäten zwischen OmniStudio und OmniStudio für verwaltete Pakete führen.

In diesem Codebeispiel erweitert eine benutzerdefinierte Lightning Webkomponente die Lightning Webkomponente "Schaltfläche". Ersetzen Sie die Namespace-Variable im Codebeispiel durch den Namespace des verwendeten OmniStudio-Pakets. Bei OmniStudio in der Standardlaufzeit lautet der Namespace 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;
}

Hinweis

Außerhalb des Pakets erstellte benutzerdefinierte Lightning Webkomponenten können keine Salesforce Lightning Webkomponenten verwenden, die Salesforce Ressourcen verwenden oder sich zur Laufzeit auf die Komponente auswirken. Weitere Informationen finden Sie unter Salesforce-Module.

Hinweis

Benutzerdefinierte Lightning Webkomponenten geben nur dann Fehler aus, wenn der Debug-Modus aktiviert ist. Weitere Informationen finden Sie unter Debuggen von Lightning-Webkomponenten.

1. Stellen Sie sicher, dass IDX Workbench oder Salesforce DX lokal eingerichtet ist. Informationen zum Einrichten von IDX Workbench oder Salesforce DX finden Sie unter Einrichten von Lightning Webkomponenten.
2. Wählen Sie aus, welche Komponente Sie erweitern möchten. Eine Liste der Lightning Webkomponenten finden Sie unter OmniStudio Lightning Web Components.
3. Navigieren Sie zum Erstellen einer Lightning Webkomponente zu Ihrem lwc-Ordner in Ihrem Projekt und führen Sie den Befehl lightning generate component Salesforce CLI aus. Beispiel:

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

   Weitere Informationen zum Erstellen einer Lightning Webkomponente finden Sie unter Erstellen von Lightning Webkomponenten. Eine vollständige Liste der verfügbaren Salesforce CLI-Befehle finden Sie unter Lightning Commands.

4. Importieren und erweitern Sie die Lightning-Webkomponente in Ihrer JavaScript-Datei. Siehe Codebeispiel auf dieser Seite.
5. Damit die benutzerdefinierte Lightning Webkomponente mit OmniStudio Lightning Webkomponenten kompatibel ist, müssen Sie in Ihrer XML Konfigurationsdatei zwei Metadaten-Tags festlegen:
   • Wenn Lightning Web Security (LWS) deaktiviert ist, fügen Sie den Namespace Ihres OmniStudio-Pakets mithilfe des Metadatentags runtimeNamespace hinzu. Sehen Sie sich das Codebeispiel auf dieser Seite an. Weitere Informationen zum Suchen nach dem Namespace Ihres Pakets finden Sie unter Anzeigen des Namespace und der Version verwalteter Pakete.
     

     Wichtig Wenn LWS aktiviert ist, führt die Einstellung von runtimeNamespace in Ihren Komponenten zu Fehlern wie "Cannot use runtime namespace 'somename' in module c-someComponentName". Informationen dazu, ob LWS in Ihrer Organisation aktiviert ist, finden Sie unter Aktivieren der Lightning-Websicherheit in einer Organisation.
   • Legen Sie das Metadaten-Tag isExposed auf true fest. Siehe Codebeispiel auf dieser Seite.
6. Aktivieren Sie mithilfe des Dienstprogramms "Allgemeine Aktion" eine benutzerdefinierte Lightning Webkomponente, um Remote-Aufrufe zu tätigen. Entsprechende Informationen finden Sie unter Tätigen von Remote-Aufrufen innerhalb von OmniScripts über Lightning Webkomponenten.