Salesforce LWC學習(九) Quick Action in LWC

我們在lightning開發中，quick action是一個常用的功能，很可惜的是，lwc目前還不支援單獨的custom quick action操作，隻能嵌套在aura中使用才能發揮作用。

官方也給我們提供了如何進行嵌套，簡單代碼嵌套如下所示：

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome">
    <!--This is a lwc component-->  
    <c:testComponentForLwc>
</aura:component>          

我們隻需要聲明一個aura的components然後實作force:lightningQuickAction/force:lightningQuickActionWithoutHeader并且使用c:引入相關的lwc即可。這裡可能會提到兩個問題：

1. 一個對象可能有多個quick action對應多個lwc component，是否需要對應多個aura component還是一個就可以搞定？
2. lwc不支援quick action是以沒法關閉或者調用aura中關閉quick action的方法，那麼lwc中如何去關閉quick action彈出的modal？
3. lwc quick action更新某個字段以後沒法及時重新整理父的詳情頁面，如何去解決？

針對這兩個問題，我們一個一個進行解決。

針對第一個問題，我們使用lightning:quickActionAPI 元件，然後調用其getSelectedActions方法擷取Promise然後解析即可實作。當然此元件還有很多經常用到的好用的功能，感興趣的小夥伴自己讀一下：https://developer.salesforce.com/docs/component-library/bundle/lightning:quickActionAPI/documentation

針對第二/三個問題，盡管lwc沒法擷取或者關閉quick action，但是aura component是可以的，我們隻需要在aura中進行事件監聽，然後在Lwc component中注冊事件即可實作。因為aura的事件監聽處理可以捕捉到lwc的事件注冊。 OK，那我們開始直接上代碼：

quickActionService.cmp：引入lightning:quickActionAPI進而可以獲得目前選擇的quick action name，然後根據quick action name去決定顯示哪個lwc元件，并且對testLookUpFowLwc元件進行了兩個事件監聽處理，分别是refreshview以及closemodal。

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome">
    <aura:attribute name="quickActionName" type="String"/>
    <lightning:quickActionAPI aura:id="quickActionAPI" />
    <aura:handler name="init" value="this" action="{!c.doInit}"/>
    <aura:if isTrue="{!v.quickActionName == 'Account.test_another'}">
        <c:testLookUpForLwc onrefreshview="{c.refreshView}" onclosemodal="{!c.closeModal}"/>
    </aura:if>
    <aura:if isTrue="{!v.quickActionName == 'Account.test_action'}">
        show area with test action
    </aura:if>
</aura:component>          

quickActionServiceController.js：對getSelectedActions進行解析，對事件調用force:event事件進行refresh view以及close action。

({
    doInit : function(component, event, helper) {
        var actionAPI = component.find("quickActionAPI");

        actionAPI.getSelectedActions().then(function(result){
            console.log(JSON.stringify(result));
            if(result) {
                console.log(result.actions[0]);
                var actionName = result.actions[0].actionName;
                component.set('v.quickActionName',actionName);
            }
        }).catch(function(e){

        });
    },

    refreshView : function(component,event,helper) {
        $A.get('e.force:refreshView').fire();
    },
    closeModal : function(component,event,helper) {
        $A.get("e.force:closeQuickAction").fire()
    }
})      

testLookUpForLwc.html：展示button，點選button按鈕執行handleClose

<template>
    <lightning-button type="button" label="submit and close" variant="brand" onclick={handleClose}></lightning-button>
    
</template>      

testLookUpForLwc.js：方法注冊refreshview以及closemodal事件，進而讓父去監聽以及執行事件。

import { LightningElement,track } from 'lwc';

export default class TestLookUpForLwc extends LightningElement {
    
    handleClose(event) {
        this.dispatchEvent(new CustomEvent('refreshview'));
        this.dispatchEvent(new CustomEvent('closemodal'));
    }

}      

顯示效果：我們在account上建立兩個quick action，分别是test_action以及test_another，分别綁定了這個aura，當我們點選以後test_action以後，列印出來的日志結果。

 總結：篇中主要講述lwc如何配合aura實作quick action以及相關的refresh / close 的功能，針對refresh / close不止針對quick action,針對其他的lwc的設計同樣有效。篇中有錯誤地方歡迎指出，有問題歡迎留言。

作者：zero

部落格位址：http://www.cnblogs.com/zero-zyq/

本文歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接

個人下載下傳了一些相關學習的PDF檔案，如果需要下載下傳請通路百度雲 點選此處通路 密碼：jhuy

如果文章的内容對你有幫助，歡迎點贊~

為友善手機端檢視部落格，現正在将部落格遷移至微信公衆号：Salesforce零基礎學習，歡迎各位關注。