Salesforce LWC学习(四十五) lwc支持Console App控制Tab了

本篇参考:https://help.salesforce.com/s/articleView?id=release-notes.rn_lwc_workspaceAPI.htm&release=246&type=5

https://developer.salesforce.com/docs/component-library/bundle/lightning:workspaceAPI/documentation

https://developer.salesforce.com/docs/atlas.en-us.api_console.meta/api_console/sforce_api_console_methods_lightning_workspaceAPI.htm

背景: 针对Console App,我们可以看到官方提供的功能可以修改Tab名称,刷新Tab等功能。我们在针对实际开发时,偶尔也需要有需求操作Tab相关信息,比如修改Tab的名称。以前只能通过Aura Component进行修改,lwc并不支持。

CustomizeTabAura.cmp

复制代码
<aura:component implements="lightning:isUrlAddressable,flexipage:availableForAllPageTypes"
                access="GLOBAL">
    <lightning:workspaceAPI aura:id="workspace" />
    <aura:attribute name="result" type="String"></aura:attribute>

    <lightning:card>
        <lightning:buttonGroup>
            <lightning:button onclick="{!c.showTabInfo}" label="显示Tab信息"></lightning:button>

            <lightning:button onclick="{!c.changeTabInfo}" label="更改Tab信息"></lightning:button>

            <lightning:button onclick="{!c.addSubTabInfo}" label="打开Sub Tab"></lightning:button>
        </lightning:buttonGroup>
        <div>
            {!v.result}
        </div>
    </lightning:card>
    
</aura:component>

CustomizeTabAuraController.js

复制代码
({
    showTabInfo: function(component, event, helper) {
        var workspaceAPI = component.find("workspace");

        workspaceAPI.getFocusedTabInfo().then(function(response) {
            
            let information = JSON.stringify(response);
            component.set('v.result', information);
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    changeTabInfo: function(component, event, helper) {
        var workspaceAPI = component.find("workspace");

        workspaceAPI.getFocusedTabInfo().then(function(response) {
            let updatedTitle = 'updated tab';
            workspaceAPI.setTabLabel({
                tabId: response.tabId,
                label: updatedTitle
            })
            workspaceAPI.refreshTab({
                tabId: response.tabId
            })
        })
        .catch(function(error) {
            console.log(error);
        });
    },
    addSubTabInfo: function(component, event, helper) {
        var workspaceAPI = component.find("workspace");

        workspaceAPI.getFocusedTabInfo().then(function(response) {
            workspaceAPI.openSubtab({
                parentTabId: response.tabId, 
                recordId: $A.get("$SObjectType.CurrentUser.Id"),
                focus: true
            })

        })
        .catch(function(error) {
            console.log(error);
        });
    },
})

将组件放在Account详情页效果展示

Aura操作固然很好,但是lightning现在大部分项目是lwc的,性能上会有很好并且整体代码管理也会容易,一个项目如果参杂着太多的aura和lwc本身也不是好事情,官方也逐渐的将aura的功能向lwc进行迁移,比如lwc目前已经支持quick action。同样的在winter 24 release,官方支持通过lwc来操作tab了,尽管目前是beta版本,相信再过两个release就可以GA了。(目前可以在sandbox进行测试)

注:针对此功能,需要开启Lightning Web Security。

简单的demo如下:

customizeTabLwc.html

复制代码
<template>
    <lightning-card>
        <lightning-button-group>
            <lightning-button onclick={showTabInfo} label="显示Tab信息"></lightning-button>

            <lightning-button onclick={changeTabInfo} label="更改Tab信息"></lightning-button>

            <lightning-button onclick={addSubTabInfo} label="打开Sub Tab"></lightning-button>
        </lightning-button-group>
        <div>
            {result}
        </div>
    </lightning-card>
</template>

customizeTabLwc.js: 需要做两个事情

  1. 需要引入lightning/messageService,否则会报错 n.connect is not a function
  2. 引入相关的wire adapter, 将需要的方法引入。

注释部分打开也可以运行,可以通过EnclosingTabId wire adapter获取,也可以通过 getFocusedTabInfo获取tabId

复制代码
import { LightningElement, track, wire } from 'lwc';
import userId from "@salesforce/user/Id";
import { MessageContext,APPLICATION_SCOPE, publish,subscribe, unsubscribe } from 'lightning/messageService'; 
import { IsConsoleNavigation,EnclosingTabId, getFocusedTabInfo,setTabLabel,refreshTab,openSubtab } from 'lightning/platformWorkspaceApi';
export default class customizeTabLwc extends LightningElement {
    @wire(IsConsoleNavigation) isConsoleNavigation;
    result;
    @wire(EnclosingTabId) tabId;

    showTabInfo(event) {
        if (this.isConsoleNavigation) {
            getFocusedTabInfo().then((tabInfo) => {
                this.result = JSON.stringify(tabInfo);
            }).catch(function(error) {
                console.log(error);
            }); 
        }
    }

    changeTabInfo(event) {
        if (this.isConsoleNavigation) {
            // getFocusedTabInfo().then((tabInfo) => {
            //     setTabLabel(tabInfo.tabId, 'updated tab');
            //     refreshTab(tabInfo.tabId);
            // }).catch(function(error) {
            //     console.log(error);
            // }); 
            setTabLabel(this.tabId, 'updated tab');
        }
    }

    addSubTabInfo(event) {
        if (this.isConsoleNavigation) {
            // getFocusedTabInfo().then((tabInfo) => {
            //     openSubtab(tabInfo.tabId, { recordId: userId, focus: true });
            // }).catch(function(error) {
            //     console.log(error);
            // }); 
            openSubtab(this.tabId, { recordId: userId, focus: true });
        }
    }
}

运行效果和上述相同。

**总结:**篇中介绍基于lwc控制tab的方法,官方提供了很多方法,感兴趣的小伙伴可以自行查看。篇中有错误地方欢迎指出,有不懂欢迎留言。

相关推荐
zero.zhang7 分钟前
salesforce零基础学习(一百四十一)刷新dev sandbox需要强制group
salesforce学习
zero.zhang1 个月前
Salesforce AI Specialist篇之 Prompt Builder
salesforce学习·self learning·ai 学习
zero.zhang1 个月前
Salesforce AI Specialist篇之 Einstein Trust Layer
salesforce学习·ai 学习
小小码虫2 个月前
如何在页面调用utility bar并传递参数至lwc组件
javascript·ecmascript·salesforce·lwc
zero.zhang3 个月前
Salesforce Sales Cloud 零基础学习(五) My Labels的使用
salesforce学习·admin学习·sales cloud
zero.zhang4 个月前
salesforce零基础学习(一百四十)Record Type在实施过程中的考虑
salesforce学习·self learning·admin学习
zero.zhang6 个月前
salesforce零基础学习(一百三十九)Admin篇之Begins/Contains/Starts With 是否区分大小写
salesforce学习·admin学习
zero.zhang6 个月前
salesforce零基础学习(一百三十八)零碎知识点小总结(十)
salesforce学习·self learning·admin学习
zero.zhang6 个月前
salesforce零基础学习(一百三十七)零碎知识点小总结(九)
salesforce学习·admin学习
zero.zhang6 个月前
salesforce零基础学习(一百三十六)零碎知识点小总结(八)
lightning学习·lwc·salesforce学习·admin学习