SalesforceLWC学习(四十五)lwc支持ConsoleApp控制Tab了-6ren

SalesforceLWC学习(四十五)lwc支持ConsoleApp控制Tab了

转载作者：我是一只小鸟更新时间：2023-09-11 15:02:12

本篇参考： 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：需要做两个事情。

需要引入lightning/messageService，否则会报错 n.connect is not a function
引入相关的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的方法，官方提供了很多方法，感兴趣的小伙伴可以自行查看。篇中有错误地方欢迎指出，有不懂欢迎留言.

最后此篇关于SalesforceLWC学习(四十五)lwc支持ConsoleApp控制Tab了的文章就讲到这里了,如果你想了解更多关于SalesforceLWC学习(四十五)lwc支持ConsoleApp控制Tab了的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！。

文章推荐：一个烂分页，踩了三个坑！

文章推荐：【23种设计模式】组合模式（八）

文章推荐：如何将GitLab仓库同步到GitHub和Gitee?

文章推荐： Go代码包与引入：如何有效组织您的项目

tabs - 有没有办法垂直堆叠 `Tabs`？
我在看 Tabs UI 的选项。默认行为是它们水平堆叠。有没有办法改变它？我想堆叠Tabs垂直。它将节省大量的 UI“不动产”，尤其是在移动应用程序 UI 中。最佳答案尝试这个: Tabs ta
tabs - 无法在 Zsh 中将向后 TAB 作为 Shift-TAB
问题:在 Zsh 中使用 TAB 向后导航，类似于在 Firefox 中 Shift-TAB Shift-TAB 应该执行的操作示例我在终端中运行以下代码 ls 我明白了 A B C D E F
tab-completion - 将 tab 完成键绑定(bind)更改为 MC 中的 tab
有很多人想知道如何完成制表符。这不是这些问题之一。问题是如何将 tab 键分配给 tab 补全？ alt-tab/esc-tab 很痛苦。在面板禁用模式选项卡完成工作，这让我暂时...但我仍然希望面板
react-native - createBottomTabNavigator : how do I reload/refresh a tab screen on tab on the tab-icon?
所以我有一个带有 3 个屏幕的 TabNavigator。 import React from 'react'; import {TabNavigator,createBottomTabNavigat
tabs - 如何在文本框中按 Tab 键后触发事件
我想触发一个事件，例如当我在文本框中按 Tab 键时显示警报消息。 $("input").blur(function (e) { if (e.which == 9) alert(
javascript - $( "#tabs").tabs();不是函数
我将这段代码设置为创建一个选项卡式菜单，它显示为一个选项卡式菜单，但当我加载网站时，选项卡在单击时不会改变。在“检查元素”中它说 $( "#tabs").tabs();不是函数。我不知道下一步要解决这
javascript - 当您按 Tab 时，它应该 Tab 到下一个空白文本输入框 JavaScript，而不使用 Tab 索引
表单中有多个输入字段的示例，因为有一些字段在此之前会自动填充，如果我按 Tab 键，那么它应该跳过该自动填充的输入字段并应转到空白输入字段我尝试过，但是当我开始在空白输入中写入时会发生什么，它也会自
google-chrome - chrome.tabs 问题与 chrome.tabs.update 和 chrome.tabs.executeScript
我想写一个小的 chrome 扩展程序，它应该从网页 A(当前网页)获取信息，将选项卡更新到网页 B，然后将代码注入(inject)网页 B。不幸的是，以下代码正在将网页更新到 B 但注入(injec
Angular Material 选项卡 : Prevent tab change of mat-tab-group if the form in current tab is dirty
如果当前事件选项卡中的表单很脏，我试图阻止 mat-tab 的选项卡更改。但是我找不到拦截选项卡更改事件的方法。 // Tab 0 Content // Tab
terminal - iterm2 问题 : create new tab with same path of previous current tab BUT 2 tabs are clones and not indepedent
我已从 MacOS Mojave 上的默认终端切换到 iterm2 .我有一个关于从当前选项卡打开新选项卡的问题。确实，我希望与上一个当前选项卡处于同一路径。为此，我执行了经典程序，即转到 ite
jquery-ui-tabs - $(...).tabs 不是函数
我在我的网站的两页上有此代码，但在一页上该功能不起作用。 Firebug 向我显示“$(...).tabs 不是函数”。我不明白为什么，谁能告诉我什么是错的？这是有效的: http://www.in
tabs - 如何在 CMD 中创建 %tab%
我需要可靠的方法来为 Windows 和 XP 创建 %tab% (包含一个制表符)。 SET TAB=" " 应该适用于 Windows 7(未测试)但不适用于 Win XP(已测试)。这个 fo
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
RMarkdown 似乎无法在 Tabs 中生成 Tabs
我正在尝试使用 RMarkdown 制作静态网页。我想定义一个 UI，它有第一层选项卡，然后是第一层下面的选项卡。我已经在 RMarkdown: Tabbed and Untabbed heading
tabs - 通过 chrome.tabs.create 打开多个选项卡时出现问题
我在使用 chrome.tabs.create 方法打开多个选项卡时遇到问题。我正在尝试使用 chrome.tabs.create 循环打开大约 9 个选项卡，但打开的选项卡数量仅限于 4 个。看起来
tabs - 如何自定义 Material UI Tabs 指示器的宽度和位置
我正在使用 Material ui 的标签，并且能够对标签的指示器进行更改。但是，我正在尝试使用样式将每个选项卡的指示器宽度减小到某个固定宽度。但似乎指标以一些计算值定位在左侧，并且给它一个宽度不会使
macos - v. Emacs 中的 TAB
我在 OS X 终端中使用 emacs 24.3，并且遇到了一些奇怪的事情。在 markdown-mode.el 中，tab 键通过 (define-key map (kbd "") 'markdo
tabs - 错误 : There is no clipping info for given tab
在 Chrome 开发者工具上 Uncaught (in promise) Error: There is no clipping info for given tab at E._handleRes
vim - 如何为:tab new，:tab，:tab设置快捷方式？
在vim中，我想将:tabnew缩短为:tn，将:tabp缩短为:th，将:tabn缩短为:tl在我的.vimrc中。知道我将如何重新映射这样的命令吗？最佳答案使用cabbrev： ca tn t
tabs - TabIndex - 点击选项卡将我移动到地址栏 - 无法使用焦点或 +tab 索引解决此问题
我读过几个主题，讨论 IE 中的地址栏在使用 TAB 时基本上是第一个获得焦点的主题(MSDN 自己的文档讨论了这一点)。然而，我也见过一些情况，但情况并不总是如此...... 我有一个母版页，内容

我是一只小鸟

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

SalesforceLWC学习(四十五)lwc支持ConsoleApp控制Tab了