2 Replies Latest reply on Feb 12, 2018 1:47 AM by Joanna Vass

    Embedding dashboards in Angular application - linking problem

    Joanna Vass

      We’re working on embedding a set of Tableau dashboards in an Angular application.

      We've built a component that dynamically loads different reports based on the url, we can also add query parameters and apply filters to a report.

      E.g. example.com/reports/{workbook}/{worksheet} // Loads a report

      E.g. example.com/reports/{workbook}/{worksheet}?filter={filtername}&filterValue={filterVal} // Loads a report with filters


      So when we navigate to a new page within our angular application it loads the report we want, without refreshing the page.


      What we want to do is to click a link within an embedded tableau report & use the Angular router.


      We've tried the following approaches:


      1. We've used dashboard actions on the tooltip menus to link to the URL of another dashboard with a filter query. This works correctly and opens the link in the parent window. The drawback is that it reloads the whole page and bootstraps the application again — making the transition between the dashboards quite slow and jarring.
      2. We've added custom fields to the tooltip and we use the 'selectMarksAsync' method to retrieve the field values.  With these fields we construct a link and let the Angular router navigate to the report. With this approach the transition between the dashboards is smooth.Unfortunately this involves hacking the Tableau workbooks to display the necessary field names and we’re not able to use Tableau’s tooltip menu URL actions as the navigation method.


      Is there a way to use Tableau’s tooltip menu URL actions and have the link open without reloading the entire Angular application or an event we can listen to once a link in the tooltip is clicked?