如何在页面调用utility bar并传递参数至lwc组件

news2024/9/20 2:19:44

1.在app的utility item中添加lwc组件:

2.调用utility bar api的方式有两种:

方法一,通过lwc调用:

import {LightningElement,api ,wire   } from 'lwc';
import { publish, MessageContext } from 'lightning/messageService';
import CallCenterMessageChannel from '@salesforce/messageChannel/callCenterChannelName__c';
import{open , getAllUtilityInfo} from 'lightning/platformUtilityBarApi';
import { CloseActionScreenEvent } from 'lightning/actions';

export default class CallCenterMessageService extends LightningElement {

    @api selectedIds; // 从 Flow 传递的记录 ID
    @api recordId
    @wire(MessageContext)
    messageContext;
    // 当组件加载时处理记录 ID
    async connectedCallback() {
        // console.log('Selected Record IDs: ', this.selectedIds);
        console.log('record Id: ', this.recordId);
        debugger
        await this.handleOpen();
        setTimeout(() => {
            this.handlePublish();
            this.closeQuickAction()
        }, 1000); // 延迟1000毫秒,可以根据情况调整时间

    }
    //调用utility api打开utility bar
    async handleOpen(){
        debugger
        const unitilyInfo=await getAllUtilityInfo();
        for (let i = 0; i < unitilyInfo.length; i++) {
            console.log('util at index', i, ':', unitilyInfo[i]);
            if(unitilyInfo[i].utilityLabel==='呼叫控制台'){
                open(unitilyInfo[i].id);
            }
        }
    }
    //publish事件至channel
    handlePublish(){
        // debugger
        // console.log('handlePublish--Selected Record IDs: ', JSON.stringify(this.selectedIds));
        const payload = { recordId:  this.recordId};
        publish(this.messageContext, CallCenterMessageChannel, payload);
    }

    closeQuickAction() {
        this.dispatchEvent(new CloseActionScreenEvent());
    }


}

方式二,通过aura调用:

handleGetUtilityInfo: function (component, event, helper) {
        debugger
        var utilityBarAPI = component.find("utilitybar");
        console.log('utilityBarAPI--->' + JSON.stringify(utilityBarAPI));
        console.log('utilityBarAPI--->' + JSON.stringify(utilityBarAPI.getAllUtilityInfo()));
        utilityBarAPI.getAllUtilityInfo().then(function (response) {
            console.log(response.length);
            console.log(JSON.stringify(response));
            for (let i = 0; i < response.length; i++) {
                var myUtilityInfo = response[i];
                console.log("myUtilityInfo--》" + JSON.stringify(myUtilityInfo));
                if (myUtilityInfo.utilityLabel === '呼叫控制台') {
                    utilityBarAPI.openUtility({
                        utilityId: myUtilityInfo.id
                    });
                }
            }
        })
        setTimeout(() => {
            // this.handlePublish();
            
        }, 1000); // 延迟1000毫秒,可以根据情况调整时间
    },

 handlePublish: function (cmp, event, helper) {
        var payload = {
            recordId: cmp.get("v.recordId")
        };
        cmp.find("callCenterMessageChannel").publish(payload);
    }

3.传递参数,通过message channel publish事件,在utility bar中lwc/aura组件订阅事件接受参数:

  handleCallCenterChannel: function (cmp, message, helper) {
        // debugger;
        console.log("订阅信息!!");
        if (message != null && message.getParam("recordId") != null) {
            console.log("recordId--->" + message.getParam("recordId"));
            cmp.set("v.recordId", message.getParam("recordId"));
            
        }
    },

tips:publish事件之前,需要提前open utility bar,否则utility bar中组件无法订阅

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2118277.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

新手烤鸡测试——单烤没拉满

文章目录 电脑配置先来一波硬件信息硬盘检测cpu-Z跑分AIDA64单烤FPUDistInfoDiskMark查看硬盘读写次数 电脑配置先来一波 图吧下载地址 硬件信息 硬盘检测 cpu-Z跑分 AIDA64单烤FPU 压榨cpu性能结果 DistInfo 计算了一下到几天快两个月的使用时间也没差 DiskMark查看硬盘读…

