前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >Salesforce 自定义List Button(二) VfPage如何打开Lwc

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

原创
作者头像
repick
发布2022-03-31 23:27:45
发布2022-03-31 23:27:45
83600
代码可运行
举报
文章被收录于专栏:SalesforceSalesforce
运行总次数:0
代码可运行

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

1.Lwc画面开发

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

newContactInfo.html

代码语言:javascript
代码运行次数:0
运行
复制
<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
代码运行次数:0
运行
复制
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
代码运行次数:0
运行
复制
<aura:application extends="ltng:outApp" >
    <aura:dependency resource="c:newContactInfo" />
</aura:application>

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

newContactinfoVf.page

代码语言:javascript
代码运行次数:0
运行
复制
<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画面。

登录数据

登录成功

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1.Lwc画面开发
  • 2.application Aura组件做成,用来装载Lwc组件
  • 3.修改VfPage,引用上边的Aura和Lwc组件。
  • 4.效果展示:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档