Salesforce: 从utilitybar打开lwc
lwc是可以设置一个lightning__UtilityBar的target,从而直接放在utility bar里。但有两个缺点,一是这样只能显示在弹出窗口,二是弹出窗口不能自动关闭。
通过将lwc包装在aura组件,从而调用workspace API和utlitybar API,可以实现这两个功能。
第一个aura组件lwcWrapper,包装lwc。lwcWrapper.cmp:
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,lightning:availableForFlowScreens,force:appHostable" access="global" > <div class="slds-theme_default"> <c:mylwc name="MyLWC" /> </div> </aura:component>
这个div的作用是让大部分背景显示成白色。
第二个aura组件openLwc,调用workspace API和utlitybar API。openLwc.cmp:
<aura:component implements="flexipage:availableForAllPageTypes,lightning:isUrlAddressable,lightning:availableForFlowScreens,flexipage:availableForRecordHome" access="global" > <lightning:workspaceAPI aura:id="workspace"/> <lightning:utilityBarAPI aura:id="utilitybar" /> <aura:handler name="init" value="{!this}" action="{!c.init}" /> </aura:component>
openLwcController.js:
({ init: function(component, event, helper) { var utilityAPI = component.find("utilitybar"); utilityAPI.getAllUtilityInfo().then(response => { if (typeof response !== 'undefined') { utilityAPI.getEnclosingUtilityId().then(utilityId => { utilityAPI.onUtilityClick({ eventHandler: response => helper.openMyLwc(component, event, helper) }).catch(error => console.log('onUtilityClick: eventHandler error: ' + error)); }) .catch(error => console.log('init: utilId error: ' + error)); } }); } })
openLwcHelper.js:
({ openMyLwc:function(component, event, helper) { var workspaceAPI = component.find("workspace"); workspaceAPI.getAllTabInfo().then(tabInfo => { let isExisting = false; let tabId = null; let utilityAPI = component.find("utilitybar"); if (tabInfo && tabInfo.length > 0) { for (let i = 0; i < tabInfo.length; i++) { if (tabInfo[i].url.indexOf('c__lwcWrapper') > -1) { isExisting = true; tabId = tabInfo[i].tabId; break; } } if (isExisting) { //console.log(tabId); workspaceAPI.focusTab({tabId: tabId}) .then(result => helper.minimizeUtility(utilityAPI)).catch(console.log); } } if (!isExisting) { workspaceAPI.openTab({ pageReference: { "type": "standard__component", "attributes": { "componentName": "c__lwcWrapper" } }, focus: true }).then(tabId => { //console.log("The new tab ID is:" + tabId); workspaceAPI.setTabLabel({ tabId: tabId, label: "My Lwc" }) .then(tabInfo => helper.minimizeUtility(utilityAPI)).catch(console.log); }).catch(console.log); } }); }, minimizeUtility: function(utilityAPI) { utilityAPI.minimizeUtility().catch(console.log); } })
因为缺省情况下,tab页的标签显示为Loading...,所以用setTabLabel来设置一下。如果tab页已打开,则聚焦到已打开的tab页,而不重复打开。
分类:
实用技巧
标签:
Salesforce
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾(3.3-3.9)
· winform 绘制太阳,地球,月球 运作规律
2019-06-26 浏览器自动化的一些体会9 访问angular页面的一个问题
2019-06-26 Linked server的一个问题