Search code examples
javascripthtmlcssdashboardthingsboard

How to make Custom Action of Thingsboard to accept users input and act accordingly?

Thingsboard version: v3.6.2PE

Widget: Entities hierarchy

I'm using custom actions (action source: on node selected). I'm able to navigate to different dashboards based on EntityType using the custom action. I have a new situation wherein the custom action should receive input from the user. For example,

  • Upon clicking on a node, a popup should be displayed that has several clickable options.
  • When one of those options is clicked, the custom action should navigate to the dashboard based on the selected option.

Following is my snippet that displays a popup when clicking on a node.

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");
    }
  });
}

The above function is called from:

$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"]);
    }
  });

The actions as seen in the snippet are exemplary, my actual actions are different.

I get the following using the above code snippets:

enter image description here

It seems widgetContext.dialogs.confirm is not helpful in my case and widgetContext.dialogs.popup is not available in Thingsboard.

How can this problem be solved?

Thank you.

Solution

  • I solved it using example scripts from Asset admin table widget.

    enter image description here

    I edited the example HTML and JS scripts available in the widget under Actions.