1. Home
  2. /
  3. Docs
  4. /
  5. Documentation
  6. /
  7. User Guide
  8. /
  9. Widget Actions

Widget Actions

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 can be configured both when editing and creating the required widget.

In this guide, we will configure actions in the editing mode using the Entities table widget as an example. Please, learn here how to add an Entity table widget to your dashboard.

To fully understand how to use Actions, you have to add a State to your dashboard. You can find information on how to do this here.

Add action

Let’s add your first action. In this step, we will outline only the general steps without going into the details of each setting. Examples of using each type of action and action source will be covered later in the guide for better understanding.

Most widgets offer two configuration options: basic and advanced. Accordingly, the process of adding actions differs slightly between these modes. Let’s explore both:

If you’re using the basic widget configuration:

  • Enter the editing mode of the widget to which you want to add an action, scroll down and find the “Actions” menu item;
  • Click the “Add action” button (once you have created one or more actions, the “Add actions” button will change to the + icon). The “Actions” window will open. Right now, it’s empty, but later it will display all created actions;
  • Click the ‘plus’ icon in the top right corner of the screen to open a new “Add action” window. Here you must configure a new action by entering a name, specifying the action source, and selecting the action type. Further action configuration will depend on the selected action type. Then, click “Add” to proceed;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”;
  • Click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

If you’re using the advanced widget settings:

  • Enter the widget editing mode, and navigate to the “Actions” tab. Currently, it is empty, but later all created actions will be displayed here;
  • Click the ‘plus’ icon in the top right corner of the screen to open a new “Add action” window. Here you must configure a new action by entering a name, specifying the action source, and selecting the action type. Further action configuration will depend on the selected action type. Then, click “Add” to proceed;
  • Now, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”;
  • Click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

Now, you can use the action. This can involve clicking on a separate button, the widget title, an individual row of entity, etc.

Action types

The types of action define the specific action that will be taken. There are seven action types that are applicable to all widgets:

  • Navigate to new dashboard state – transfers you to the specified state within the current dashboard;
  • Update current dashboard state – updates the dashboard that you are currently on;
  • Navigate to other dashboard – transfers you to a specified dashboard;
  • Custom action – allows manual configuration of a function for an individual action on your widget;
  • Custom action (with HTML template) – allows manual entry of a function within an existing HTML template;
  • Mobile action – allows the use of various mobile device functions such as taking photos, scanning QR codes, getting device location, making phone calls and so on;
  • Open URL – allows you to go to any resource represented by a URL.

Let’s consider each of these types of actions separately.

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.

We assume that you have already added a new state to the dashboard and familiarized yourself with the “Add action” step. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “Action cell button” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

After saving your changes, you’ll see an action icon next to each entity. Click on any of them. You will be transferred to the state specified in the action.

Open new dashboard state in a separate dialog or in a popup window

There are times when it doesn’t make sense to move to a separate dashboard state to view the details of a widget, and you just want to open it on the same dashboard page. For these situations, there is an Dashboard state display option feature that allows opening another state on the same page in a separate dialog box or in a popup window.

In the action settings, select the desired dashboard state display option and make additional window settings such as show/hide dashboard toolbar, popup window width and height, etc.

As an example, consider displaying the new dashboard state in a separate dialog window:

  • Select a “Open in separate dialog” option in the “Dashboard state display option” field;
  • By default, the checkbox “Hide dashboard toolbar in dialog” is ticked. If you need to see a toolbar in the dialog window, you should uncheck it. The toolbar displays entities, time window, dashboard export button, and expand to a fullscreen button;
  • It is optional to adjust a dialog width and height in percents. Width is relative to viewport height, and height is relative to width correspondingly;
  • When the action has been configured, save all changes.

To perform an action and open a dialog window with the new state, click an action button next to any entity.

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 this example, in addition to the “Entities table” widget, you need to add another widget to your dashboard – “Timeseries Line Chart”. As a data source, specify the asset type “Entity from dashboard state”:

  • Enter edit mode of the dashboard and click the “Add new widget” button at the top of the screen;
  • Find the “Charts” widget bundle and click on it;
  • Select the “Time series chart” widget;
  • Navigate to the “Entity alias” tab in the “Datasource” section. Enter the desirable alias name in the “Entity alias” field and click the “Create a new one!” button;
  • Select the “Entity from dashboard state” from the “Filter type” field and click “Add”;
  • Replace the label of the “temperature” key with ${entityName}. Then, click “Add” to add new widget on the dashboard;
  • Drag the “Time series chart” widget to a free space and resize it.

