Reference to this article:
salesforce zero basic learning (95) lightning out
Background: for console app, you need to display the list button in the association list, and then click it for logic. The association list does not require you to select some data for later operation, but only to obtain the parent record ID. For example, the account details page has a contact association list. You need to make a contact list button in the contact association list. The contact list button does not need to pass the selected data (checkbox hide) to pass the parameter. You only need to pass the account id.
Option 1 Use lightning out. This was regarded by me as the preferred solution at that time. No matter the subsequent requirements change, even if the data to be selected is transmitted, it can be easily realized in a way. Approximate code structure of the implementation: VF - > lightning app - > lightning component (aura) - > lightning web component (LWC) Regardless of the specific business, lwc currently has only two functions: 1. Click the button to display toast 2. Click the button to close the current console tab
contactListSampleLwc.html
<template>
{accountId}
<lightning-button label="show Toast" onclick={handleShowToastEvent}></lightning-button>
<lightning-button label="close tab" onclick={handleCloseTabEvent}></lightning-button>
</template>contactListSampleLwc.js
import { LightningElement, track, wire,api } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
export default class contactListSampleLwc extends LightningElement {
@api accountId;
handleShowToastEvent(event) {
console.log('handle show toast event');
this.dispatchEvent(
new ShowToastEvent({
title: 'show toast sample',
message: 'show toast message',
variant: 'info'
})
);
}
handleCloseTabEvent(event) {
this.dispatchEvent(new CustomEvent('closecurrenttab'));
}
}ContactListSampleCmp.cmp
<aura:component implements="force:appHostable" access="global">
<lightning:workspaceAPI aura:id="workspace"/>
<aura:attribute name="AccountId" type="String"></aura:attribute>
<aura:handler name="init" value="{!this}" action="{!c.handleInit}"/>
<c:contactListSampleLwc onclosecurrenttab="{!c.handleCloseCurrentTabEvent}" accountId="{!v.AccountId}"></c:contactListSampleLwc>
</aura:component>ContactListSampleCmpController.js
({
handleCloseCurrentTabEvent : function(component, event, helper) {
console.log('execute this current tab handler');
let workspaceAPI = component.find("workspace");
workspaceAPI.getFocusedTabInfo().then(function(response) {
var focusedTabId = response.tabId;
workspaceAPI.closeTab({tabId: focusedTabId});
})
.catch(function(error) {
console.log('execute');
console.log(error);
});
},
handleInit : function(component,event,helper) {
var workspaceAPI = component.find("workspace");
workspaceAPI.getFocusedTabInfo().then(function(response) {
var focusedTabId = response.tabId;
workspaceAPI.setTabLabel({
tabId: focusedTabId,
label: "Updated Tab Label"
});
// workspaceAPI.refreshTab({tabId:focusedTabId});
})
.catch(function(error) {
console.log(error);
});
// var recordId = component.get("v.pageReference").state.c__RecordId;
// component.set('v.AccountId', recordId);
}
})ContactListSampleApp.app
<aura:application access="GLOBAL" extends="ltng:outApp">
<aura:dependency resource="c:ContactListSampleCmp"/>
</aura:application> ContactListSamplePage.page
<apex:page standardController="Contact" recordSetVar="Contacts" showHeader="false">
<apex:includeLightning/>
<div id="lightning" />
<script>
var recordId = '{!$CurrentPage.Parameters.id}';
$Lightning.use("c:ContactListSampleApp", function() {
$Lightning.createComponent("c:ContactListSampleCmp",
{AccountId : recordId},
'lightning',
function(cmp) {
console.log("component created");
}
);
});
</script>
</apex:page>Configure the list button, content source and select Visualforce Page.
Problems encountered:
1. toast does not show the effect 2. The close tab does not take effect
The reason is that in the lightning out scenario, there are many standard functions in lwc that are not supported. It is suspected that lightning out uses a separate iframe, resulting in problems with many standard rendering. Since there are many problems with lightning out and our needs do not need to select selected records, but only need to obtain account id, let's save the country.
2. Isurladdressable can be set for lightning component, and salesforce component navigation can be accessed directly through implements isUrlAddressable. The accessed URL is: / cmp/componentName, which can be accessed by passing c__paramName, the aura side can get the paramName information.
Note that community cloud does not support c__paramName is passed, so if it is a community project that also has this function, use it with caution.
Here we change two points.
1. ContactListSampleCmp. Add the following isUrlAddressable to the implements of CMP
<aura:component implements="force:appHostable,lightning:isUrlAddressable,force:hasRecordId" access="global">
2. ContactListSampleCmpController.js to open the code comment obtained by recordId through pageReference.
Then set the content source to a URL, and fill in the following URL
So far, after we click the button again, we will find that the URL actually jumps to this aura, so toast and other functions can be used normally.
Here is an additional extension of workspaceapi The refreshTab function will not update the name occasionally when the tab pops up again. Therefore, the API was checked and the refreshTab was used after the init method setLabel. As a result, the program is in an endless loop. The reason is that the refreshTab does not just refresh the small area of the tab, and the contents contained in the tab will be reloaded, Therefore, never use refreshTab in the component life cycle, resulting in an endless loop.
Conclusion: maybe lightning out is not used skillfully. When using lightning out, I feel that there are still a lot of pits. salesforce currently supports list buttons in the lex environment, which is not very friendly. If there is a need for list buttons, we should evaluate them more to avoid entering the pit. There are mistakes in this article. Welcome to point out and don't understand welcome messages.