Calling Detail dashboard from Table custom column with filter

• By using this document user will learn how to redirect to the detailed dashboard using the table custom column filter.

Objective

• Calling to a dashboard, using created table custom column filter

Use Case

• This script helps to call the detailed dashboard from the table widget custom column. By clicking on the custom column, the detailed dashboard will be displayed with the value of the column clicked and filter values of the summary Dashboard.

Prerequisite

• Here we are taking a sample sales dataset and using the table widget to create a custom column. This will be called a summary dashboard. In the second dashboard which is a detailed dashboard, we will create a pie chart and table to show filtered data.

• Download dashboard.zip file from link given dashboard.zip.

• After downloading the zip file, open dashboard_usecase folder inside it & upload sales.ds into Master data —> Dataset Section of the AIV. To add it into AIV follow this Link.

1. Create a new dashboard by clicking on the (+) icon and giving the name Summary of the dashboard.

2. The Edit menu box appears as you click on the Table Widget icon. And a widget gets added in content place automatically in the dashboard.

3. Enter the Following details in General Property.

• Dataset: sales.ds
• Select country code column from the list of columns.

4. Fill above details as shown in the figure below.

5. Click on Publish button.

6. Now go to the Filter Icon (from the top right corner of the dashboard).

7. Create three filters and give the named country, year & product line as shown in the figure below:

8. Click on the setting icon of the country filter and fill the details in filter Widget:

• Source: Dataset
• Dataset: Sales. ds
• Column Name: country
• Select Set Default when clear

9. Fill above details, As shown in the figure below:

10. Click on Link Filter and Widgets Option and enter the details as below:

• Layer: Layer1
• Tabs: Tab 1
• Widget: Table Widget 1
• **Select the country in Available Columns

11. Fill above details, As shown in the figure below:

12. Click on the setting icon of the year filter and fill the details in filter Widget:

• Source: Dataset
• Dataset: Sales. ds
• Column Name: year
• Select Set Default when clear

13. Fill above details, As shown in the figure below:

14. Click on Link Filter and Widgets Option and enter the details as below:

• Layer: Layer1
• Tabs: Tab 1
• Widget: Table Widget 1
• Select the Year in Available Columns

15. Fill above details, As shown in the figure below:

16. Now click on the setting icon of the product line filter.

17. Enter the following details in the Filter widget.

• Source: Dataset
• Dataset: sales.ds
• Column Name: product line

18. Click on the Link filter and widget option.

19. Enter the following details in the Filter widget.

• Layer: Layer1
• Tab: Tab1
• Widget: Table widget
• Select the Productline in Available Columns

20. Click on Filter view property and click on the + icon of the country, year & productline to view the filter in the dashboard.

21. Click on Save and Exit button.

22. Adjust the above widgets, as shown in the figure below:

23. Create a New Dashboard and give the name Detailed dashboard.

24. The Edit menu box appears as you click on the Pie chart of the chart widget icon. And a widget gets added in the content place of the dashboard.

25. Enter the Following details in Chart Property.

• Dataset: sales.ds
• Category Axis: country
• Value Column: Order Number
• Aggregation: Sum

26. Fill above details as shown in the figure below:

27. Click on Publish button.

28. Add one table widget in the Detail dashboard.

29. The Edit menu box appears as you click on the Table Widget icon. And a widget gets added in the content place the dashboard.

30. Enter the Following details in General Property.

• Dataset: sales.ds
• Select all the fields in Dataset Columns.

31. Fill above details as shown in the figure below:

32. Click on Publish button.

33. Add Three filter country, productline, year in the dashboard, As shown in the figure below:

34. Click on the setting icon of the country filter.

35. Enter the following details in Filter Widgets.

• Source: Dataset
• Dataset: sales.ds
• Column Name: country

36. Fill above details, As shown in the figure below:

37. Click on the Link filter and widget option.

38. Enter the following details in the Filter widget.

• Layer: Layer1
• Tab: Tab1
• Widget: Chart Widget, Table widget
• Link country column in both widgets

39. Click on the setting icon of the productline filter.

40. Enter the following details in the Filter widget.

• Source: Dataset
• Dataset: sales
• Column Name: productline

41. Click on the Link filter and widget option.

42. Enter the following details in the Filter widget.

• Layer: Layer1
• Tab: Tab1
• Widget: Chart Widget, Table widget
• Link productline column in both widgets

43. Click on the setting icon of the year filter.

44. Enter the following details in the Filter widget.

• Source: Dataset
• Dataset: sales
• Column Name: year

45. Click on the Link filter and widget option.

