Marketing Cloud Next에서 미리 보기 및 테스트 확장

1단계: Lightning 웹 구성 요소 만들기 및 배포

LWC를 만들고 조직에 배포합니다. 구성 요소는 사용자 정의 탭에 표시되는 콘텐츠를 제공합니다. 절차에 지정된 디렉터리 구조 및 파일 콘텐츠를 사용합니다.

1. 구성 요소에 대한 디렉터리 구조를 만듭니다.

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

   Lightning 웹 구성 요소 만들기를 참조하십시오.
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. 조직에 구성 요소를 배포합니다.
   자체 도구를 사용하여 배포를 참조하십시오.

2단계: UiPreviewMessageTabDef 항목 만들기

1. 조직에서 설정 아이콘을 클릭하고 개발자 콘솔을 선택합니다.
2. Developer Console에서 쿼리 편집기 탭을 클릭합니다.
3. 쿼리 편집기 하단에서 도구 사용 API 확인란을 선택합니다.
4. 다음 쿼리를 입력한 다음, 실행을 클릭합니다.

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

5. 행 삽입을 클릭하고 각 필수 필드에 대한 값을 입력합니다. 필드 설명은 UiPreviewMessageTabDef를 참조하십시오.
6. 배포한 LWC의 ID를 가져오려면 쿼리 편집기에서 다음 쿼리를 실행합니다.

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

7. 구성 요소에서 Id 값을 복사하고 LightningComponentDefId 필드에 입력합니다.
8. 행 저장을 클릭합니다.

3단계: 확장 패키징