Skip to content
AIV

Event Tab Table Widget

Overview

The Event tab enhances dashboard interactivity by enabling users to implement custom actions such as switching tabs or layers when interacting with widgets, and applying filters based on chart selections. This functionality allows for seamless navigation and dynamic filtering within the dashboard. To utilize these features effectively, users need to insert the appropriate code and specify filter names from the widgets, ensuring smooth and responsive client-side interactions.

Table Event:

This video contains how can user create an event for table in AIV.

Here's how you can add an event to a table widget:

How to Add an Event on a Table Widget image: Table Edit:

Open the table edit dialog box and navigate to the Event tab. You can refer to the provided image for guidance on where to find this tab. image: Code Syntax:

In the Event tab code panel, you’ll see the syntax provided for adding custom events. Refer to the image below for an example. image: Add Example Code:

To implement events, you need to insert the following example code into the Event tab:

// Create an Event to Change the Tab on Value Selection
var tab = new CustomEvent("aiv-change-tab", {    
    "detail": 1 
}); 
window.parent.dispatchEvent(tab);

// Extend the Event to Filter Data Based on the Event
var item = event; 
setTimeout(function(){ 
    var filter = new CustomEvent("aiv-filter-call", {    
        "detail": {"filterName": item}  
    });  
    window.parent.dispatchEvent(filter); 
});

Explanation:

Change Tab Event: The first snippet of code creates an event named aiv-change-tab, which will change the tab view when triggered. The “detail”: 1 specifies the tab to switch to (where 1 represents the tab index).

Filter Data Event: The second snippet extends the event by applying a filter to the data based on the value selected. It waits briefly and then dispatches a aiv-filter-call event, using the selected item to filter the data.

Make sure to customize the filterName and tab index according to your specific requirements. This setup will enhance the interactivity of your table widget by enabling dynamic tab switching and data filtering.

Steps to add the event and utilize on table widget

  1. Prepare one table widget as shown in the figure below:

Image

  1. Add the tab2 and create one column bar chart as shown in the figure below:

Image

  1. Add one text filter on tab 2 to filter the country from the column chart widget. as shown in the figure below:

Image

  1. Now edit the table widget from the tab1 and add the event in it.

  2. Add the below code in event tab code panel:

    var tab = new CustomEvent("aiv-change-tab", { "detail": 1 });window.dispatchEvent(tab);

var filter = new CustomEvent("aiv-filter-call", { "detail": {"COUNTRY": '{{country}}' }});window.dispatchEvent(filter);

  3. Save the dashboard and go to Preview of dashboard.

  4. To utilize the event, click on the country USA from tab1.

Image

  1. This event will redirect us from tab1 to tab2. as shown in the figure below:

Image

  1. By this you can add & apply the event on table widget.

The Event on the AIVHUB application cnotains two type of codes where user can add into event, the event code as follows:

Create Table
Advance Tab
Formatting Tab
Theme Tab
Table Widget Annotation
Table Widget Setting

✒️ To know more about advance feature of Table Widget click on below links:-

Custom Column Table Hyperlink
Custom Column Table Widget Icon
Custom Column MicroChart
Custom Column Table Widget
Skip Widget Event Filtering