Extend Preview and Test in Marketing Cloud Next

Step 1: Create and Deploy a Lightning Web Component

Create an LWC and deploy it to your org. The component provides the content that appears in your custom tab. Use the directory structure and file contents specified in the procedure.

1. Create a directory structure for your component:

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

   See Create Lightning Web Components.
2. Add this markup to 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. Add this code to customTab.js:

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

4. Add this metadata to 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. Add this content to 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. Deploy the component to your org.
   See Deploy Using Your Own Tools.

Step 2: Create a UiPreviewMessageTabDef Entry

1. In your org, click the setup icon and select Developer Console.
2. In the Developer Console, click the Query Editor tab.
3. At the bottom of the Query Editor, select the Use Tooling API checkbox.
4. Enter the following query, and then click Execute:

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

5. Click Insert Row and provide values for each required field. For field descriptions, see UiPreviewMessageTabDef.
6. To get the ID of the LWC you deployed, run the following query in the Query Editor:

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

7. Copy the Id value from your component and enter it in the LightningComponentDefId field.
8. Click Save Rows.

Step 3: Package your Extension