ThingsBoard 3.5.1自定义导航Widget开发及预定义仪表盘配置求助

问题分析 #

你当前的代码存在几个核心问题导致功能异常：

• 硬编码仪表盘ID无法实现跨仪表盘复用，每个页面都要修改代码
• 返回按钮未实现有效的导航逻辑
• 使用固定ID获取DOM元素，多Widget实例会引发冲突
• 不必要的HTML转义字符增加代码复杂度

优化后的实现方案 #

步骤1：配置可复用参数 #

在Widget配置的数据标签页，添加1个自定义参数：

• targetDashboardId：类型选字符串，用于设置按钮1跳转的目标仪表盘ID（返回按钮依赖系统导航历史，无需额外配置）

步骤2：完整JavaScript代码 #

self.onInit = function() {
    // 直接操作Widget容器，生成UI元素
    const container = self.ctx.$container;
    container.html(`
        <div style="display: flex; gap: 8px; padding: 8px;">
            <button class="tb-btn tb-btn-primary nav-btn">跳转到目标仪表盘</button>
            <button class="tb-btn tb-btn-default nav-btn">返回上一页</button>
        </div>
    `);

    // 通过类选择器获取按钮，避免ID冲突
    const targetBtn = container.find('.nav-btn')[0];
    const backBtn = container.find('.nav-btn')[1];

    // 按钮1：跳转到预定义仪表盘
    targetBtn.addEventListener('click', () => {
        const targetId = self.ctx.customParams.targetDashboardId;
        if (targetId) {
            self.ctx.navigationApi.navigateToDashboard(targetId);
        } else {
            console.error('请在Widget参数中配置目标仪表盘ID');
        }
    });

    // 按钮2：返回上一个仪表盘
    backBtn.addEventListener('click', () => {
        if (self.ctx.navigationApi.canGoBack()) {
            self.ctx.navigationApi.back();
        } else {
            console.log('无历史页面可返回');
        }
    });
};

self.onDestroy = function() {
    // 清理事件监听，避免内存泄漏
    self.ctx.$container.off('click', '.nav-btn');
};

关键优化点 #

• 复用性：通过自定义参数传递目标仪表盘ID，每个仪表盘使用Widget时只需配置参数，无需修改代码
• DOM安全：用类选择器替代固定ID，支持同一页面多个Widget实例共存
• 返回逻辑：调用ThingsBoard内置的navigationApi.back()和canGoBack()方法，利用系统导航历史实现标准返回功能
• UI一致性：使用平台内置的tb-btn样式类，保持和系统界面风格统一

使用流程 #

1. 创建新的静态Widget，将上述代码粘贴到JavaScript编辑器
2. 进入Widget配置的数据标签页，添加自定义参数targetDashboardId
3. 在需要使用该Widget的仪表盘上添加组件，配置对应的目标仪表盘ID即可

内容的提问来源于stack exchange，提问作者Akhil