批量复制指定文件夹——EXCEL VBA 实现

工作中往往需要复制特定文件夹&#xff0c;例如&#xff0c;一个文件夹中有100个文件夹&#xff0c;我只需要复制其中50个文件夹&#xff0c;这50个文件夹的名字放入excel表中第一列&#xff0c;从第二行开始&#xff08;注意&#xff1a;第一行的表头不能覆盖&#xff09;&…

三十三、Gin的中间件

目录 定义&#xff1a; 一、处理请求前执行 1、模拟请求前需要鉴权 2、使用use方法 3、实验 二、处理请求后执行 1、在具体方法中添加输出方便观察整个处理请求过程生命周期 2、在next方法后增加输出即可在处理完成请求后执行内容 3、最终执行结果 定义&#xff1a; 在…

大模型LLM算法工程师技术面试指南

大模型LLM算法工程师技术面试指南 AI大模型全套学习资料 “最先掌握AI的人&#xff0c;将会比较晚掌握AI的人有竞争优势”。 这句话&#xff0c;放在计算机、互联网、移动互联网的开局时期&#xff0c;都是一样的道理。 我在一线互联网企业工作十余年里&#xff0c;指导过不少…

防跌倒识别摄像机

防跌倒识别摄像机 是一种结合了人工智能技术和监控摄像技术的先进设备&#xff0c;旨在通过实时监测和分析监控画面中的行为动作&#xff0c;及时发现并预防跌倒事件的发生。这种摄像机在医疗、养老院、家庭等场所有着广泛的应用前景。 防跌倒识别摄像机在医疗领域具有重要意义…

社群空间站付费入群系统易支付版全套搭建教程

社群空间站9.9付费入群系统易支付版全套搭建教程 1.创建站点 2.搭建环境 php7.2 3.上传源码包 数据库批量修改sq9.dongge1.icu s10.dongge1.icu 改为你的域名 4.上传数据库 修改数据库文件/data/config/ 5.访问域名 6.账户密码 admin 123456 7.易支付修改地址是在/data…

SpringBoot2:请求处理原理分析-常用接口方法参数整理

文章目录 1、常用的原生API参数2、一些自带的复杂参数3、自定义Bean参数4、自定义参数转换服务5、总结 1、常用的原生API参数 作用说明&#xff1a;在接口方法参数放入一些原生API作为参数使用。 案例&#xff1a; 接口收参形式&#xff1a; RequestMapping("/test"…

16款facebook辅助工具,总有一款适合你!

Hey小伙伴们~&#x1f44b; 是不是想利用FB大展拳脚&#xff0c;却苦于不知道如何开始&#xff1f;别急&#xff0c;今天就给你们安利16个超实用的FB营销工具&#xff0c;涵盖了内容创建和发布的应用程序&#xff0c;以及数据追踪分析、商品销售等多个方面让你轻松get海外获客新…

浅谈:CDN下真实IP的暴露

免责声明:本文仅做分享! 目录 CDN简介&#xff1a; 国内常见CDN&#xff1a; 国外常见CDN&#xff1a; 判断CDN存在? 在线ping检测: nslookup: 寻找真实IP----> 1-DNS历史解析纪录 2-子域名查询 1.在线平台查询 2.工具爆破 3.搜索引擎 3-网站邮件头信息 4-S…

100个视频如何转换成1个二维码

使用场景描述&#xff1a;有50-100个视频&#xff0c;要实现扫一个二维码&#xff0c;就可以完整观看这50-100个视频的内容&#xff0c;这种情况下&#xff0c;可以使用列表专辑二维码功能来轻松实现。 使用步骤 STEP1 注册帐号 使用视频专辑列表二维码&#xff0c;您需要注册…

原生 iOS 引入 Flutter 报错 kernel_blob.bin 找不到

