Esikatselun ja testauksen laajentaminen Marketing Cloud Next -sovelluksessa

Vaihe 1: Lightning luominen ja käyttöönotto

Luo LWC ja ota se käyttöön organisaatiossasi. Komponentti tarjoaa mukautetussa välilehdessäsi näytettävän sisällön. Käytä toimenpiteessä määritettyä hakemiston rakennetta ja tiedoston sisältöä.

1. Luo komponentillesi hakemiston rakenne:

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

   Lisätietoja on kohdassa Lightning-verkkokomponenttien luominen.
2. Lisää tämä koodi kohtaan 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. Lisää tämä koodi customTab.js-tiedostoon:

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

4. Lisää tämä metadata customTab.js-meta.xml-tiedostoon:

   <?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. Lisää tämä sisältö package.xml-tiedostoon:

   
   <?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. Ota komponentti käyttöön organisaatiossasi.
   Lisätietoja on kohdassa Ota käyttöön omilla työkaluillasi.

Vaihe 2: UiPreviewMessageTabDef-merkinnän luominen

1. Napsauta organisaatiostasi määrityskuvaketta ja valitse Developer Console.
2. Napsauta Developer Consolesta kyselyeditorin välilehteä.
3. Valitse kyselyeditorin alalaidasta Käytä Tooling API:a -valintaruutu.
4. Syötä seuraava kysely ja napsauta sitten Suorita:

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

5. Napsauta Lisää rivi ja anna arvot jokaiselle pakolliselle kentälle. Katso kenttien kuvaukset kohdasta UiPreviewMessageTabDef.
6. Suorita seuraava kysely kyselyeditorissa saadaksesi käyttöönottamasi LWC:n tunnuksen:

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

7. Kopioi komponenttisi Id-arvo ja syötä se LightningComponentDefId-kenttään.
8. Napsauta Tallenna rivit.

Vaihe 3: Laajennuksen pakkaaminen