salesforce零基礎學習（九十五）lightning out

隨着salesforce對lightning的推動，愈來愈多的項目基於lightning開發，致使不少小夥伴可能都並不瞭解classic或者認爲不須要用到classic直接就開始了lightning的開發。其實有精力瞭解classic的使用仍是頗有必要的，由於lightning還在不斷的優化中，可能有一部分還須要使用classic的功能來實現或者來協助實現，好比list view的list button目前只能使用visualforce page搭配lightning component。那麼vf 如何去引用已經弄好的lightning component呢，咱們接下來使用一個demo去簡單瞭解一下。

 需求：在lightning環境下的contact list view定義一個自定義的list button，實現使用pop up方式彈出所勾選的數據列表( lwc + aura實現)。

 實現步驟：

1.構建LwC component畫UI；

2. 構建aura component包含lwc component；

3. 建立aura single APP繼承ltng:outApp(包含SLDS樣式庫)/ltng:outAppUnstyled(不包含SLDS樣式庫)，使用aura:dependency標籤的resource屬性引入2步驟中的aura component；

4. 建立vf page，使用$Lightning.use引入上面的aura single APP，而後動態建立component顯示便可。

Talk is cheap,show me the code.下面根據上面的需求進行開發。

 1. ContactListController.cls：根據選擇的contact id list進行搜索數據，由於前端使用wire裝載方式，因此方法聲明必須使用cacheable=true

public with sharing class ContactListController {
    @AuraEnabled(cacheable=true)
    public static List<Contact> fetchContactListByIDs(List<String> idList){
        return [SELECT Id,Name
                FROM Contact
                WHERE Id IN :idList];
    }
}

 2. contactListForLwc.html：用來展現一個popup modal，modal中展現一個table數據

<template>
    <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">
            <!-- modal header start -->
            <header class="slds-modal__header">
                <button class="slds-button slds-button_icon slds-modal__close slds-button_icon-inverse" title="Close">
                <lightning-icon icon-name="utility:close"
                    alternative-text="close"
                    variant="inverse"
                    size="small" ></lightning-icon>
                <span class="slds-assistive-text">Close</span>
                </button>
                <h2 id="modal-heading-01" class="slds-text-heading_medium slds-hyphenate">Selected Contact List</h2>
                
            </header>
            <!-- modal body start -->
            <div class="slds-modal__content slds-p-around_medium" id="modal-content-id-1">
                <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                    <thead>
                        <tr class="slds-line-height_reset">
                            <th class="" scope="col">
                                <div class="slds-truncate">Contact Id</div>
                            </th>
                            <th class="" scope="col">
                                <div class="slds-truncate">Contact Name</div>
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <template if:true={contactList.data}>
                            <template for:each={contactList.data} for:item="contact">
                                <tr key={contact.Id}>
                                    <td>{contact.Id}</td>
                                    <td> {contact.Name}</td>
                                </tr>
                            </template>
                        </template>
                        <template if:false={contactList.data}>
                            <tr>
                                <td colspan="2">List View is not contains any data</td>
                            </tr>
                        </template>
                    </tbody>
                </table>
            </div>
            
        </div>
    </section>
    <div class="slds-backdrop slds-backdrop_open"></div>
</template>

contactListForLwc.js：調用後臺獲取列表

import { LightningElement, api, wire } from 'lwc';
import fetchContactListByIDs from '@salesforce/apex/ContactListController.fetchContactListByIDs';
export default class ContactListForLwc extends LightningElement {
    @api contactIdList;

    @wire(fetchContactListByIDs,{idList:'$contactIdList'})
    contactList;

}

3. ContactListForAura.cmp：用於包一層lwc，用來在single app中使用，由於目前的動態建立component只能aura,因此lwc須要套一層。

<aura:component>
    <aura:attribute name="selectedIds" type="List" default="" />
    <c:contactListForLwc contactIdList="{!v.selectedIds}"/>
</aura:component>    

4. ContactListApp.app：建立single app，設置access 爲GLOBAL，由於須要使用SLDS的樣式，這裏extends爲ltng:outApp,而後經過aura:dependency引入想要渲染的子component

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

5. ContactListPage.page：用於聲明contact list類型，而後使用$Lightning.user實現lightning out的功能。這裏須要有幾點小小的注意：

•  須要設置recordSetVar，這樣纔可使用到list view的list button中；
• 須要引入apex:includeLightning，最好放在引入的第一行；
• javascript中使用GETRECORDIDS函數來獲取列表中選擇的數據選項，在vf page中須要使用{!selected}來獲取，由於在js中若是使用''方式擴上他返回的是string類型，不擴上直接在list引用會報錯，因此這裏使用apex:repeat方式將其迭代在一個list中；
• 使用$lightning.use引入一個single app，而後在動態建立裏面的auraDependency的component，$lightning.use能夠屢次使用，可是須要屢次引入不一樣的single app，詳細的使用自行查看文檔。

<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>
        if(selectedList.length == 0) {
            window.location.href = '/003';
            
        } else {
            $Lightning.use("c:ContactListApp", function() {
            $Lightning.createComponent("c:ContactListForAura",
                {selectedIds : selectedList},
                'lightning',
                function(cmp) {
                    console.log("component created");
                }
                );
            });
        }
        
    </script>
</apex:page>

 6. 建立contact的list button，而後類型選擇 list button，選擇指定的vf page，而後在search layout中的list view中將定義的拖拽便可。

效果展現：

1.Contact列表勾選了兩條數據，而後點擊按鈕

 2. 彈出頁面展現選擇的兩條數據。

 總結：篇中經過簡單的例子展現了lightning out實現以及list view button關於vf page如何引入lightning component / lightning web component。缺點是使用vf page沒法實現相似action的效果在本頁pop up，查找了不少資料也沒有實現，有好的實現方式歡迎留言。lightning out實際場景不單單demo中的使用場景，詳細的lightning out知識以及限制自行查看。篇中有錯誤地方歡迎指出，有不懂地方歡迎留言。