46. Enter the following details in the Filter widget.

• Layer: Layer1
• Tab: Tab1
• Widget: Chart Widget, Table widget

47. Link year column in both widgets & Both widgets link with year column.

48. Click on Filter view property and click on the + icon of the country, productline, and year.

49. Click on Save and Exit.

50. Adjust widgets as shown in the figure below:

51. Click on the embed icon (From the Top-Right Corner of the Dashboard) of the detailed dashboard then Click on Generate button to Generate code and copy the external embed link.

52. And now Embed URL of detail dashboard will be as below:

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

53. Now just add filter name in the product line and year filter in <<>> and pass column name country in {{}} the link will be as below,

https://training.aivhub.com:8443/aiv/embed/external/4b5a78366d25324271626b53336950377445634e46796f4475342532426438466453556b3850796e724d6545664545253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__true/productline___<<ProductLine>>&year___<<year>>&country___{{country}}

54. Paste this link after detail: script so whole custom column script will change &a_af__false to &a_af__true

55. Now, go to the summary Dashboard.

56. To add a custom column, go to the edit table widget and click on the custom column option from the bottom icon, as shown in the figure below:

57. From the custom column window, click on Add New Button to add a new custom column.

58. Enter the following Details in Custom Column.

• Name: country
• All column: country

59. Click on the expression icon to provide a hyperlink to the Detail dashboard, as shown in the figure below:

60. Enter the following details in it.

• Type: Select Hyperlink from Dropdown list
• In Custom column code Layout write code below:

<a  href="javascript:void(0)" onclick='var tab = new CustomEvent("aiv-redirect-aiv", { "detail": "https://training.aivhub.com:8443/aiv/embed/external/4b5a78366d25324271626b53336950377445634e46796f4475342532426438466453556b3850796e724d6545664545253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__true/productline___<<productline>>&year___<<year>>&country___{{country}}"});
window.dispatchEvent(tab);'>{{country}}</a>

Code Explanation:

61. inside the ancle tab, we have used event type onclick, function written inside onclick will be triggered when the user clicks on this custom column.

new CustomEvent("aiv-redirect-aiv", { "detail": "https://aivhub.com/{{month}}/<<FilterName>>" });

62. Above code is used to trigger events having a Detail dashboard embed link.

63. In the above link after “Detail”: the Detail Dashboard embed link should be pasted. In this link, if you want to pass column value clicked then use {{}} and write down the name of column value you want to pass on click.

64. Moreover, if there are filters in the summary dashboard and the user wants to pass filter values along with column value then <<>> is used and inside this filter, the name should be written. [Filter name is Case sensitive].

65. Fill above details, as shown in the figure below:

66. Click on the save button to save the script and click on add button to add a column in the table widget.

67. New custom column will be added to the table widget as below,

68. Click on Publish button button.

69. Go to preview mode and apply filters.

70. In-country filter select the USA, the Year 2016, productline select Ships and click on the filter button, so it will filter these values as shown in the figure below:

71. Click on Country name the USA and it will redirect you to Detail dashboard whose link we have applied in the hyperlink in the custom column, as shown in the figure below:

---

Sure, let’s walk through each step of the process:

1. Create Summary Dashboard

1. Create New Dashboard:

   • Click on the (+) icon and name the dashboard “Summary”.

2. Add Table Widget:

   • Click on the Table Widget icon in the Edit menu.
   • The widget will automatically be added to the dashboard.

3. General Properties for Table Widget:

   • Dataset: sales.ds
   • Column: country

4. Publish the Dashboard:

   • Click on the “Publish” button.

5. Add Filters:

   • Click on the Filter icon (top right corner of the dashboard).
   • Create three filters: country, year, and product line.

6. Configure Country Filter:

   • Click on the settings icon of the country filter.
   • Source: Dataset
   • Dataset: sales.ds
   • Column Name: country
   • Select “Set Default when clear”.

7. Link Country Filter to Widgets:

   • Layer: Layer1
   • Tab: Tab 1
   • Widget: Table Widget 1
   • Select the country in Available Columns.

8. Configure Year Filter:

   • Repeat the same steps as above for the year filter.
   • Source: Dataset
   • Dataset: sales.ds
   • Column Name: year
   • Select “Set Default when clear”.

9. Link Year Filter to Widgets:

   • Layer: Layer1
   • Tab: Tab 1
   • Widget: Table Widget 1
   • Select the year in Available Columns.

10. Configure Product Line Filter:

    • Repeat the same steps as above for the product line filter.
    • Source: Dataset
    • Dataset: sales.ds
    • Column Name: product line.

