如何在页面调用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;
    // 当组件加载时处理记录 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中组件无法订阅

相关推荐
kyriewen1 小时前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
梦想CAD控件2 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js
月月大王的3D日记2 小时前
Three.js 入门系列(8):六种光源全解析 —— 关灯了,开光!
前端·javascript
自然 醒3 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
其美杰布-富贵-李5 小时前
第 10 篇:灯光与阴影
javascript·three.js
小高0076 小时前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
di24k24k7 小时前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui
JKooll7 小时前
WPS 表格 DISPIMG 函数实战:用 JavaScript 将图片真正嵌入单元格
javascript·wps
晴天168 小时前
Rust 快速入门 (从 JavaScript 开发者视角)-Day09
开发语言·javascript·rust
其美杰布-富贵-李8 小时前
第 6 篇:相机与 OrbitControls
前端·javascript·three.js