Now let’s add an action with the type “Update current dashboard state” for the “Entities table” widget. We assume that you are already familiar with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “Action cell button” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select an “Update current dashboard state” action type from the “Action” drop-down menu;
  • Click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

After saving changes, you will see icons opposite the entity names in the “Entities table” widget. Clicking on any of these icons will update the entity details, and they will be shown on the “Timeseries Line Chart” widget on the current dashboard.

This type of action transfers you to a previously created dashboard of your choice.

We assume that you are already familiar with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “Widget header button” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select a “Navigate to other dashboard” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a dashboard you’d like to be transitioned to. Note that you can also navigate to an existing state of the selected dashboard;
  • When the desired dashboard has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

After saving the changes, you can see an icon in the upper right part of the widget. Click this icon. You will be transferred to the previously selected dashboard (or chosen state in that dashboard).

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):

We assume that you are already familiar with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “Action cell button” action source;
  • Input a name for the action and select an icon that will represent an action button. With this icon, action will be performed;
  • Select a “Custom action” action type from the “Action” drop-down menu;
  • After choosing a Custom action type, a field for inputting a function will appear;
  • Enter your custom function there. An example in this manual is an action that adds the ability to delete devices right from the table (you will find an example of this function below);

An example of the function for a device deletion (click to expand):

  • After input function, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

After saving the changes, you will see an action button next to the entity names in the “Entities Table” widget. Clicking on one of them will perform the action of deleting the corresponding object.

Custom action (with HTML template)

A Custom action with an HTML template allows manually entering a function in an existing HTML template (for example creating dialog windows with an opportunity to create or edit listed devices/assets). After choosing a Custom action type (with HTML template), four tabs appear for setting up the action:

  • Resources” tab is used to specify external JavaScript/CSS resources used by the widget;
  • CSS” tab contains custom action specific CSS style definitions;
  • HTML” tab contains custom action HTML code;
  • JavaScript” tab contains JS code of your custom action.

In this example, we will add two action buttons. In the upper right corner of the widget there will be located action button for adding new entities. The second action will be responsible for the buttons next to the entity names for editing these entities.

Let’s start with the action button for adding new entities. We assume that you have already completed the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “Widget header button” action source;
  • Input a name for the action and select an icon that will represent an action button. With this icon, action will be performed;
  • Select a “Custom action (with HTML template)” action type from the “Action” drop-down menu;
  • In the tabs that appear, select “JavaScript” tab. Enter a JavaScript function for your custom action. In this example, we use a function that adds the ability to create a new entity.
  • In “HTML” tab, enter an HTML code for your custom action (you will find an example of this function below);
  • After input functions, click the “Add” button at the bottom of the “Add action” window.

Now let’s add an action button to edit the entities.

  • Click the “plus” icon in the top right corner of the screen again to open a new “Add action” window;
  • As an example for this manual, select “Action cell button” action source;
  • Input a name for the action and select an icon that will represent an action button. With this icon, action will be performed;
  • Select a “Custom action (with HTML template)” action type from the “Action” drop-down menu;
  • In the tabs that appear, select “JavaScript” tab. Enter a JavaScript function for your custom action. In this example, we use a function that adds the ability to edit an entity (you will find an example of this function below);
  • After input functions, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured actions, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

Perform the actions of adding a new device by clicking the “Add device” action button at the top of the widget. In the “Add entity” window that opens, select the type of new entity – “Device” and enter its name. Enter the required data and click “Create”.

Click on the action button next to the name of the device you want to edit. After clicking the action button, the device editing window will open. Make the necessary changes and click “Save”.

Open URL

This type of action will transfer you to the resource represented by the URL. This resource can be an HTML page, a document, an image, internal NexAI page (for example, Alarms), etc.

We assume that you are already familiar with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “Widget header button” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select an “Open URL” action type from the “Action” drop-down menu;
  • After selecting an action type, “URL” menu appears. Insert the URL link to the page you want to navigate to when the action button is clicked;
  • Optionally, enable the option to open the URL page in a new browser tab;
  • Click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

After saving the changes, you can see an icon in the upper right part of the widget. Click this icon. You will be transferred to the URL specified in the action. In our case, it’s the “Working with NexAI widgets” documentation page.

Action sources

Action sources are specific actions that need to be performed to achieve a goal (like clicking a widget header button, double-clicking a row, or a map’s marker). They vary across different widgets. Action sources will be explained separately for each widget type, separately using an example of the most commonly used type of action “Navigate to new dashboard state”.