11. Link Product Line Filter to Widgets:

    • Layer: Layer1
    • Tab: Tab 1
    • Widget: Table Widget 1
    • Select the product line in Available Columns.

12. Save and Exit:

    • Click on “Save and Exit”.
    • Adjust widgets as shown in the figure.

2. Create Detailed Dashboard

1. Create New Dashboard:

   • Click on the (+) icon and name the dashboard “Detailed”.

2. Add Pie Chart Widget:

   • Click on the Pie chart widget icon in the Edit menu.
   • The widget will automatically be added to the dashboard.

3. Chart Properties for Pie Chart:

   • Dataset: sales.ds
   • Category Axis: country
   • Value Column: Order Number
   • Aggregation: Sum.

4. Publish the Dashboard:

   • Click on the “Publish” button.

5. Add Table Widget:

   • Click on the Table Widget icon in the Edit menu.
   • The widget will automatically be added to the dashboard.

6. General Properties for Table Widget:

   • Dataset: sales.ds
   • Select all fields in Dataset Columns.

7. Publish the Dashboard:

   • Click on the “Publish” button.

8. Add Filters:

   • Add three filters: country, year, and product line.

9. Configure Country Filter:

   • Click on the settings icon of the country filter.
   • Source: Dataset
   • Dataset: sales.ds
   • Column Name: country.

10. Link Country Filter to Widgets:

    • Layer: Layer1
    • Tab: Tab1
    • Widget: Chart Widget, Table Widget
    • Link the country column in both widgets.

11. Configure Product Line Filter:

    • Repeat the same steps as above for the product line filter.
    • Source: Dataset
    • Dataset: sales.ds
    • Column Name: product line.

12. Link Product Line Filter to Widgets:

    • Layer: Layer1
    • Tab: Tab1
    • Widget: Chart Widget, Table Widget
    • Link the product line column in both widgets.

13. Configure Year Filter:

    • Repeat the same steps as above for the year filter.
    • Source: Dataset
    • Dataset: sales.ds
    • Column Name: year.

14. Link Year Filter to Widgets:

    • Layer: Layer1
    • Tab: Tab1
    • Widget: Chart Widget, Table Widget
    • Link the year column in both widgets.

15. Save and Exit:

    • Click on “Save and Exit”.
    • Adjust widgets as shown in the figure.

3. Embed Detailed Dashboard Link

1. Generate Embed Code:

   • Click on the embed icon (top-right corner of the dashboard).
   • Click on “Generate” to create the code.
   • Copy the external embed link.

2. Modify Embed URL:

   • Add filter names in the product line and year filter using <<>>.
   • Pass column name country using {{}}.
   • Example link:

     https://training.aivhub.com:8443/aiv/embed/external/4b5a78366d25324271626b53336950377445634e46796f4475342532426438466453556b3850796e724d6545664545253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__true/productline___<<productline>>&year___<<year>>&country___{{country}}

3. Add Custom Column in Summary Dashboard:

   • Go to the Summary Dashboard.
   • Edit the table widget.
   • Click on the custom column option from the bottom icon.

4. Add New Custom Column:

   • Click on “Add New” to add a new custom column.
   • Name: country
   • All column: country

5. Add Hyperlink to Custom Column:

   • Click on the expression icon.
   • Type: Select “Hyperlink” from the dropdown list.
   • Custom column code layout:

     <a href="javascript:void(0)" onclick='var tab = new CustomEvent("aiv-redirect-aiv", { "detail": "https://training.aivhub.com:8443/aiv/embed/external/4b5a78366d25324271626b53336950377445634e46796f4475342532426438466453556b3850796e724d6545664545253344/a_u__Reema1&a_p__&a_t__&a_d__Default&a_ex__&a_af__true/productline___<<productline>>&year___<<year>>&country___{{country}}"});
     window.dispatchEvent(tab);'>{{country}}</a>

6. Save and Add Custom Column:

   • Click on the “Save” button.
   • Click on “Add” to add the column to the table widget.

7. Publish the Dashboard:

   • Click on the “Publish” button.

4. Testing and Validation

1. Go to Preview Mode:

   • Apply filters (e.g., country: USA, year: 2016, product line: Ships).
   • Click on the filter button.

2. Validate Redirection:

   • Click on the country name (e.g., USA) in the custom column.
   • It should redirect you to the Detailed Dashboard as specified in the hyperlink.

This guide provides detailed steps to create and link dashboards using custom columns with filters, ensuring a smooth navigation and data visualization experience.

Common features:

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