Join us for Release Readiness Live this week! Product experts and developer advocates will discuss and demo new features in the Summer ’23 release, and at the end of our broadcast, we’ll be taking your questions. Tune in at 9 a.m. PT on May 19 for the developer session. Unable to join us live? The recording will be posted a few hours after the broadcast has ended.
Introduction
Tableau is releasing a lot of exciting new innovations for developers in Summer ’23, including the Tableau Embedding Playground, a Postman collection for the Tableau REST API, and a new way of customizing and personalizing embedded views based on user attributes for embedded applications.
Get started with embedded analytics
If you know Tableau, then you know it can create powerful visualizations (vizzes, for short) that help people see and understand their data. If you are building a web application, you might want to add relevant Tableau vizzes to your application to enhance the information you offer your customers.
Tableau makes it easy to embed vizzes by providing a Copy Embed Code button, which is available when you click the Share button in the Tableau toolbar. You can use that code to embed a Tableau viz into a web page.
The code you get from the Copy Embed Code button is just a starting point. What if you want to filter the viz based on who is viewing the page? To create a rich embedded analytics experience for your users, you need to use the Tableau Embedding API v3. Using the Embedding API, you can apply filtering, set parameters, gather data that you use to drive other actions, or add custom interfaces for interacting with the viz.
OK, so you’d like to see what’s possible. But if you are not familiar with the Embedding API, this might mean learning a new JavaScript library, wading through pages of API reference material and other documentation, and then setting up a development environment — just to check a few things out. Now, there’s an easier way.
Welcome to the Playground
The Tableau Embedding Playground makes it easy for you to learn and explore embedded analytics and the Tableau Embedding API. All you have to do is provide the URL of the Tableau view you want to embed, customize the display, add the interactions you want to try, and then click Run.
Note: This Early Access release of the Embedding Playground makes use of a sample workbook. The code snippets that add interactions to the embedded viz are optimized to work with this sample. The names of worksheets and variables have been filled in. You can use the Code Editor to edit the JavaScript code. For this release, the HTML pane is read-only, so that you can completely focus on customizing and adding interactivity to the viz in the Playground, without having to worry about styling and CSS.
The Embedding Playground has three main sections:
- The Preview pane, where you can see the embedded viz and the results of your code changes when you click Run
- The Code view, where you can see the JavaScript and HTML code that embeds the Tableau viz
- The left-hand control panel, where you configure the URL for the embedded view and its display properties, such as size and toolbar position, and where you can also add interactions, which come in the form of code snippets you drag and drop into the JavaScript pane.
Customize the code
The Embedding Playground uses the Tableau Embedding API v3 to embed the viz in the Preview pane. The Embedding API makes use of web components and provides an HTML element that represents the Tableau viz. You can place this web component (<tableau-viz>
) in your web page just as you would any HTML element, like a <div>
or <p>
tag. The HTML pane in the Code view shows this web component.
This HTML code and a link to the Embedding API library are all you need to place a Tableau viz on a web page. This is essentially what you get if you use the Copy Embed Code button in Tableau Cloud. But there is so much more you can do, and the Embedding Playground makes it easy.
Let’s say we want to apply a filter to the viz, so that it only shows information that is of interest to a specific set of users, or that it highlights a point you are trying to make (like showing certain places on a map, or particular sets of data).
With the <tableau-viz>
web component, we have access to the embedded Tableau view, or what we refer to as the Tableau viz object. If you are familiar with Tableau, you know that a Tableau workbook consists of worksheets, dashboards, and stories. Or more accurately, a workbook contains a bunch of sheets, some of which are worksheets, some are dashboards, and some are stories. From the viz object, we can access the workbook and all the worksheets and dashboards within the workbook. For each type of sheet, certain properties are available, and there are specific APIs (or methods) you can call.
Using the Embedding Playground, you don’t have to memorize all that. Let’s say your embedded view is a dashboard. If you want to apply a filter to the view, you just click Add Interactions, click Dashboard, click Filters, and then drag and drop the Apply Filter card into the JavaScript pane, just below the ***Insert your code below!*** comment.
In this Early Access release, the Apply Filter code snippet looks like the following, with the name of the filter and its values already filled in. When the Embedding Playground is released, the code snippets will have placeholders that you replace with the filter names and values for your viz. Note that the Code Editor is fully functioning, so you can modify the values (change or add different states). Give it a try. Click Run and view the results.
Come to the Playground to find out what’s new
The Tableau developers are busy working on new features to improve embedded analytics. As new methods and properties are introduced, they will first be announced in the Developer Program and will be highlighted in the Embedding Playground. If you are an experienced developer, the Embedding Playground could be a useful scratchpad for trying out new ideas and working with new APIs as they are introduced. Using the Playground, you can quickly try new and existing methods and verify your code without the overhead of spinning up a new project.
In future releases of the Embedding Playground, you will be able to provide the URLs for your own vizzes and use the Playground as a connected app, which offers a seamless and secure authentication experience built on trust relationships, and with embedded web authoring. In addition, we will be adding new code snippets to provide templates for interactions.
Use the Playground code to jump-start development
You can use the button menu bar to download or copy the code. The downloaded or copied code is contained in a single HTML file. This file contains both the HTML code that defines the <tableau-viz>
web component, and the JavaScript code you added when you added interactions. You can use this code as the starting point to develop your embedded applications. Or copy the code for your need for specific interactions, like filtering the viz, setting parameters, or adding custom context menus. To learn more about using the code for embedding, check out the Tableau Embedding API v3 docs.
Read enough already? Try the Tableau Embedding Playground now and stay tuned for more!
Tableau Postman collection (REST API)
If you have ever used the Tableau REST API, you know that it is an essential part of managing and administrating users and content on Tableau Cloud and Tableau Server. Using the Tableau REST API, you can programmatically do everything you can do using the user interface on Tableau Server and Tableau Cloud sites. The API uses the well-known protocol for client-server communications over HTTP, using standard web requests. You can query and configure resources, set permissions, and control access.
You probably also know that setting up a session to send those requests isn’t always easy. Connecting to the server, authenticating, and acquiring the access tokens to communicate with the Tableau Server or Tableau Cloud site can be, well, kind of involved. Particularly if you are just interested in quickly finding out the name of a data source or looking up a resource identifier. One of the tools people turn to build HTTP requests for REST endpoints is Postman, an app you can download or use in a browser that makes it easy to create requests and save those requests in collections. The good news is that now you don’t need to start from scratch.
The Tableau developers have created a Postman collection for the Tableau REST API that is available along with the other collections for Salesforce APIs on the Salesforce Developer’s Postman workspace. You no longer need to dig through the API documentation or resort to trial and error to construct your own requests. The Salesforce Developer’s Postman workspace has the complete set of Tableau REST API endpoints that you can browse through and choose the ones you need to use. Postman lets you define and save the variables you need for your connection. You can also use Postman to generate the requests in different programming languages like Python, JavaScript, and cURL, so you could incorporate the request in scripts or in your embedded applications.
You can find out more about the Tableau REST API and what the Postman collection can do for you in Stephen Price’s blog post, Use the Tableau REST API with Postman to Architect Integrations.
User attribute functions
Delivering tailored and personalized information is one of the top goals when you are embedding Tableau visualizations in web applications. You want to ensure that the users who use your application have the best possible experience and have access to the information that is not only relevant to their needs, but that it is also data that they are allowed to see.
To that end, Tableau has introduced two new user functions (USERATTRIBUTE
and USERATTRIBUTEINCLUDES
) that provide a new level of personalization and control when you are building embedded applications that use Tableau-connected apps for application integration. Starting with Tableau 2023.1, when you are authoring access to embedded content using connected apps, you can now pass user attributes in the JSON Web Token (JWT). To learn more, see: Control and Customize Data Access Using User Attributes.
You define what these user attributes are, and depending upon your organization, these could be attributes based on job roles, departments, management level, security clearance, group membership, and so on. These user attributes follow the attribute-based access control model (ABAC), which gives you flexibility in how you design your web applications. For example, you could create a single web portal that serves different groups by providing different views of that data based on attributes. To see how you can apply these attributes in Tableau workbooks, see User Functions: For embedding workflows in Cloud only. When you author views in Tableau, the user attributes give you the option of adding row-level security filters to the views you embed in web applications.
For an excellent overview of how you can put the attributes to use, see the blog post: Unlock the Power of Personalized Analytics with User Attribute Functions. And for some hands-on experience, check out the tutorial: User Attribute Functions Tutorial.
Conclusion
From first-time users to experienced developers, the Tableau Embedded Playground makes it easy for everyone to develop code for embedded analytics solutions. The Postman collection for the Tableau REST API can save you time and effort by encapsulating the complete set of Tableau REST endpoints in an easy-to-use interface, and adding user attributes to your embedded applications to provide a more personalized and secure experience for your users.
Join the Tableau Developer Program
Make Tableau work for you. Join the Tableau Developer Program and find out about the latest tools and features. Gain access to preview releases and early access to new APIs and libraries while they are still in development. Provide feedback, and help shape what is to come.
Learn MOAR
Our product managers and developer advocates are back to share the latest features and functionality coming in Summer ’23. To help you develop faster, there’s a wealth of new content from the Developer Relations team covering their favorite new features. Be sure to check out Release Readiness Live on Friday, May 19th at 9:00 a.m. PST, and read the latest on the Salesforce Developers blog for more developer-related innovations in the Summer ’23 release!
Dig into Trailhead trailmixes with key release highlights for developers or admins, or both! Follow and complete a Learn MOAR Summer ’23 trailmix for admins or developers to earn an exclusive community badge.
Further Resources
- Trailhead Module: Tableau Developer Platform (Est. time = 1 hour)
- Blog: Use the Tableau REST API with Postman to Architect Integrations
- Blog: Unlock the Power of Personalized Analytics with User Attribute Functions
- Postman collection for the Tableau REST API
Further Reading
- Release Highlights for Developers | Learn MOAR Summer ’23
- Platform Integration Updates for Developers| Learn MOAR Summer ’23
- MuleSoft Innovations for Developers | Learn MOAR Summer ’23
About the author
Dave Hagen works as a Technical Writer on the Salesforce Content Experience team. He writes documentation for Tableau’s developer platform and embedded analytics. You can find him on LinkedIn.