Marketing Cloud Next でのプレビューとテストの拡張

ステップ 1: Lightning Web コンポーネントの作成およびリリース

LWC を作成して組織にリリースします。このコンポーネントは、カスタムタブに表示されるコンテンツを提供します。手順で指定されたディレクトリ構造とファイルの内容を使用します。

1. コンポーネントのディレクトリ構造を作成します。

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

   「Create Lightning Web Components」を参照してください。
2. 次のマークアップを 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. 次のコードを customTab.js に追加します。

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

4. 次のメタデータを 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. 次のコンテンツを 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 Using Your Own Tools」を参照してください。

ステップ 2: UiPreviewMessageTabDef エントリの作成

1. 組織で、設定アイコンをクリックし、[開発者コンソール] を選択します。
2. 開発者コンソールで、[Query Editor (クエリエディター)] タブをクリックします。
3. クエリエディタの下部で、「Use Tooling API」チェックボックスをオンにします。
4. 次のクエリを入力し、[実行] をクリックします。

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

5. [Insert Row (行を挿入)] をクリックし、各必須項目の値を指定します。項目の説明については、「UiPreviewMessageTabDef」を参照してください。
6. リリースした LWC の ID を取得するには、クエリエディターで次のクエリを実行します。

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

7. コンポーネントから Id 値をコピーして、LightningComponentDefId フィールドに入力します。
8. [Save Rows (行を保存)] をクリックします。

ステップ 3: 拡張のパッケージ化