Ampliar vista previa y prueba en Marketing Cloud Siguiente

Paso 1: Crear e implementar un componente web Lightning

Cree un LWC e impleméntelo en su organización. El componente proporciona el contenido que aparece en su ficha personalizada. Utilice la estructura de directorio y el contenido de archivo especificados en el procedimiento.

1. Cree una estructura de directorio para su componente:

   
   lwc/
     customTab/
       customTab.html
       customTab.js
       customTab.js-meta.xml
   package.xml
   

   Consulte Crear componentes web Lightning.
2. Agregue esta marca a customTab.html:

   
   <template>
     <div style="padding: 20px;">
       <div>This content appears in the custom tab.</div>
       <div>previewData.channelType: {previewData.channelType}</div>
       <div>previewData.content: {previewData.content}</div>
       <div>previewData.contentKey: {previewData.contentKey}</div>
       <div>previewData.emailSubject: {previewData.emailSubject}</div>
       <div>previewData.emailPreheader: {previewData.emailPreheader}</div>
     </div>
   </template>
   

3. Agregue este código a customTab.js:

   
   import { LightningElement, api } from "lwc";
   export default class CustomTab extends LightningElement {
       @api previewData;
   }
   

4. Agregue estos metadatos a customTab.js-meta.xml:

   <?xml version="1.0" encoding="UTF-8"?>
   <LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
       <apiVersion>64.0</apiVersion>
       <isExposed>true</isExposed>
       <capabilities>
           <capability>lightning__dynamicComponent</capability>
       </capabilities>
   </LightningComponentBundle>
        

5. Agregue este contenido a package.xml:

   
   <?xml version="1.0" encoding="UTF-8"?>
   <Package xmlns="http://soap.sforce.com/2006/04/metadata">
       <types>
           <members>*</members>
           <name>LightningComponentBundle</name>
       </types>
       <version>64.0</version>
   </Package>
   

6. Implemente el componente en su organización.
   Consulte Implementar utilizando sus propias herramientas.

Paso 2: Crear una entrada UiPreviewMessageTabDef

1. En su organización, haga clic en el icono de configuración y seleccione Developer Console.
2. En Developer Console, haga clic en la ficha Editor de consultas.
3. En la parte inferior del Editor de consultas, seleccione la casilla de verificación Utilizar API de herramientas.
4. Ingrese la siguiente consulta y luego haga clic en Ejecutar:

   SELECT Id, DeveloperName, TabName, IsActive, SupportedChannel, LightningComponentDefId
   FROM UiPreviewMessageTabDef
   

5. Haga clic en Insertar fila y proporcione valores para cada campo obligatorio. Para obtener descripciones de campos, consulte UiPreviewMessageTabDef.
6. Para obtener el Id. del LWC que implementó, ejecute la siguiente consulta en el Editor de consultas:

   SELECT Id, DeveloperName, IsExposed, NamespacePrefix
   FROM LightningComponentBundle
   WHERE IsExposed = true
   

7. Copie el valor de Id de su componente e ingrese este valor en el campo LightningComponentDefId.
8. Haga clic en Guardar filas.

Paso 3: Empaquetar su extensión