Salesforce 自定义List Button(三) 嵌套Aura情况下打开Lwc画面

2022-04-05 21:00:08 浏览数 (1)

通过前两篇,我们看到跟标准画面不同,打开方式并不是Dialog方式,以下我们通过嵌套Aura情况下,打开Lwc画面。

1.Aura组件做成,Dialog里引用Lwc。

ListVIew数据下,如果需要选择的情报,也可以通过Aura传入Lwc组件中。

newContactInfoAuraComponent.cmp

代码语言:javascript复制
<aura:component>
    <aura:html tag="style">
        /*control modal width*/
        .slds-modal__container{
            max-width: 180rem !important;
            width:90% !important;
        }
        .modal-footer {
            display: none;

        }
    </aura:html>
    <aura:attribute name="selectedIds" type="List" default="" />
    <section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open">
        <div class="slds-modal__container">
            <div class="modal-body scrollable slds-modal__content slds-p-around--medium" style="height: 100%;">
                <c:newContactInfo contactIds="{!v.selectedIds}"></c:newContactInfo>
            </div>
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</aura:component>

2.Lwc组件

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) {

    @api contactIds;

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

    connectedCallback() {
        console.log('>>>>>>>>>>>>>>>>' this.contactIds);
    }
    @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');
    }
}

3.Application Aura组件

newContactInfoApp.app

代码语言:javascript复制
<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:newContactInfoAuraComponent"/>
</aura:application>

4.VfPage组件

这里从直接打开Lwc,改成Aura组件

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:newContactInfoAuraComponent",
                { selectedIds: selectedList },
                'lightning',
                function (cmp) {

                }
            );
        });

    </script>
</apex:page>

5.效果展示:

选择三条数据情况下,点击New按钮

通过Log,可以查看选择的数据情况。

登录成功

0 人点赞