Lightning Web Components에서 빠른 작업 만들기

Salesforce의 Summer '21 주요 버전 업그레이드에서 Lightning Web Components (LWC)를 사용하여 사용자 정의 빠른 작업을 만들 수 있습니다. 이 기사에서는 LWC를 사용하여 빠른 작업을 기본적으로 만드는 방법과 참고 사항에 대해 설명합니다.

만드는 방법

다음과 같이 js-meta.xml 파일을 만듭니다. actionType 를 ScreenAction 로 하면 모달 표시, Action 로 하면 Headless (퀵 액션 호출시에 모달을 표시하지 않고 백그라운드에서 처리를 실행한다) 의 액션을 작성할 수 있습니다.

exampleQuickAction.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>52.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
      <target>lightning__RecordAction</target>
    </targets>
     <targetConfigs>
    <targetConfig targets="lightning__RecordAction">
      <actionType>ScreenAction</actionType>
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>

Headless 작업의 경우 HTML 파일을 만들지 않고 JavaScript 파일에 공용 invoke 함수를 만듭니다. 이 함수는 액션 런타임에 호출됩니다.

exampleHeadlessAction.js

import { LightningElement, api } from 'lwc';

export default class ExampleHeadlessAction extends LightningElement {
  @api invoke() {
    // Do something
  }
}

빠른 작업 설정

구성 요소를 배포한 후 빠른 작업 유형에서 Lightning Web コンポーネント를 선택한 다음 배포된 구성 요소를 선택합니다. 페이지 레이아웃에 저장한 빠른 작업을 배치합니다. lightning__RecordAction라는 이름에서 알 수 있듯이 글로벌 액션에는 대응하지 않습니다.

ScreenAction으로 모달 헤더 바닥글 사용자 정의

ScreenAction에서 SLDS에 따른 모달을 정의하려면 기본 구성 요소 <lightning-quick-action-panel>를 사용할 수 있습니다. 이 컴퍼넌트에는 header 및 footer 속성이 준비되어 있으므로, 이것을 사용해 헤더나 풋터에 임의의 컨텐츠를 배치할 수가 있습니다. Aura 구성 요소의 경우 는 이 부분을 커스터마이즈 하기 위해서는 CSS 를 덧쓰기하는 등 어려운 대응이 필요했습니다만, 편리하게 되었습니다.

exampleQuickAction.html

<template>
  <lightning-quick-action-panel header="テスト">
    ここにモーダルコンテンツを記載する
    <div slot="footer">
      <lightning-button variant="neutral" label="ボタン1"></lightning-button>
      <lightning-button variant="brand" label="ボタン2" class="slds-m-left_x-small"></lightning-button>
    </div>
  </lightning-quick-action-panel>
</template>

컨텍스트 얻기

Lightning 레코드 페이지에 배치하는 사용자 지정 구성 요소와 마찬가지로 공용 recordId 및 objectApiName 변수를 사용할 수 있습니다.

exampleQuickActionWithContextVariables.js

import { LightningElement, api } from 'lwc';

export default class HelloQuickAction extends LightningElement {
  @api recordId; // e.g., 0010I00002Y9U6YQAV
  @api objectApiName; // e.g., Account
}

모달 창 닫기

다음 이벤트를 사용하면 프로그램에서 모달을 닫을 수 있습니다.

import { CloseActionScreenEvent } from 'lightning/actions';
// 中略
this.dispatchEvent(new CloseActionScreenEvent());

알려진 결함 및 제한

다음은 Summer '21 릴리스 직후에 감지된 이벤트입니다. 향후 업데이트로 인해 해결될 수 있습니다.

한 번 만든 LWC 빠른 작업의 actionType은 변경할 수 없습니다.

일단 구성 요소를 배포한 후 targetConfig 의 actionType 를 Action 에서 ScreenAction 로 또는 그 반대로 변경하면 구성 요소를 배포할 수 없습니다.

=== Deploy Errors
PROJECT PATH                                                     ERRORS                                    
───────────────────────────────────────────────────────────────  ──────────────────────────────────────────
force-app/main/default/lwc/helloQuickAction/helloQuickAction.js  既存の Lightning Web コンポーネントアクションの種別は変更できません

recordId 와 objectApiName 가 컴퍼넌트 초기화시에 취득할 수 없다

connectedCallback() 내에서는 recordId 및 objectApiName 가 undefined 가 되어 버립니다. 초기화시에 레코드에 액세스 할 필요가 있는 경우는 @wire 로 대체하는 것이 좋을 것입니다. Screen Action 의 경우는 URL 로부터 취득하는 방법도 있습니다.

참고 - Spring 21 LWC Quick Action Release (salesforce.stackexchange.com)

모바일 경험 사이트(커뮤니티)에서 사용할 수 없음

페이지 레이아웃에 배치된 LWC 빠른 작업은 표준 Salesforce 모바일 애플리케이션이나 경험 사이트의 표준 레코드 세부 정보 페이지에 표시되지 않습니다.

참고 링크

RFC - Lightning Quick Actions API (lightning/actions)