Inspiration

We often find ourselves limiting our dashboard design vocabulary because of some limitations of Tableau Workbooks:

  • the colour palette has to be restricted if the dashboard has scrollbars, because they will mess up the visual balance otherwise
  • The font choices have to be limited, or the Tableau Server Administrators have to work hard to get all fonts used by the various workbooks onto the server in multiple formats.

What it does

For scrollbars:

  • It allows Dashboard Authors to change colours / sizes / format of the scrollbars in their published workbooks
  • It allows Server Administrators to change colours / sizes / format of the scrollbars using custom rules that cover multiple Dashboards, and even override the global scrollbar settings on the server

For fonts (for Server Admins):

  • It scans workbooks on the Tableau Server (via WebHook callbacks from Tableau Server on publish or directly triggered using its own API)
  • It provides an overview of all fonts used by these scanned workbooks
  • It provides a framework for semi-automatically installing these fonts, their webfont counterparts
  • It generates a single CSS for all webfonts installed, that is injected into VizPortal dynamically

How we built it

Both the backend and the frontend is written in JavaScript.

The backend is a single Express App that has to be Proxied on the Tableau Server for the Extension Scrollbar theme override to work (the Tableau Server JS has to have access to the frame of the extension to be able to extract the theme config).

The frontend is (mostly) a Vue app composed of three parts, with some quick-n-dirty custom CSS:

  • The scan log
  • The Fonts list
  • The themes list / editor

Themes

A simple CRUD API is provided by the server for editing Themes.

The Vue component for the theme editor is re-used in the extension configuration dialog to save time (with some configuration changes).

Fonts

We analysed Tableau Workbooks to find the how fonts are declared, wrapped it into some API calls do download / unpack a workbook, added a DB (Postgres) to store the results of each scan + create the font metadata on-demand.

Challenges we ran into

  • Scrollbar weirdness -- sometimes tableau uses an external for scrolling, and just listens to it, and the CSS for it did mess with us
  • CORS issues -- the extension has to be proxied to make the integration work
  • Multiple ways of using fonts -- Tableau uses different tags for fonts, which made us scratching our head as to why only some of the fonts are shown -- we think we got 'em all in the end

Accomplishments that we're proud of

  • Only one patch to the Tableau Server JS is required
  • We only show a tiny percent of the metadata we extract from the Tableau Workbook XML -- there is serious potential in extracting extension metadata from the server

What we learned

  • Tableau Workbook XML processing is powerful
  • A good scrollbar is hard to find
  • Colours matter more then expected -- we were surprised by how much better the dashboards looked with simple colour changes

What's next for Make-up kit for Tableau

  • Finish the server-side patching framework for the fonts (which requires things like Tableau Server restart, and a Font repository)
  • Extract the scrollbar themes from the Workbook XML on publish so the extension doesn't have to be proxied
Share this project:

Updates