Salesforce LWC学习(九) Quick Action in LWC

我们在lightning开发中,quick action是一个常用的功能,很可惜的是,lwc目前还不支持单独的custom quick action操作,只能嵌套在aura中使用才能发挥作用。

Salesforce LWC学习(九) Quick Action in LWC_第1张图片

官方也给我们提供了如何进行嵌套,简单代码嵌套如下所示:

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForRecordHome">
      
    <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以后,打印出来的日志结果。

Salesforce LWC学习(九) Quick Action in LWC_第2张图片

 

 总结:篇中主要讲述lwc如何配合aura实现quick action以及相关的refresh / close 的功能,针对refresh / close不止针对quick action,针对其他的lwc的设计同样有效。篇中有错误地方欢迎指出,有问题欢迎留言。

你可能感兴趣的:(Salesforce LWC学习(九) Quick Action in LWC)