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

原创

repick

发布于 2022-04-05 21:00:08

78100

代码可运行

文章被收录于专栏：SalesforceSalesforce

运行总次数：0

代码可运行

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

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

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

newContactInfoAuraComponent.cmp

<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

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

<aura:application access="GLOBAL" extends="ltng:outApp">
    <aura:dependency resource="c:newContactInfoAuraComponent"/>
</aura:application>

4.VfPage组件

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

newContactinfoVf.page

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