Calling Detail Dashboard with Event Tab

This document provides guidance on how to redirect to a detailed dashboard using a created event.

Objective

Redirect to a dashboard using a created event.

Use Case

There is a Group table widget in the summary dashboard, and users want to open the detailed dashboard by clicking on grouped values. The clicked value should be passed to the detailed dashboard to filter it. Additionally, the filter values from the summary dashboard should also be passed to filter the detailed dashboard.

The detailed dashboard, which is accessed through a click event from the summary dashboard, should have product line and country filters. This is necessary to filter the detailed dashboard by clicking on a specific product line in the summary dashboard, which also contains a country filter.

Prerequisites

For this example, we are using the sales.ds dataset file.

Download the dashboard.zip file from the following link: dashboard.zip.
After downloading the zip file, open the dashboard_usecase folder inside it and upload sales.ds into the Master Data —> Dataset Section of AIV. To add it to AIV, follow this link.

Steps to create dashboard, filter & event

Summary Dashboard Setup

Create Summary Dashboard:
- Create a new dashboard and name it “Summary”.
- Click on the Table Widget icon to add a table widget automatically.
Configure Table Widget:
- Dataset: sales.ds
- Select all the fields in Dataset Columns.
- Go to the advance tab and drag and drop the Country and Product line columns in a row.
- Click on Publish to save changes.
Create and Configure Filter:
- Go to the Filter Icon (top right corner).
- Create a filter named “country”.
- In the filter widget settings:
  - Source: Dataset
  - Dataset: sales.ds
  - Column Name: country
  - Select Set Default when clear
- Link Filter and Widgets:
  - Layer: Layer1
  - Tabs: Tab 1
  - Widget: Table Widget 1
  - Select the country in Available Columns.
- Click on Filter view property and click the + icon of the country to view the filter in the dashboard.
- Click on Save and Exit.

Detailed Dashboard Setup

Create Detailed Dashboard:
- Create a new dashboard and name it “Detailed”.
- Click on the Pie Chart icon to add a pie chart widget automatically.
Configure Pie Chart Widget:
- Dataset: sales.ds
- Category Axis: country
- Value Column: Order Number
- Aggregation: Sum
- Click on Publish.
Add Table Widget:
- Click on the Table Widget icon to add a table widget automatically.
- Dataset: sales.ds
- Select all the fields in Dataset Columns.
- Click on Publish.
Add Filters:
- Add “country” and “product line” filters to the dashboard.
- Configure country filter:
  - Source: Dataset
  - Dataset: sales
  - Column Name: country
  - Link filter and widgets:
    - Layer: Layer1
    - Tab: Tab1
    - Widget: Chart Widget & Table widget
    - Link with the country column.
- Configure product line filter:
  - Source: Dataset
  - Dataset: sales
  - Column Name: product line
  - Link filter and widgets:
    - Layer: Layer1
    - Tab: Tab1
    - Widget: Chart Widget, Table widget
    - Link with the product line column.
- Click on Filter view property and click the + icon of the country & product line.
- Click on Save and Exit.

Embed Detailed Dashboard

Generate Embed Link:

Click on the embed icon (top right corner of the detailed dashboard).

Click on Generate to get the external embed link and copy it.

https://training.aivhub.com:8443/aiv/embed/external/4b5a78366d25324271626b53336950377445634e46796f494253686c46735961337a3479685a48675847455067253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__false/country___&productline___

Modify the URL to pass the country and product line filter values dynamically.

"https://training.aivhub.com:8443/aiv/embed/external/4b636856426b4d72446c6b467152794b564f6c4837736d56304c4b4f6f37795725324674796a6b597331725849253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__true/country___"+country+"&productline___"+productline

Add Click Event in Summary Dashboard

Edit Table Widget and Add Event:

Go to the summary dashboard.
Edit the Table widget and go to the event section.

Write the following script:

Inside this window. Open () command, paste detail dashboard embed link code.
Make &a_af__false to &a_af__true

var tab = new CustomEvent("aiv-get-Filter",{ "detail": ""});  
window.parent.dispatchEvent(tab);  
setTimeout(function(){ 
    console.log(event); 
    var filters = JSON.parse(sessionStorage.getItem('aivFilters')); 
    console.log(filters[0].modelName); 
    var country = filters[0].modelName; 
    var productline = event.event.key; 
    window.open(
        "https://training.aivhub.com:8443/aiv/embed/external/4b636856426b4d72446c6b467152794b564f6c4837736d56304c4b4f6f37795725324674796a6b597331725849253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__true/country___"+country+"&productline___"+productline
    );
}, 1000);

Script Description:
- The first two lines call the get filter data event.
- Line 4 prints the filter value in parsed JSON format.
- Line 5 stores the filter value details in a variable.
- Line 6 grabs the country filter value.
- Line 7 gets the clicked product line value to pass in the embed link of the detailed dashboard.
Publish Changes:
- Click on Publish to save changes.
Test the Setup:
- Go to the preview mode and apply the country filter on the table.
- Expand the country group to see the product line list.
- Click on any product line (e.g., Trains). This will open the detailed dashboard in a new tab, filtered by the product line and country.

Common features:

Audit
Clone
Copy
Move
Upload
Delete
Share
Version
Download
Property
Save as quicklink