After you initialize the
In this section
After you add a
<tableau-authoring-viz> component in your HTML page, you need to use the
document.getElementById() method if you want to access the
document.querySelector() method is faster and returns the first element that matches the specified selector, in this case the
const viz = document.querySelector("tableau-viz");
If your web page has multiple embedded views, use
document.getElementById(). If you use
document.getElementById(), it’s important that you set the
id for the web component so that you can access the component later for further interaction. Without the
viz object you can’t perform additional actions.
For example, to change the filters applied to a view (identified with the
tableauViz), you might use the following code snippet.
const viz = document.getElementById('tableauViz');
After you have the
viz object, you can begin to interact with the view. Using the Embedding API, you can query for elements and data in the view, or apply or remove filters, get summary or underlying data from worksheets, or add take action based upon users actions with the view.
For example, if you have the
viz object, you can get the currently active sheet in the workbook. Using the sheet object, you can apply filters.
let sheet = viz.workbook.activeSheet; sheet.applyFilterAsync("Container", "Boxes", FilterUpdateType.Replace);
Note: In the example, the view will not be interactive immediately after you initialize the
viz object. If you plan on filtering or doing some interaction immediately after initialization, you should use the
TableauEventType.FirstInteractive) event listener to wait for the
viz object to be ready. For more information about using events, see Add Event Listeners.