情况 在一次原生 iOS 项目中引入 Flutter 的过程中&#xff0c;在模拟器中运行出现报错&#xff1a; 未能打开文件“kernel_blob.bin”&#xff0c;因为它不存在。 如下图&#xff1a; 模拟器中一片黑 原因&解决方案 这个是因为 Flutter 的打包 iOS framework 命令中…

美国洛杉矶ip有哪些独特优势

美国洛杉矶的IP地址独特优势主要体现在以下几个方面&#xff0c;rak小编为您整理发布美国洛杉矶的IP地址独特优势&#xff0c;希望 对您选择服务器有帮助。 1. 丰富的IP资源&#xff1a;美国洛杉矶多IP服务器提供的IP数量从几十到几百不等&#xff0c;最多可提供多达511个独立I…

沃创云外呼系统有哪些具体的功能特点

沃创云 [云呼叫中心]&#xff0c;新一代电销外呼系统 沃创云新一代电销外呼系统&#xff0c;提升接通率及降低封号率。 企业云通信-系统平台 沃创云电销外呼系统是一款适用于中小企业电话营销场景的云通信系统平台。 通过与中国移动、中国联通、中国电信三大运营商的紧密合…

Excel--不规则隔行填充底纹颜色

巧用条件格式快速给小计和总计行填充不同颜色。 先选择整个表格&#xff08;选中第一行&#xff0c;按住Shift双击边框即可选中整个表格&#xff09; 新建条件格式-使用公式确定要设置格式的单元格&#xff0c;输入$B3"小计&#xff1a;"&#xff0c;设置格式&…

【go-zero】api与rpc使用etcd服务发现

准备代码 etcd先安装启动 目录结构 go mod init rpc/demo/v2 编写rpc 在user-rpc目录下 user.proto 文件 可使用goctl快速生成 goctl rpc -o user.proto syntax "proto3";option go_package"./pb"; package pb;message GetUserInfoReq {int64 id 1…

第二证券:怎么选出一只好股票?选对股票就能赚钱吗?

怎样选出好股票&#xff1a; 1、比较股票流动性&#xff0c;流动性是指股票成交的生动程度&#xff0c;能够通过股票成交量来判断。好的股票一般具有较高的流动性&#xff0c;这样能够下降流转成本。流动性差的股票在交易时价格可能存在较大的点差&#xff0c;这会添加出资者的…

ComfyUI【基础篇】:小白都可以学会的ComfyUI安装教程(秋叶版安装包)

大家好我是极客菌&#xff01;&#xff01;&#xff01; 前面和大家分享过使用ComfyUI原生安装包在本地搭建ComfyUI环境。 今天和大家分享另一种在本地搭建ComfyUI环境的方式&#xff1a;使用秋叶大佬的安装包。 一. 秋叶大佬的安装包安装教程 &#xff08;需要的同学可自行…

【个人博客hexo版】npm安装hexo时会出现的一些问题

目录 bug1 关于缓存地址和全局变量1.删除C:\Users\用户\下的.npmrc文件2.重新设置淘宝镜像 bug2 需要管理员权限解决办法 bug1 关于缓存地址和全局变量 之前修改过缓存地址和全局变量&#xff0c;卸载又安装了新版的nodejs&#xff0c;安装hexo时会弹出之前的缓存地址&#xf…

18057 ASCII码值之和的差

**思路**&#xff1a; 1. 读取两个字符串 s1 和 s2。 2. 计算每个字符串中所有字符的 ASCII 码值之和。 3. 计算两个字符串的 ASCII 码值之和的差。 4. 输出结果。 **伪代码**&#xff1a; 1. 读取字符串 s1。 2. 读取字符串 s2。 3. 初始化 sum1 和 sum2 为 0。 4. 对于 s1 中…

龙良曲pytorch笔记14-33

一、张量数据类型 张量维度含义0维标量1维向量2维矩阵3维时间序列数据 股价 文本数据 单张彩色图片(RGB) 例如&#xff0c;一个图像可以用三个字段表示&#xff1a; (width, height, channel) 3D 但是&#xff0c;在机器学习工作中&#xff0c;我们经常要处理不止一张图片或…