Salesforce 详细Page中自定义QuickAction Lightning Web Component应用

原创

repick

发布于 2022-05-23 17:40:39

4040

发布于 2022-05-23 17:40:39

文章被收录于专栏：Salesforce

详细page中的自定义Action，调用自定义组件时，现在可以支持使用Lwc，以下是QuickAction调用Lwc的例子

1.Lwc组件做成

quickActionForDelete.html

<template>
    <lightning-quick-action-panel header="Delete Opportunity">
        <lightning-card style="text-align:center;">
            <p class="title slds-text-heading--medium slds-hyphenate">
                Are you sure you want to delete this opportunity?
            </p>
        </lightning-card>
        &nbsp;
        <lightning-button onclick={handleDelete} variant="brand" label="削除" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
        <lightning-button onclick={handleCancel} label="キャンセル" class="slds-m-right_x-small slds-no-flex text-right slds-float--right"></lightning-button>
    </lightning-quick-action-panel>
</template>

quickActionForDelete.js

import { LightningElement, api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { CloseActionScreenEvent } from 'lightning/actions';

export default class QuickActionForDelete extends LightningElement {
    @api recordId;
    handleDelete(e) {
        // Close the modal window and display a success toast
        this.dispatchEvent(new CloseActionScreenEvent());
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Success',
                message: 'Opportunity Record Deleted!',
                variant: 'success'
            })
        );
    }

    handleCancel(e) {
        // Close the modal window and display a success toast
        this.dispatchEvent(new CloseActionScreenEvent());
    }
}

quickActionForDelete.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>54.0</apiVersion>
    <description>QuickActionForDelete</description>
    <isExposed>true</isExposed>
    <masterLabel>QuickActionForDelete</masterLabel>
    <targets>
        <target>lightning__RecordAction</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordAction">
            <actionType>ScreenAction</actionType>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>