Thingsboard v3.6.2PE自定义动作如何接收用户输入并执行对应操作？

环境信息 #

• Thingsboard版本：v3.6.2PE
• 组件：Entities hierarchy

当前在自定义动作（触发源：on node selected）中，已实现根据EntityType跳转不同仪表板，现在需要实现：

1. 点击节点时弹出含多个可点击选项的弹窗；
2. 用户选择选项后，自定义动作根据选择跳转对应仪表板。

以下是尝试实现的代码片段：

弹窗函数代码 #

function showActionPopup(title, actions) {
  widgetContext.dialogs.confirm(title, "Select an action:").then(function (selectedAction) {
    if (selectedAction === actions[0]) {
      openDashboardStates("device_fw_n_sw");
    } else if (selectedAction === actions[1]) {
      showAlertDialog("Device Details", "Device details to be displayed here");
    }
  });
}

调用代码 #

$injector.get(widgetContext.servicesMap.get('entityService')).getEntity(entityId.entityType, entityId.id)
  .subscribe(function (data) {
    if (entityId.entityType == "DEVICE") {
      showActionPopup("Title", ["Open Dashboard1", "Open dashboard2"]);
    } else if (entityId.entityType == "ASSET") {
      showActionPopup("Title", ["Open Asset Dashboard1", "Open Asset Details"]);
    }
  });

注：代码中的动作仅为示例，实际动作有所不同。

使用上述代码后，弹窗不符合需求，且widgetContext.dialogs.popup在Thingsboard中不可用，请问该如何解决？

在Thingsboard PE v3.6.2中，widgetContext.dialogs.confirm默认是确认/取消弹窗，无法实现多选项选择。要实现多选项弹窗，可采用以下两种可行方案：

方案1：使用prompt实现简单多选项弹窗 #

利用prompt的输入框特性，渲染下拉选项供用户选择：

function showActionPopup(title, actions) {
  // 构建HTML下拉选项
  let selectHtml = `<select id="actionSelect">`;
  actions.forEach(action => {
    selectHtml += `<option value="${action}">${action}</option>`;
  });
  selectHtml += `</select>`;

  widgetContext.dialogs.prompt(title, selectHtml, null, null, true).then(function (result) {
    if (result && result.length > 0) {
      const selectedAction = result;
      // 根据选择执行对应动作
      switch(selectedAction) {
        case "Open Dashboard1":
          openDashboardStates("device_fw_n_sw");
          break;
        case "Open dashboard2":
          showAlertDialog("Device Details", "Device details to be displayed here");
          break;
        case "Open Asset Dashboard1":
          openDashboardStates("asset_dashboard");
          break;
        case "Open Asset Details":
          showAlertDialog("Asset Details", "Asset details to be displayed here");
          break;
      }
    }
  });
}

方案2：使用tbDialogService创建自定义弹窗（更灵活） #

通过注入tbDialogService创建完全自定义的弹窗组件，适合复杂场景：

// 在自定义动作开头注入tbDialogService
const tbDialogService = $injector.get('tbDialogService');

function showActionPopup(title, actions) {
  // 构建弹窗内容模板
  const template = `
    <md-dialog aria-label="${title}">
      <md-dialog-content>
        <h2>${title}</h2>
        <div class="tb-dialog-content">
          <div ng-repeat="action in actions">
            <md-button class="md-raised md-primary" ng-click="selectAction(action)">
              {{action}}
            </md-button>
          </div>
        </div>
      </md-dialog-content>
    </md-dialog>
  `;

  // 创建弹窗控制器
  const controller = ['$scope', '$mdDialog', function($scope, $mdDialog) {
    $scope.actions = actions;
    $scope.selectAction = function(action) {
      $mdDialog.hide(action);
    };
  }];

  // 打开弹窗并处理选择结果
  tbDialogService.open({
    template: template,
    controller: controller,
    clickOutsideToClose: true
  }).then(function(selectedAction) {
    if (selectedAction) {
      // 根据选择执行对应动作
      if (selectedAction === "Open Dashboard1") {
        openDashboardStates("device_fw_n_sw");
      } else if (selectedAction === "Open dashboard2") {
        showAlertDialog("Device Details", "Device details to be displayed here");
      } else if (selectedAction === "Open Asset Dashboard1") {
        openDashboardStates("asset_dashboard");
      } else if (selectedAction === "Open Asset Details") {
        showAlertDialog("Asset Details", "Asset details to be displayed here");
      }
    }
  });
}

注意事项 #

1. 确保自定义动作中已正确注入所需服务（如tbDialogService、entityService）；
2. openDashboardStates函数需传入正确的仪表板别名或ID，且当前用户有对应仪表板的访问权限；
3. 自定义弹窗样式可通过Thingsboard的自定义CSS调整，适配平台风格。

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