Salesforce 自定义List Button(二) VfPage如何打开Lwc

上一篇做成的ListButton可以直接打开VfPage，VfPage也可以引用Lwc，从而实现打开Lwc画面的做法。

1.Lwc画面开发

使用lightning-record-edit-form标签，进行数据登录。

newContactInfo.html

代码语言：javascript复制

<template>
    <lightning-record-edit-form object-api-name='Contact' record-type-id={recordTypeId} onsuccess={handleSuccess}>
        <header class="slds-modal__header">
            <h2 class="title slds-text-heading--medium slds-hyphenate">新規作成</h2>
            <!-- <lightning-button-icon class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse"
                    icon-name="utility:close" onclick={handleClose}>
                </lightning-button-icon> -->
        </header>
        <div class="modal-body scrollable slds-modal__content slds-p-around--medium" style="height: 100%;">
            <lightning-messages></lightning-messages>
            <lightning-accordion allow-multiple-sections-open active-section-name={activeSections} class="sdsc-accordion">
                <lightning-accordion-section name="contactInfo" label="Contact Information">
                    <lightning-layout multiple-rows="true">
                        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
                            <lightning-input-field field-name="OwnerId" variant="label-stacked"></lightning-input-field>
                        </lightning-layout-item>
                        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
                            <lightning-input-field field-name="Phone" variant="label-stacked"></lightning-input-field>
                        </lightning-layout-item>

                        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
                            <lightning-input-field field-name="Name" variant="label-stacked"></lightning-input-field>
                        </lightning-layout-item>
                        <lightning-layout-item  padding="around-small" flexibility='auto' size='6'>
                            <lightning-input-field field-name="HomePhone" variant="label-stacked"></lightning-input-field>
                        </lightning-layout-item>
                    </lightning-layout>
                </lightning-accordion-section>
            </lightning-accordion>
        </div>
        <footer class="slds-modal__footer">
            <lightning-button variant="brand" class="slds-m-left_x-small" label="キャンセル" onclick={handleClose}></lightning-button>
            <lightning-button variant="brand" class="slds-m-left_x-small" name="save" label="保存" type="submit"></lightning-button>
        </footer>
    </lightning-record-edit-form>
</template>

newContactInfo.js

代码语言：javascript复制

import { LightningElement, api, track, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { NavigationMixin } from 'lightning/navigation';

export default class NewContactInfo extends NavigationMixin(LightningElement) {

    @track contactId;
    activeSections = ['contactInfo'];

    @wire(getRecord, { recordId: '$contactId', fields: ['Contact.Name'] })
    wiredContact({ error, data }) {
        if (data && data.fields) {
            const evt = new ShowToastEvent({
                title: 'Contact Operated Success',
                message: 'Contact updated'   data.fields.Name.value,
                variant: 'success'
            });
            window.location.assign('/003');
        } else if (error) {
            // システムエラー画面に遷移する
        }
    }

    handleSuccess(event) {
        this.contactId = event.detail.id;
    }
    handleClose() {
        window.location.assign('/003');
    }
}

2.application Aura组件做成，用来装载Lwc组件

newContactInfoApp.app

代码语言：javascript复制

<aura:application extends="ltng:outApp" >
    <aura:dependency resource="c:newContactInfo" />
</aura:application>

3.修改VfPage，引用上边的Aura和Lwc组件。

newContactinfoVf.page

代码语言：javascript复制

<apex:page standardController="Contact" recordSetVar="Contacts" showHeader="false">
    <apex:includeLightning />
    <div id="lightning" />
    <script>
        var selectedList = [];
    </script>
    <apex:repeat value="{!selected}" var="selectedItem">
        <script>
            selectedList.push('{!selectedItem}');
        </script>
    </apex:repeat>
    <script>
        $Lightning.use("c:newContactInfoApp", function () {
            $Lightning.createComponent("c:newContactInfo",
                { selectedIds: selectedList },
                'lightning',
                function (cmp) {

                }
            );
        });
    </script>
</apex:page>

4.效果展示：

点击New按钮，可以直接打开Lwc画面。

登录数据

登录成功

html app edit form record

0 人点赞