カスタムオブジェクトのレコードページのアクションにLWCを設定する方法をメモしておきます。
レコードページの右上のボタンからLWCで作成した画面をモーダルウィンドウにて呼び出すことができます。
LWCのmeta.xmlがカギとなります。
targetに"lightning__RecordAction"を指定、actionTypeに"ScreenAction"を指定すればOKです。
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>55.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__RecordAction</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordAction">
<actionType>ScreenAction</actionType>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>
controllerの方は、"@api recordId"でレコードページから対象のレコードを取得できます。
"CloseActionScreenEvent"というコンポーネントによりボタン押下時にモーダルウィンドウをクローズできます。
"ShowToastEvent"で処理完了時のメッセージ表示も可能です。
import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';
export default class xxxxxx extends LightningElement {
@api recordId;
submit1() {
this.dispatchEvent(new CloseActionScreenEvent());
this.dispatchEvent(
new ShowToastEvent({
title: '処理完了',
message: '正常に処理が完了しました。',
variant: 'success'
})
);
}
cancel() {
this.dispatchEvent(new CloseActionScreenEvent());
}
}
<template>
<lightning-button type="submit" variant="登録" label="登録" onclick={submit1} class=""></lightning-button>
<lightning-button label="キャンセル" onclick={cancel} class=""></lightning-button>
</template>
あとは対象のオブジェクトの設定画面で"ボタン、リンク、およびアクション"→右上の"新規アクション"→アクション種別に"Lightning Web コンポーネント"を選択。
Lightning Web コンポーネント欄に上のコンポーネントが表示されるはずです。