Embedding API Tutorial (AngularJS) - Part 1

<script type="module" src="https://embedding.tableauusercontent.com/tableau.embedding.3.1.0.min.js"></script>

There are a few options for what the src of the script tag can be, check out our documentation for more details.

import { NgModule } from '@angular/core';

Change it to

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

Within the @NgModule section, add a schema property and specify CUSTOM_ELEMENTS_SCHEMA as an item in its list.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

ng generate component tableau-embedded-viz

This will create a new directory under src/app/tableau-embedded-viz with a stylesheet, html template, & component typescript file. Lets start with tableau-embedded-viz.component.ts. The first line has some imports already, add another for Input

import { Component, OnInit, Input } from '@angular/core';

Within the export class, add 2 inputs for inheriting the divId and vizUrl from this component’s parent. This way, the component can be called from anywhere and passed in the URL for a Tableau dashboard.

export class TableauEmbeddedVizComponent implements OnInit {
  constructor() { }

  // Inherit attributes from the parent component
  @Input() dashboardIndex = 0;
  @Input() toolbar = 'hidden';
  @Input() vizUrl = '';

  // Dashboard properties
  public VizIndex = 'Tableau-Viz-' + this.dashboardIndex;

  ngOnInit(): void {
  }
}

Now we need to update tableau-embedded-viz.component.html to actually render the dashboard. There’s some placeholder HTML in here, so delete it all and then add the following:

<div class="tableau-wrapper">
    <div class="tableau-toolbar">
    </div>
    <div class="tableau-viz-container">
         <tableau-viz [id]="VizIndex" [src]="vizUrl"></tableau-viz>
    </div>
</div>

Really only the <tableau-viz> 
tag is needed to embed, but we’ll use this structure to add on more stuff later.

<div class=“content” role=“main”>

except for the footer and replace it with the following:

<app-tableau-embedded-viz divId="viz1" vizUrl="https://public.tableau.com/views/MeteoShowersRev1/Recap?:language=en-US&:display_count=n&:origin=viz_share_link"></app-tableau-embedded-viz>
<app-tableau-embedded-viz divId="viz2" vizUrl="https://public.tableau.com/views/Viz2educateLifeSpanofAnimals/Dashboard1?:language=en-US&:display_count=n&:origin=viz_share_link"></app-tableau-embedded-viz>

We picked some dashboards from Tableau Public, but really any dashboard URLs will work. Now we’re ready to test it out, so run the "ng serve —open" command and you should see two dashboards render within your web app.

// Handle dashboard resizing
public getScreenWidth: any;
public getScreenHeight: any;
private calculateDashboardSize = () => {
  const bufferSize = 25;
  this.getScreenWidth = window.innerWidth-bufferSize;
  this.getScreenHeight = (window.innerWidth-bufferSize)*3/4;
}
@HostListener('window:resize', ['$event'])
onWindowResize() {
  this.calculateDashboardSize();
}

You will also need to change line 1 from

import { Component, OnInit, Input } from '@angular/core';

to

import { Component, OnInit, Input, HostListener } from '@angular/core';

Since we want this to run when the component is loaded (and not just after the browser window resized), add this line within the ngOnInit() method:

this.calculateDashboardSize();

We need to tell the Tableau viz how much space it has, so edit the <tableau-viz> tag in tableau-embedded-viz.component.html to use our new methods.

<tableau-viz [id]="VizIndex" [src]="vizUrl" width="{{getScreenWidth}}" height="{{getScreenHeight}}" toolbar="{{toolbar}}"></tableau-viz>

public isFavorite = false;
public dashboardName = '';
public viewIsFavorite = "favorite_border"
public thisViz: any;

These properties can be referenced in the component’s HTML, but we also want to do something when users click on buttons in the toolbar. Let’s also add some code to handle these click events (within TableauEmbeddedVizComponent).

// Run after the component has been rendered
ngAfterViewInit() {

  // Define a function that can be run, on
  let viz = document.getElementById(this.VizIndex);
  if (viz) {
    // Add event handler to trigger once the viz is finished loading
    viz.addEventListener("firstinteractive", async (event) => {
      // Need to cast the HtmlElement to an object (for TypeScript)
      this.thisViz = <any>viz;
      // Update the name and attributes of this dashboard
      this.dashboardName = this.thisViz.workbook.activeSheet.name;
    });
   }
 }

// Method to update the icon, after a status change
private setFavoriteIcon = (isFavorite:boolean) => {
  this.isFavorite = isFavorite;
  this.viewIsFavorite = isFavorite ? "favorite" : "favorite_border"
}

// Method to determine if the current viz is a favorite
private getFavorite = (vizId:string) => {
  // Business logic goes here
}

// Method to update the dashboard's favorite status
public setFavorite = (isFavorite:boolean) =>{
  // Business logic goes here
}

// Method to reset the dashboard filters
public resetFilters = () => {
  // Use the Embeding API to revert all filter changes
  this.thisViz.revertAllAsync()
}

// Method to download the dashboard as a PDF
public downloadPdf = () => {
  // Business logic goes here
}

// Open a modal window with more details of the workbook
public openDialog = () => {
  // Business Logic goes here
}

// Close out of this page
public closeDashboard = () => {
  // Business Logic goes here
}

