Salesforce学习 Lwc（五）QuickAction 实现Aura到lwc画面的跳转

QuickAction我们都知道，salesforce提供一些自己object的数据做成，数据更新的page，也可以自己定制一些page画面，但这些只限于标准开发之内，如果想实现跳转到自定义lwc画面的情况下，应该怎么做，本篇为大家讲述。

下图是一些salesforce提供的标准QuickAction，在当前版本下salesfoece不支持直接跳转到lwc，只能通过Aura画面进行跳转，具体做法如下。

1.首先还是新创建一个lwc自定义画面。

代码语言：javascript复制

<template>
	<lightning-card title={capitalizedGreeting} icon-name="custom:custom14">
		<div class="slds-m-around_medium">
            <p>Today is {currentDate}</p>
						<lightning-input label="Name" value={greeting} onchange={handleGreetingChange}></lightning-input>
						<p>Opportunity Name is {opportunityName}</p>
		</div>
	</lightning-card>
</template>

代码语言：javascript复制

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import NAME_FIELD from '@salesforce/schema/Opportunity.Name';
const infoFields = [
    NAME_FIELD
];
export default class HelloWebComponent extends LightningElement {
    @api recordId;
    @track opportunityName = '';

    @track greeting = 'Trailblazer';
    handleGreetingChange(event) {
        this.greeting = event.target.value;
    }
    currentDate = new Date().toDateString();
    get capitalizedGreeting() {
	return `Hello ${this.greeting.toUpperCase()}!`;
    }

    @wire(getRecord, { recordId: '$recordId', fields: infoFields })
    loadOpportunity(value) {
        const { data, error } = value;
        if (error) {
            // handle error
        } else if (data && data.fields) {
            if (data.fields.Name.value !== null && data.fields.Name.value !== undefined) {
                this.opportunityName = data.fields.Name.value;
            }
        }
    }
}

2.创建跳转用的Aura画面(Create Aura Component)

创建完成，Aura一共有九种类型的文件，各个文件的意义在这里就不说明了，因为我们只是想实现画面跳转，所以只用到cmp文件，编辑这个文件，可以打开lwc画面，也可以传递recordId，这样就可以在lwc画面进行数据查询。

helloAuraComponent.cmp

代码语言：javascript复制

<aura:component implements="lightning:actionOverride,force:lightningQuickActionWithoutHeader,force:hasRecordId,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes">
    <aura:attribute name="recordId" type="Id"/>
    <c:helloWebComponent onclosemodal="{!c.refreshAndCloseModal}" record-id="{!v.recordId}" recordId="{!v.recordId}"/>
</aura:component>

3.创建QuickAction，ActionType选择LightningComponent

4.最后编辑page layouts，把quickAction拖到想要表示位置。

效果展示：

object salesforce

0 人点赞