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

2024-09-09 17:20

本文主要是介绍如何在页面调用utility bar并传递参数至lwc组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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;// 当组件加载时处理记录 IDasync connectedCallback() {// console.log('Selected Record IDs: ', this.selectedIds);console.log('record Id: ', this.recordId);debuggerawait this.handleOpen();setTimeout(() => {this.handlePublish();this.closeQuickAction()}, 1000); // 延迟1000毫秒,可以根据情况调整时间}//调用utility api打开utility barasync handleOpen(){debuggerconst 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事件至channelhandlePublish(){// 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) {debuggervar 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中组件无法订阅

这篇关于如何在页面调用utility bar并传递参数至lwc组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1151792

相关文章

基于@RequestParam注解之Spring MVC参数绑定的利器

《基于@RequestParam注解之SpringMVC参数绑定的利器》:本文主要介绍基于@RequestParam注解之SpringMVC参数绑定的利器,具有很好的参考价值,希望对大家有所帮助... 目录@RequestParam注解:Spring MVC参数绑定的利器什么是@RequestParam?@

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤:代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

讯飞webapi语音识别接口调用示例代码(python)

《讯飞webapi语音识别接口调用示例代码(python)》:本文主要介绍如何使用Python3调用讯飞WebAPI语音识别接口,重点解决了在处理语音识别结果时判断是否为最后一帧的问题,通过运行代... 目录前言一、环境二、引入库三、代码实例四、运行结果五、总结前言基于python3 讯飞webAPI语音

Android WebView无法加载H5页面的常见问题和解决方法

《AndroidWebView无法加载H5页面的常见问题和解决方法》AndroidWebView是一种视图组件,使得Android应用能够显示网页内容,它基于Chromium,具备现代浏览器的许多功... 目录1. WebView 简介2. 常见问题3. 网络权限设置4. 启用 JavaScript5. D

SpringBoot接收JSON类型的参数方式

《SpringBoot接收JSON类型的参数方式》:本文主要介绍SpringBoot接收JSON类型的参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、jsON二、代码准备三、Apifox操作总结一、JSON在学习前端技术时,我们有讲到过JSON,而在

JAVA虚拟机中 -D, -X, -XX ,-server参数使用

《JAVA虚拟机中-D,-X,-XX,-server参数使用》本文主要介绍了JAVA虚拟机中-D,-X,-XX,-server参数使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有... 目录一、-D参数二、-X参数三、-XX参数总结:在Java开发过程中,对Java虚拟机(JVM)的启动参数进

Flutter监听当前页面可见与隐藏状态的代码详解

《Flutter监听当前页面可见与隐藏状态的代码详解》文章介绍了如何在Flutter中使用路由观察者来监听应用进入前台或后台状态以及页面的显示和隐藏,并通过代码示例讲解的非常详细,需要的朋友可以参考下... flutter 可以监听 app 进入前台还是后台状态,也可以监听当http://www.cppcn

解读docker运行时-itd参数是什么意思

《解读docker运行时-itd参数是什么意思》在Docker中,-itd参数组合用于在后台运行一个交互式容器,同时保持标准输入和分配伪终端,这种方式适合需要在后台运行容器并保持交互能力的场景... 目录docker运行时-itd参数是什么意思1. -i(或 --interactive)2. -t(或 --