隨着salesforce對lightning的推動,愈來愈多的項目基於lightning開發,致使不少小夥伴可能都並不瞭解classic或者認爲不須要用到classic直接就開始了lightning的開發。其實有精力瞭解classic的使用仍是頗有必要的,由於lightning還在不斷的優化中,可能有一部分還須要使用classic的功能來實現或者來協助實現,好比list view的list button目前只能使用visualforce page搭配lightning component。那麼vf 如何去引用已經弄好的lightning component呢,咱們接下來使用一個demo去簡單瞭解一下。javascript
需求:在lightning環境下的contact list view定義一個自定義的list button,實現使用pop up方式彈出所勾選的數據列表( lwc + aura實現)。html
實現步驟:前端
1.構建LwC component畫UI;java
2. 構建aura component包含lwc component;web
3. 建立aura single APP繼承ltng:outApp(包含SLDS樣式庫)/ltng:outAppUnstyled(不包含SLDS樣式庫),使用aura:dependency標籤的resource屬性引入2步驟中的aura component;api
4. 建立vf page,使用$Lightning.use引入上面的aura single APP,而後動態建立component顯示便可。app
Talk is cheap,show me the code.下面根據上面的需求進行開發。函數
1. ContactListController.cls:根據選擇的contact id list進行搜索數據,由於前端使用wire裝載方式,因此方法聲明必須使用cacheable=truefetch
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的功能。這裏須要有幾點小小的注意:
<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知識以及限制自行查看。篇中有錯誤地方歡迎指出,有不懂地方歡迎留言。