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即可。這裡可能會提到兩個問題:
- 一個物件可能有多個quick action對應多個lwc component,是否需要對應多個aura component還是一個就可以搞定?
- lwc不支援quick action所以沒法關閉或者呼叫aura中關閉quick action的方法,那麼lwc中如何去關閉quick action彈出的modal?
- 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的設計同樣有效。篇中有錯誤地方歡迎指出,有問題歡迎留