Aura ComponentまたはLWCでクイックアクションを呼ぶ方法

salesforce
by sigulog@gmail.com salesforce

前提

目次

Aura Componentでクイックアクションを呼ぶ方法

Aura Componentからは「クイックアクションAPI」を使用することでクイックアクションを呼ぶことができる。

quickActionCall.cmp
<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:quickActionAPI aura:id="quickActionAPI" />
    <div>
        <lightning:button label="ケース作成" onclick="{!c.selectUpdateCaseAction}" />
    </div>
</aura:component>

1行目：レコードページで使用できるように「flexipage:availableForAllPageTypes」を実装する
2行目：クイックアクションAPIを定義する。
4行目：クイックアクションを実行するためのボタンを用意「lightning:button」。クリックのアクションでコントローラから「{!c.selectUpdateCase}」を実行。

quickActionCall.js
({
    createCase : function( cmp, event, helper) {
        var actionAPI = cmp.find("quickActionAPI");
        var args = {actionName: "Global.NewCase"};
        actionAPI.selectAction(args)
            .then((result) => {
                console.log("result " + result);
            }).catch((error) => {
                if(error.errors){
                    console.log(error.errors);
                }
            });
    },
})

3行目：コンポーネントからクイックアクションAPIを取得
4行目：実行するクイックアクションのAPI参照名を定義
　　オブジェクトのクイックアクションを呼ぶ場合：　“[オブジェクト名].[API参照名]”
　　グローバルクイックアクションを呼ぶ場合：　“Global.[API参照名]”
5行目：クイックアクションAPIの実行「~.selectAcrion」
6行目～8行目：成功時の処理
8行目～12行目：失敗時の処理

LWCでAura Componentを利用してクイックアクションを呼ぶ方法

前述のとおりLWCでは直接クイックアクションを実行できないため、LWCをクイックアクションAPIが実装されたAura Componentでラップし、LWC内で親コンポーネントであるAura Componentのクイックアクションイベントを発火させる必要がある。

1. 表示用のLWCを用意（クイックアクション（Aura Component）発火用のボタンを用意）

quickActionCall.html
<template>
  <lightning-button variant="brand" label="クイックアクションの実行" onclick={handleClick}>
  </lightning-button>
</template>

2行目：Lightningデザインのボタンを用意。ボタン押下時にイベントを設定。※上記の場合は「handleClick」

quickActionCall.js
import { LightningElement } from 'lwc';
export default class CallAuraEventBotton extends LightningElement {
    handleClick() {
        const createCaseEvent = new CustomEvent("callQuickAction", {});
        this.dispatchEvent(createCaseEvent);
    }
}

3行目：html内で発火したイベントを定義。
4行目：「CustomEvent」を定義。
5行目：「dispatchEvent」でCustomEventを返すことで親コンポーネントのイベントを発火する。

CustomEvent
第一引数：文字列型：任意のアクション名
第二引数：Aura Componentに渡したいパラメータ

2. LWCをラッピングするためのクイックアクションAPIを実装したAura Componentの作成

quickActionCallWrapper.cmp
<aura:component implements="flexipage:availableForAllPageTypes">
    <lightning:quickActionAPI aura:id="quickActionAPI" />
    <c:quickActionCall oncallQuickAction="{!c.createCase}"/>
</aura:component>

1行目：レコードページで使用できるように「flexipage:availableForAllPageTypes」を実装する。
2行目：コンポーネントにクイックアクションAPIを定義する。
3行目：LWCを配置。LWCで発火されたアクション名及び実行イベントを記載。
※上記の「oncallQuickAction」は“on” + [LWCのCustomEventの第一引数]に置き換える

quickActionCallWrapper.js
({
    createCase : function( cmp, event, helper) {
        var actionAPI = cmp.find("quickActionAPI");
        var args = {actionName: "Global.NewCase"};
        actionAPI.selectAction(args)
            .then((result) => {
                console.log("result " + result);
            }).catch((error) => {
                if(error.errors){
                    console.log(error.errors);
                }
            });
    },
})

3行目：コンポーネントからクイックアクションAPIを取得
4行目：実行するクイックアクションのAPI参照名を定義
オブジェクトのクイックアクションを呼ぶ場合：　“[オブジェクト名].[API参照名]”
グローバルクイックアクションを呼ぶ場合：　“Global.[API参照名]”
5行目：クイックアクションAPIの実行「~.selectAcrion」
6行目～8行目：成功時の処理
9行目～11行目：失敗時の処理