How to Embed and Edit Formatted Commentary in Tableau

A very common use case of Tableau is to alleviate the burden brought by PowerPoint “decks” which compile high level business results and status reports into a single presentation document that is updated, distributed, and discussed within the business on a regular cadence.  

Tableau is fantastic for automating the analytics pipeline in these reports by pulling in relevant data and creating impactful visualizations without the need to manually update the data and charts every quarter, week, or month.  Where Tableau can fall short, however, is in its ability to allow users to edit and update non-data content in the dashboard itself the way that a PPT or a Google Slides presentation naturally does.

Tableau does have a commentary feature in Tableau Server, but it is more suited to task-oriented collaboration purposes. Those comments are not part of the actual content of the dashboard, so they are not as useful for the purpose we’re aiming at here.

Our goal is to create a solution in Tableau that allows the company to run their monthly or weekly call from the published Tableau dashboard directly on the server, with notes and commentary from department leaders shown inline, and with those same leaders able to update their commentary for their slides at any time before the meeting while looking at the most recent data.

Alternative Solutions

Normally this is a difficult problem to solve effectively and elegantly.  Some solutions we won’t explore here are:

  • Give certain users access to web edit in Tableau server, and let them update text objects in the dashboard
    • The problem with this approach is that if the user is not as familiar with Tableau as they are with PointPoint, there is a non-zero chance that they may accidentally change the design or layout of report elements outside of just the commentary, which would then need to be reverted or corrected by a Tableau developer.  Those users would also need creator licenses, which could increase costs.
  • Make blank space on each dashboard tab for the commentary, and add it outside Tableau after the slides are exported to PowerPoint or another application
    • The downside here is that your data would need to be finalized well in advance of the export and distribution for adding that commentary, and then you can’t just run the call from the published Tableau dashboard on the server – which is what we want to achieve.
  • Make the commentary text an actual data source.  Create some means of pulling the text from a file into an extract in Tableau, and then display it as text in a mark.
    • While this is a step in the right direction, it limits our ability to format the text commentary for readability and emphasis.  Font sizes, bullet points, etc., are unavailable here.

How to Embed User-Editable Commentary in Tableau using Google Docs

This is the method we will explore in this blog. It involves:

  • Embedding a Google Doc in our Tableau dashboard as a web page object with the URL pointing to a parameter
  • Using parameter actions to dynamically change the URL based on the rest of the dashboard contents
  • Using a parameter action to toggle between preview and edit mode in the Google Doc URL so users with access can edit the comments within the dashboard itself.

This works best for companies using Google Workplace because it removes the need for users to login with their credentials within the dashboard itself since the same credentials will carry over from Tableau Server.  But as long as the use of Google Docs is permitted in your work environment this remains an option worth considering. The advantages of this method are that it allows for fine-grained access controls on who can view and edit the commentary, and it allows you to keep track of changes over time through version history in the Google Doc.

Step 1: Define the format of the Embedded Google Doc

First, we must use parameter actions to update the URL of the embedded Google Doc. Simply changing a parameter value directly or using a filter won’t work because a parameter action is needed to get the web page object to refresh with the new URL value. Parameter buttons work great for this.

Considerations

You’ll need to decide how many different docs to create for storing commentary. Let’s say your Tableau “slide deck” has four slides and each one has a leader responsible for it. You’ll likely want four different documents so that you can set individual permissions for each leader in each document so only they or their delegates can update commentary based on those permissions.

You’ll also want to decide on the document size and aspect ratio, which is a little limited as Google Docs does not allow for custom page sizes. I chose the “Statement” size which is 5.5” x 8.5” simply because it is the smallest page size available.  The document will get scaled down to fit the size of your dashboard but will retain the same aspect ratio.

Step 2: Create Selection Value Parameter

Next, we’ll map out each document against a value in our dashboard which will be stored in a parameter. For my example, I chose the Regional Manager field in the sample Superstore dataset which comes with Tableau. There are four regional managers, and each of them will have a “slide” on their dashboard with their commentary. I’m going to create a parameter called [Selected Manager] which will store the selected value, as shown.

Step 3: Create Edit State and URL Parameters

Next, I need a parameter to store the “edit” state of the commentary and will reflect whether the URL I’m passing to the web object has the edit or preview variation. This only has two possible states, so I’m naming it [Edit Mode] and setting it up as boolean – true or false.

The last parameter we need is the URL itself which will be stored as a string. We’ll call it [Embed URL String].

Step 4: Create Calculated Fields

We also need a few calculations that will build the URL to render in the web page object.  We will have two versions – one for the buttons that will select the manager and the other for the edit toggle button.

The manager selection URL calculation is where we will map the google document URLs for each manager to their respective value in the dashboard.  It will be different for you depending on your data and document URLs, but should overall look something like this:

The other calculation is for the edit toggle button, and will look like this:

The function of this calculation is to change the suffix of the URL from edit to preview and vice versa, depending on the current state of the URL.  We’ll also want a calculation to toggle the edit button state, independently of the full URL parameter, so that will look like this:

Step 5: Create Selection Buttons

Now, create your manager selection buttons.  You can set them up in a variety of ways, but this is the method I chose in this case.

