thingsboard widget action

• TOC
  {:toc}

Introduction

Actions feature can be treated as navigation among dashboard’s states or between different dashboards.
Actions allow quickly and easily configuring the transition to created state, transferring to other dashboards, or even updating the dashboard you are in.
Depending on the widget, the action sources differ. However, the type of action you are able to choose will be the same for all widgets.

Actions are adjusted in the Edit mode of the needed widget.

To fully understand how to use Actions, you have to add a State to your widget. How to do this you should read here.

Action types

Types of action define which exactly action will be taken.
There are five action types that are the same for all widgets.
Learn how to configure action types with the example on Entity Cards widget examples.

Action types configuration

Since the action types are the same for all widgets, in this tutorial will be used the Action Cell Button action source to explain all action types,
and they will be explained using the Entity Cards widget examples.

Navigate to new dashboard state

States are so-called levels that allow you to navigate between different devices, assets, and widget objects to see the information you need in more detail.
When choosing the Navigate to new dashboard state action type, you will be transferred to the previously created state of your choice.
How to add states to your dashboard, please read here.

After a state has been added, we can configure a Navigate to new dashboard state action type:

1. In the widget’s Edit mode move to the last cell “Actions”.
2. Click the “+” icon on the right of the window to add a new action.
3. As an example for this manual, in the top drop-down menu, choose an “Action cell button” action source.
4. In the next line input a name for the action and choose an icon that will represent a button. With this button, action will be performed.
5. In the drop-down menu “Type”, choose a Navigate to new dashboard state action type.
6. After choosing an action type, the drop-down menu “Target dashboard state” appears. Select a previously created state you’d like to be transitioned to.
7. When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window.
8. Now you see configured action, so you can double-check action source, icon, and action type.
9. Apply changes by clicking the orange tick icon in the top right of the window and then close the details window.
10. Save applied changes by clicking the orange tick icon “Apply changes” in the bottom right of the screen.

After saving changes, you can see an icon-button opposite the entity names. Clicking any of these icons will bring you to the previously selected state.

{% include images-gallery.html imageCollection=“navigate-new-state-cards” %}

Update current dashboard state

This action type allows updating a dashboard that you are currently on.
While using a dashboard, you can view detailed information about a specific device/asset in real-time.
The most common use of this action type is through Chart widgets where you can see the details more accurately.
For starters let’s add a Chart widget to the Dashboard to configure the Update current dashboard state action type:

1. Enter Dashboard’s Edit mode and in the drop-down “Select widget” menu choose Charts: Timeseries Line Chart.
2. In the “Add widget” window type input your data source, in this manual for example is used pressure data. Click “Add” at the right bottom of the widget.
3. We can see that the Chart widget has appeared on the dashboard, but it has no data to display yet.
4. Enter Edit mode of the Table widget by clicking the Pencil icon on the right top of the widget.
5. In the widget’s Edit mode move to the last cell “Actions”.
6. Click the “+” icon on the right of the window to add a new action.
7. As an example for this manual, in the top drop-down menu, choose an “Action cell button” action source.
8. In the next line input a name for the action and choose an icon that will represent a button. With this button, action will be performed.
9. In the drop-down menu “Type”, choose an Update current dashboard state action type.
10. After choosing an action type, click “Add” at the right bottom of the “Add action” window.
11. Now you see configured action, so you can double-check action source, icon, and action type.
12. Apply changes by clicking the orange tick icon in the top right of the window and then close the details window.
13. Save applied changes by clicking the orange tick icon “Apply changes” in the bottom right of the screen.

After saving changes, you will see button icons opposite the entity names. Clicking on any of these icons will update the entity details and they will be shown on the Chart widget on the current dashboard.

{% include images-gallery.html imageCollection=“update-current-dash-state” %}

Navigate to other dashboard

This type of action transfers you to a previously created dashboard of your choice.
To be fastly transitioned to another selected dashboard, you should:

1. In the widget’s Edit mode move to the last cell “Actions”.
2. Click the “+” icon on the right of the window to add a new action.
3. As an example for this manual, in the top drop-down menu, choose an “Action cell button” action source.
4. In the next line input a name for the action and choose an icon that will represent a button. With this button, action will be performed.
5. In the drop-down menu “Type”, choose a Navigate to other dashboard action type.
6. After choosing an action type, the drop-down menu “Target dashboard” appears. Select a previously created dashboard you’d like to be transitioned to.
   Notice that it’s also possible to be transitioned to the existed state in the chosen dashboard.
7. After configuring an action type, click “Add” at the right bottom of the “Add action” window.
8. Now you see configured action, so you can double-check action source, icon, and action type.
9. Apply changes by clicking the orange tick icon in the top right of the window, and then close the details window.
10. Save applied changes by clicking the orange tick icon “Apply changes” in the bottom right of the screen.

After saving changes, you can see icon-buttons opposite the entity names. Clicking any of these icons will transfer you to the previously selected dashboard (or chosen state in that dashboard).

{% include images-gallery.html imageCollection=“navigate-to-dash-cards” %}

Custom action

A Custom action allows manually configuring a function that can be used to add an individual action to your widget (for example deleting listed devices/assets).
To configure a custom action with a function (with an example of a device deletion):

1. In the widget’s Edit mode move to the last cell “Actions”.
2. Click the “+” icon on the right of the window to add a new action.
3. As an example for this manual, in the top drop-down menu, choose an “Action cell button” action source.
4. In the next line input a name for the action and choose an icon that will represent a button. With this button, action will be performed.
5. In the drop-down menu “Type”, choose a Custom action action type.
6. After choosing a Custom action type, a field for inputting a function will appear.
7. Enter your custom function there. An example in this tutorial is a device deletion action that adds the ability to delete devices right from the table
   (you can find an example of the function under the screenshots section).
8. Apply changes by clicking the “Save” button at the right bottom of the “Add action” window.
9. Apply changes by clicking the orange tick icon in the top right of the window and then close the details window.
10. Save applied changes by clicking the orange tick icon “Apply changes” in the bottom right of the screen.

Execute an action by clicking the “trash box” icon opposite entity names.

{% include images-gallery.html imageCollection=“custom-action” %}

An example of the function for a device deletion.

{% highlight ruby %}
let $injector=widgetContext.$scope.$injector;
let dialogs = $injector.get(widgetContext.servicesMap.get(‘dialogs’));
let deviceService = $injector.get(widgetContext.servicesMap.get(‘deviceService’));

openDeleteDeviceDialog();

function openDeleteDeviceDialog() {
let title = "Are you sure you want to delete the device " + entityName + “?”;
let content = “Be careful, after the confirmation, the device and all related data will become unrecoverable!”;
dialogs.confirm(title, content, ‘Cancel’, ‘Delete’).subscribe(
function(result) {
if (result) {
deleteDevice();
}
}
);
}

function deleteDevice() {
deviceService.deleteDevice(entityId.id).subscribe(
function() {
widgetContext.updateAliases();
}
);
}
{% endhighlight %}