Next, we will demonstrate how to utilize each action source using the “Entities table” widget as an example. If you’re unfamiliar with adding an Entity table widget to your dashboard, you can learn how to do so here.

Action cell button

The “Action cell button” action source adds an action button to each individual entity in the widget, such as deleting devices/assets or editing them. This action button is often used in the “Entity table” widget. In the example of this widget, let’s consider the use of “Action cell button”. Clicking on the action icon of a selected entity will transfer us to another state with detailed information about that entity.

We assume that you have already added a new state to the dashboard and familiarized yourself with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • Select “Action cell button” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

As you can see, there is an action cell button next to each entity name. By clicking this button, the corresponding action will be executed, namely transitioning to the chosen state.

Widget header button

The “Widget header button” action source adds an action button in the header of the widget. Clicking this button executes an action. This button is responsible for the whole widget, not for separate entities. The widget header button is the most commonly used action source, and it can be found in all widgets. To configure the Widget header button action source, you should follow these steps:

We assume that you have already added a new state to the dashboard and familiarized yourself with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • Select “Widget header button” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

As you see now, an action button has appeared in the header of the widget. After you click it, action will be performed, namely, the transition to the chosen state.

On row click

The “On row click” action source triggers an action when a row in the widget is clicked. This action button is often used in the “Entity table” widget. Let’s illustrate the use of the “On row click” action with the aforementioned widget as an example. Clicking on a row of the selected entity in the widget will navigate us to another state with detailed information about that entity.

We assume that you have already added a new state to the dashboard and familiarized yourself with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • Select “On row click” action source;
  • Input a name for the action. Optionally, select an icon;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

Click on any entity row to perform an action, namely, to navigate to the selected state where detailed information about the chosen device is displayed.

On row double click

The “On row double click” action source triggers an action when a row in the widget is double-clicked. Let’s explore its use with the “Entities table” widget, where this action is often used. Double-clicking on a row of the selected entity in the widget will navigate us to another state with detailed information about that entity.

We assume that you have already added a new state to the dashboard and familiarized yourself with the “Add action” step and know how to do it. Therefore, we will proceed directly to the action configuration step.

  • Enter edit widget mode and open “Add action” window;
  • Select “On row double click” action source;
  • Input a name for the action. Optionally, select an icon;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

Double-click on an entity row to perform an action, namely, navigate to the selected state. In our example, clicking a node will navigate you to a state displaying the details of the selected node.

On node selected (only in Entities Hierarchy widget)

In this example, we’ll add an “Entity hierarchy” widget to our dashboard. Entities Hierarchy widget displays the hierarchy of entities based on their relations. For more information about entities and relations, you can read here. Clicking on any entity (node) in the Entities hierarchy will perform the configured action.

We assume that you have already added a new state to the dashboard. Let’s start setting up the action:

  • Enter dashboard edit mode. Click the “Add widget” button at the top of the screen or click the large “Add new widget” icon in the center of the screen (if this is your first widget on this dashboard);
  • Find the “Entity widgets” widget bundle and click on it;
  • Select the “Entity hierarchy” widget;
  • Specify the data source for the widget and navigate to the “Actions” tab. Click the “plus” icon in the top right corner of the screen to open a new “Add action” window;
  • Select “On node selected” action source. Input a name for the action. Optionally, select an icon. Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu. After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to. When the desired state has been selected, click the “Add” button;
  • Now in the “Actions” window, you can see the configured action. Click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

To perform an action you should click any of the nodes in the Entities hierarchy. In our example, clicking a node will navigate to a state that displays the details of the selected node.

On HTML element click (only in HTML widgets)

NexAI offers HTML widgets that allow full configuration by customizing an HTML code in their settings. To add an action to these widgets, you need to add an action identifier to the written code. Clicking on an item in the widget will then execute the configured action.

Example for HTML Card widget

In this example, we’ll add an “HTML Card” widget to our dashboard. Clicking anywhere on the widget will perform the action. We also assume that you have already added a new state to the dashboard. Let’s start setting up the action:

  • Enter edit widget mode and open “Add action” window;
  • Click the “Add widget” button at the top of the screen or click the large “Add new widget” icon in the center of the screen (if this is your first widget on this dashboard);
  • Find the “HTML widgets” widget bundle and click on it;
  • Select the “HTML Card” widget;
  • Navigate to the “Actions” tab. Click the “plus” icon in the top right corner of the screen to open a new “Add action” window;
  • Input a name for the action;
  • Select “On HTML element click” action source;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now navigate to the “Appearance” tab of the widget. There you should see two fields: CSS and HTML;
  • In the HTML section, enter the action’s ID which should be its name in a specific format:
