Ampliar componentes web Lightning de OmniStudio

Personalice el comportamiento y el estilo de una aplicación ampliando componentes web Lightning OmniStudio. Por ejemplo, sustituya propiedades, agregue otros componentes o inserte HTML.

Nota Si desactiva Tiempo de ejecución de paquete gestionado en Configuración y utiliza el tiempo de ejecución estándar, recomendamos que no amplíe componentes web Lightning como Block o TypeAhead. El cambio de estos componentes puede provocar incompatibilidades entre OmniStudio y OmniStudio para paquetes gestionados.

En este ejemplo de código, un componente web Lightning personalizado amplía el componente web Lightning Button. Sustituya la variable de espacio de nombres en el ejemplo de código por el espacio de nombres del paquete de OmniStudio que está utilizando. Para OmniStudio en tiempo de ejecución estándar, el espacio de nombres es 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;
}

Nota

Los componentes web Lightning personalizados creados fuera del paquete no pueden utilizar ningún componente web Salesforce Lightning que utilice recursos de Salesforce o afecte al componente en tiempo de ejecución. Para obtener más información, consulte Módulos de Salesforce.

Nota

Los componentes web Lightning personalizados no arrojan errores a menos que el Modo de depuración esté activado. Para obtener más información, consulte Depurar componentes web Lightning.

1. Asegúrese de que tiene IDX Workbench o Salesforce DX configurado localmente. Para obtener información sobre la configuración de IDX Workbench o Salesforce DX, consulte Configurar componentes web Lightning.
2. Seleccione qué componente desea ampliar. Para obtener una lista de componentes web Lightning, consulte Componentes web Lightning.
3. Para crear un componente web Lightning, navegue a su carpeta lwc en su proyecto y ejecute el comando lightning generate component Salesforce CLI. Por ejemplo:

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

   Para obtener más información acerca de la creación de un componente web Lightning, consulte Crear componentes web Lightning. Para obtener una lista completa de comandos Salesforce CLI disponibles, consulte Comandos Lightning.

4. En su archivo JavaScript, importe y amplíe el componente web Lightning. Consulte el ejemplo de código en esta página.
5. Para hacer que el componente web Lightning personalizado sea compatible con componentes web Lightning de OmniStudio, debe establecer dos etiquetas de metadatos en su archivo de configuración XML:
   • Si Seguridad web Lightning (LWS) está desactivada, agregue el espacio de nombres de su paquete de OmniStudio utilizando la etiqueta de metadatos runtimeNamespace. Consulte el ejemplo de código en esta página. Para obtener más información sobre la búsqueda del espacio de nombres de su paquete, consulte Ver el espacio de nombres y la versión de paquetes gestionados.
     

     Importante Si LWS está activado, la configuración de runtimeNamespace en sus componentes causa errores similares a "No se puede utilizar el espacio de nombres de tiempo de ejecución 'somename' en el módulo c-someComponentName". Para determinar si LWS está activado en su organización, consulte Activar Lightning Web Security en una organización.
   • Establezca la etiqueta de metadatos isExposed en true. Consulte el ejemplo de código en esta página.
6. Active un componente web Lightning personalizado para realizar llamadas remotas utilizando la utilidad Acción común. Consulte Realizar llamadas remotas en OmniScripts desde componentes web Lightning.