如何在ThingsBoard的HTML Card中实现点击按钮修改共享属性并弹出确认框

直接给你完整的可复用代码，照着抄就能用，每部分都标了注释，你只需要改少量参数：

1. HTML 代码（粘贴到HTML Card的「HTML」标签） #

<button id="updatePropBtn" class="action-btn">修改设备共享属性</button>

2. CSS 代码（粘贴到「CSS」标签，可选美化） #

.action-btn {
  padding: 8px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.action-btn:hover {
  background-color: #0056b3;
}

3. JavaScript 代码（粘贴到「JavaScript」标签） #

// 获取页面上的按钮元素
const updateBtn = document.getElementById('updatePropBtn');

// 给按钮绑定点击事件
updateBtn.addEventListener('click', async () => {
  // 弹出确认弹窗，用户点确定才继续
  const isConfirm = confirm('确定要修改设备的共享属性吗？');
  if (!isConfirm) return;

  try {
    // --------------------------
    // 这里改成你要修改的共享属性键值对
    const targetProperties = {
      // 示例：把status属性改成"running"
      status: "running"
    };
    // --------------------------

    // 获取当前小部件绑定的设备ID（不用手动填，自动取）
    const deviceId = widgetContext.entityId.id;

    // 调用ThingsBoard接口修改共享属性
    await tbApi.post(`/api/plugins/telemetry/DEVICE/${deviceId}/SHARED_SCOPE`, targetProperties);

    // 修改成功提示
    alert('共享属性修改完成！');
    // 可选：刷新小部件，实时显示新属性
    widgetContext.refresh();
  } catch (err) {
    // 修改失败提示
    alert(`修改出错：${err.message}`);
    console.error('错误详情：', err);
  }
});

配置步骤 #

1. 打开仪表板编辑模式，添加「HTML Card」小部件
2. 切换到小部件的「数据」标签，绑定你要操作的目标设备
3. 分别把上面的代码粘贴到对应标签页
4. 保存小部件，退出编辑模式，点击按钮测试即可

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