This code snippet does a few things. First, it waits until the component has been initialized and then adds an event handler to the Tableau viz with a callback function. This saves a reference to the Viz object, and uses that to extract some information (dashboard name). Second, some public and private methods are defined that will trigger some code to run when users interact with the toolbar. Notice the resetFilters method calls revertAllAsync, which is defined in the Tableau Embedding API.Now let’s add that toolbar to tableau-embedded-viz.component.html. Insert the below HTML code within the tableau-toolbar div container, we’ll use this to show a toolbar with some buttons and labels.

<mat-toolbar>
   <img class="tableau-icon" src="./../../assets/tableau-icon.png" />
   <span>{{dashboardName}}</span>
   <span class="example-spacer"></span>
   <button mat-icon-button class="example-icon favorite-icon" aria-label="Example icon-button with heart icon" (click)="setFavorite(isFavorite)">
       <mat-icon>{{viewIsFavorite}}</mat-icon>
   </button>
   <button mat-icon-button class="example-icon" aria-label="Reset the dashboard" (click)="resetFilters()">
       <mat-icon>undo</mat-icon>
   </button>
   <button mat-icon-button class="example-icon" aria-label="Download PDF" (click)="downloadPdf()">
       <mat-icon>cloud_download</mat-icon>
   </button>
   <button mat-icon-button class="example-icon" aria-label="Information about the dashboard" (click)="openDialog()">
       <mat-icon>info</mat-icon>
   </button>
   <button mat-icon-button class="example-icon" aria-label="Back button" (click)="closeDashboard()">
       <mat-icon>cancel</mat-icon>
   </button>
</mat-toolbar>

This makes a reference to tableau-icon.png, which you can download from here and then copy to tableau-embed-angular/src/assets/tableau-icon.png.Next, let’s add some CSS to tableau-embedded-viz.component.css to make things look better:

.example-spacer {
  flex: 1 1 auto;
}

img.tableau-icon {
  height: 2em;
  padding-right: 1em;
}

/* Tableau Dashboard object, as returned by REST API */
export interface TableauDashboard {
    id:string,
    name:string,preview: string,
    viewUrlName: string,
    createdAt: Date,
    updatedAt: Date,
    isFavorite: boolean,
    usage: {
      totalViewCount: number
    },
    owner: {
     id: string,
     email: string,
     fullName: string
    },
    workbook: {
     id: string,
     name: string,
     description: string,
     contentUrl: string
    }
}

In order for our TableauEmbedVizComponent to use this, we just need an import that references it. We will also need to import dialog box components from Angular Material. At the top of tableau-embedded-viz.component.ts, add the following imports:

import { Inject } from '@angular/core';
import { MatDialog, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { TableauDashboard } from '../common/models/tableau-dashboard';

Now in our openDialog method, we can create a new TableauDashboard object. Eventually we’ll get the data from a REST API call, but we can at least create a placeholder object.

// Open a modal window with more details of the workbook
  openDialog() {
    // Create a placeholder dashboard object
    const dash = {
     updatedAt: new Date(),
     workbook : {
       id: '',
       contentUrl: '',
       name: 'Some Workbook',
       description: 'some description'
    },
    owner: {
      id: '',
      email: '',
      fullName: 'Me'
    }
  } as TableauDashboard;
}

We also need another component for the popup itself. We could use the ng generate component command, but since this is a simple popup we can just add the component code to the bottom of this file (outside of the TableauEmbeddedVizComponent class).

// Declare the component for providing more details via a modal window
@Component({
  selector: 'app-tableau-embedded-viz-details',
  templateUrl: 'tableau-embedded-viz-details.component.html',
})
export class TableauEmbeddedVizComponentDialog {
  constructor(@Inject(MAT_DIALOG_DATA) public data: TableauDashboard) {}
}

Now that our component is defined, we can tell TableauEmbeddedVizComponent how to pop it up. First find the constructor within this class, and replace the empty constructor method with this:

constructor(public dialog: MatDialog){}

Then in the openDialog method, add the below code to popup the modal window.

// Open the popup
this.dialog.open(TableauEmbeddedVizComponentDialog, {
   minWidth: 350,
   data: dash
});

This makes a reference to tableau-embedded-viz-details.component.html so create a new file with that name and copy/paste the code below.

<h2 mat-dialog-title>{{data.workbook.name}}</h2>
<mat-dialog-content class="mat-typography">
  <p>Created by {{data.owner.fullName}} ({{data.updatedAt}}) </p>
  <h3 style="text-decoration: underline;">Description</h3>
  <p>{{data.workbook.description}}</p>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Close</button>
</mat-dialog-actions>

One side affect of manually creating the component, is that our Angular app doesn’t know about it yet. Open src/app/app.module.ts and you’ll see a reference to TableauEmbeddedVizComponent as an import and in @NgModule.declarations. We’ll need to manually add our new component to these places as well.

import { TableauEmbeddedVizComponentDialog } from './tableau-embedded-viz/tableau-embedded-viz.component';

declarations: [AppComponent,TableauEmbeddedVizComponent,TableauEmbeddedVizComponentDialog],

Error: src/app/app.module.ts:22:5 - error NG6001: The class 'TableauEmbeddedVizComponentDialog' is listed in the declarations of the NgModule 'AppModule', but is not a directive, a component, or a pipe. Either remove it from the NgModule's declarations, or add an appropriate Angular decorator.

You just have to stop the ng serve process and start it back up again to get past this.

console.log(`dashboard size: ${JSON.stringify(this.thisViz.workbook.activeSheet.size)}`)

This will print a JSON object describing the layout specified in the Tableau dashboard.