<div id='map' class='card'>Devices location</div>

where “map” is the name of the action and “Devices location” is the text which is going to be shown on the HTML Card widget.

  • Afterwards, click the “Add” button;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

To execute an action click anywhere on the widget. This will navigate you to a state where details of all devices are displayed.

Example for HTML Value Card widget

In this example, we’ll add an “HTML Value Card” widget to our dashboard. When clicking on the widget title, an action will be performed. Let’s start setting up the action:

  • Enter edit widget mode and open “Add action” window;
  • As an example for this manual, select “On HTML element click” action source;
  • Input a name for the action and select an icon that will represent a button. With this icon, action will be performed;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now move to the Appearance cell of the widget;
  • In the HTML section enter an ID of the action which is its name in a format:
<h1 id='map'>Devices location</h1>

where map is the name of the action and Devices location is the text that will be shown in the widget’s header.

  • Afterwards, click the “Apply” button to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

To execute an action, click on the widget title. This will navigate you to a state where details of all devices are displayed.

Map widget action sources

Map widget has unique action sources that need to be considered separately.

Let’s start by adding a map widget, namely OpenStreetMap widget. We have a separate guide on how to create and configure a map widget. Please, familiarize yourself with it first.

Now it’s time to add an action. All further explanations concerning actions assume that you have already added a new state to the dashboard and familiarized yourself with the “Add action” step. Therefore, we will proceed directly to the action configuration step.

On circle click

Circle is a plane figure, boundary points of which are always the same distance away from a fixed central point. We use circle which is based on coordinates that are specified within the device we use. Learn how to add a circle on the Map widget, by reading here.

  • Enter edit widget mode and open “Add action” window;
  • Select “On circle click” action source;
  • Input a name for the action. Optionally, select an icon;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

After clicking on the circle on the map, action will be performed, namely, the transition to the specified state.

On marker click

The action will be executed by clicking on the red entity marker on the map.

  • Enter edit widget mode and open “Add action” window;
  • Select “On marker click” action source;
  • Input a name for the action. Optionally, select an icon;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

Clicking on the marker on the map will take you to the specified state.

On polygon click

Polygon is a plane figure that’s described by a finite number of dots. We use polygon which is based on coordinates specified within the device we use, but you can use any other entity. You may mark your assets and any other entities with a polygon option. Learn how to add a polygon on the Map widget, by reading here.

  • Enter edit widget mode and open “Add action” window;
  • Select “On polygon click” action source;
  • Input a name for the action. Optionally, select an icon;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type. Click “Save”, and then click “Apply” to save the widget settings.
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

To execute an action click anywhere inside the polygon.

Tooltip tag action

You can configure the map widget settings so that when you click on a marker, a tooltip appears. The tooltip can contain a link that will execute the configured action. Please note, in this manual explains only the basic usage of the tooltip tag action source. It is possible to configure several links for various devices/assets that return different values. Use the tooltip function in the advanced mode of the map widget to accomplish this.

  • Enter edit widget mode and open “Add action” window;
  • Select “Tooltip tag action” action source;
  • Input a name for the action. Optionally, select an icon;
  • Select a “Navigate to new dashboard state” action type from the “Action” drop-down menu;
  • After choosing an action type, the “Target dashboard state” drop-down menu appears. Select a previously created state you’d like to be transitioned to;
  • When the desired state has been selected, click the “Add” button at the bottom of the “Add action” window;
  • Now in the “Actions” window, you can see the configured action, so you can double-check the action source, icon, and action type.
  • Now navigate to the “Appearance” tab of the widget;
  • Scroll down to the Tooltip configuration and toggle the “Show tooltip” checkbox;
  • In the Tooltip line find link-act name and input an ID of the action which is its name in a format:
<link-act name='TooltipTag'>Navigate to the ${entityName}</link-act>

where TooltipTag is an action name and Navigate to the Building A is the text that will be shown as a link on a tooltip.

  • Click “Apply” to save the widget settings;
  • Save the dashboard by clicking “Save” in the upper right corner of the dashboard page.

Click on the marker on the map to display the tooltip. To perform the action, click on the link text at the bottom of the tooltip.

Still stuck? Contact

How can we help?

Access the CapitalAI Library

Enter your details below to view and download all of the content from our library.

PDF Download Form
This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.