I’ve used bars for the marks here, and there is a calculation that determines whether the current manager is selected in the [Selected Manager] parameter which is assigned to the mark color.  You should also create calculations for literal [TRUE] and [FALSE] values, and put them in mark details, so you can automatically deselect the marks when the user clicks the button. You’ll also use the [FALSE] value as a parameter action target for [Edit Mode] to make sure that when you switch managers, you’ll always be in preview mode and not edit mode. Also, include the [URL String – Manager] or your equivalent calculation in the mark detail.

Step 6: Create Edit Toggle Button

Next, create a button in the same way for your edit mode toggle.  We just need a single button with a single mark here, in a separate sheet.  It can look something like this:

In this case, I’ve added a calculation called [Edit Mode Label] to label the text on the button according to the state of the [Edit Mode] parameter, and also assigned the color to that calculation. Make sure that your [TRUE], [FALSE], [Edit Toggle], and [URL String – Edit] calculations are all in the mark detail so we can use them for parameter actions.

Step 7: Create Dashboard Layout and Assign Parameter Actions

Now, let’s create a dashboard with these elements. Add both button sheets to your dashboard, and then add a Web Page object. In the options for that web object, click on Edit URL, and set the value to your [Embed URL String] parameter.

Now we’re ready to create parameter actions that will make all the magic happen.  We will need at minimum two sets of parameter actions for each set of buttons.  One will set the parameter which stores the URL for the web object, and the other will store the button state ([Edit Mode] or [Selected Manager]). The reason these are stored separately is that the actions happen effectively in parallel rather than in sequence, and storing button states in separate parameters is a little more performant than deriving the button state from calculations against the embedded URL string value, though that is also possible.

For the Edit button, you will want to set up two parameter actions.

  1. Set [Embed URL String] to the value of [URL String – Edit] on click
  2. Set [Edit Mode] to the value of [Edit Toggle] on click

For the Manager buttons, we will want three parameter actions. 

  1. Set [Embed URL String] to the value of [URL String – Manager] on click
  2. Set [Selected Manager] to the value of [Regional Manager] on click
  3. Set [Edit Mode] to the value of [FALSE] on click

Also consider setting up highlight and filter actions to deselect the button marks when they are clicked, using the [TRUE] and [FALSE] values we put on the mark detail.

Now when you click one of the manager buttons, you’ll see the Google Doc embedded in the Web Page object on your dashboard! 

Tips and Reminders for Embedded Commentary

The next things you’ll want to consider are the design and layout of the page. There are some things you can do to make the commentary more seamless within the view.

  • Set your dashboard background to the same color as the background of the embedded page, which happens to be #f8f9fa.  This will allow it to blend in nicely with other dashboard elements.  Consider this when blending the layout to match your existing design and branding standards.
  • Fix the height and width of the web object so you don’t get scroll bars in the preview mode.  This is unavoidable in edit mode which won’t scale down but is more manageable in preview mode for the embedded URL.
  • For your dashboard users who will be updating the commentary, you can have them press Control+Shift+F to collapse the top and side menu elements and make the smaller editing space a little easier to work with.
  • Since your commentary box is now synced up with the [Selected Manager] parameter, you can use the [Manager Selected] calculation as a filter in your other views to automatically show relevant data in your charts and related sheets on the dashboard, and use it to let Tableau do what it does best.

There is one other drawback to this method that I would be remiss to overlook. When exporting the dashboard contents to an image, PDF, or PowerPoint file, all web objects will be blank and won’t automatically render in the export. This limitation is due to how Tableau handles the rendering of web objects in general. If the intent is for your team to review the dashboard live on the server, then it won’t be an issue. If you need to export the dashboard and include the commentary, it may take an extra step to take a snip of the commentary after export and include it in the PPT file over the empty section.

Closing

While there is no perfect and seamless way to handle this common need for in-line commentary in Tableau dashboards, I hope this method will be helpful to some. I have used this method to great effect in the past, and while I hope for future improvements to the product which will make this use case easier, at least the current features do provide some options.

Thank you for reading! If you have more questions on how Tableau can automate and enhance your analytics practices, please get in touch with our team of Tableau experts!

FAQs

You could do this, and it would indeed give you more flexibility in how the resulting preview is displayed on the dashboard. However, there are two drawbacks. One is that the edit mode will always show a list of slides on the side, which reduces the available area for editing the slide inline. (There are clever ways around this, but that’s another blog post…)  

The other drawback is that if using multiple slides the user can advance slides by clicking in that area (intentionally or accidentally) and cause the commentary to get out of sync with the data shown. Even if you use separate files rather than slides in the same file, there is also a bottom border that would need to be creatively covered, as there doesn’t seem to be a URL parameter to hide it.  

Another option one could explore is similarly embedding Google Sheets.  There are URL parameters that offer quite a bit of flexibility in which cells to display and how to scale the preview, but a spreadsheet is less conducive to the word processing use case here.

Use a separate parameter for storing the embed URL for each dashboard tab, and then you will need a separate edit button for each. Alternatively, you could use a navigation action and parameter action as the edit button to have a single common dashboard, separate from the others, which would embed the edit version within a separate web part. There are many options here, limited only by one’s creativity!

More to explore

Accelerate and automate your data projects with the phData Toolkit

Introducing
Data Coach is our premium analytics training program with one-on-one coaching from renowned experts.

Data Coach is our premium analytics training program with one-on-one coaching from renowned experts.