Hiding Tableau Server UI (vizportal) Elements

As mentioned in the previous post about CSS modifications on the viz and web edit screens, there are two pieces to the Tableau Server UI. The Tableau Server “UI” or “chrome” is all generated from vizportal. This post will talk about modifications that can be made to vizportal, particularly if there are security concerns. We always recommend just embedding the Tableau Server viz in your own application if at all possible, but many of our customers would prefer that their customers, internal or external, use the full Tableau Server UI. It is pretty nice after all.

vizportal is a web application, and what you actually see comes from the interaction of HTML and CSS. Some things are easy to hide via a CSS modification, but for others, changing the HTML will be the only way to go. For an overview of how HTML modification works with vizportal, see the previous post on removing the Change Password option for users. Everything from there remains true — there are lots of small individual pages of markup that create each element, and there is a version of each of them in all of the languages of Tableau Server, so you have to make these changes for each language. Because of this, a CSS change is preferable if possible.

Remember that you may not see your changes without some specific actions to bypass caching.

Note: Everything that follows is unsupported and should only be done with absolute care and a plan for how to maintain these changes from one upgrade to another.

Note that there are now .gz versions of each HTML file which will be used if they exist, so if you want to test a change, you need to remove the .gz file somehow (the easiest way is to add ‘.original’ to the end of the file after .gz) so that the .html file is being used. You can save your edited HTML file later to a .gz so it is served up even more quickly.

The files for vizportal are all located in

C:\Program Files\Tableau\Tableau Server\9.2\vizportalclient\public\

and when I give an example on a .html page, I have tested and modified it in the \en\ directory, but the equivalent change will need to be made in all of them.

 CSS Modifications

The main CSS file for vizportal is

C:\Program Files\Tableau\Tableau Server\9.2\vizportalclient\public\vizportal.css

What might we hide using CSS? In the top right of vizportal, there are four icons, with the furthest right being a drop down menu (it changes to show the user name).  From left to right, the CSS to identify these are:

“Triangle” alert icon:

.tb-alert-menu-button

“Star” favorite icon:

.tb-favorites-menu-button

“(i)” help and info button:

.tb-help-menu-button

“Username” menu:

.tb-signed-in-user-menu

Hiding the Download Workbook button

Since Download and Save As are the same permission, you may on occasion want to remove the ability to download from Tableau Server while still leaving Save As in place. To do this, add the following to your vizportal.css:

.tb-download-icon{visibility: hidden;}

Hiding the Owner of Content

In the workbook view, underneath the workbook’s title is a small area that shows “by {username}”, with the username being that of the owner. If you don’t want to reveal the owner’s name, you can hide this via

.tb-place-description-line-owner {visibility: hidden;}   

Template HTML Modifications

Hiding the Owner of Content

There are two other places that the owner of content shows up, and they both require modifying the HTML templates.

In workbookPopover.html, make the following change to comment out:

<!--

–>

In viewPopover.html, make the following change to comment out:

<!--

–>

I prefer just to comment out, in case you want to reverse changes, but of course you could remove the text altogether.

Hiding the Data Sources Menu

In the Workbook view, you can see information about all of the Datasources in a workbook, even those that are embedded (i.e. not published). If this is a database, it will show the actual database server name on the network. To hide the option to go to that Data Sources view, you’ll modify workbook.html :


&amp;lt;!--&amp;lt;a tb-state-href="^.datasources" tb-state-href-config="{ keepSearch: true, omitParams: ({{ '**.datasources.**' | includedByState }} ? [] : ['order']) }" tb-selected="'**.datasources.**' | includedByState" tb-button-click="subplaceTabClicked('datasources')" tb-test-id="subplace-tab-button-datasources" class="tb-subplace-tab-button"&amp;gt;&amp;lt;span tb-test-id="subplace-tab-label" class="tb-label"&amp;gt;Data Sources&amp;lt;/span&amp;gt;&amp;lt;span tb-test-id="subplace-tab-count" class="tb-count"&amp;gt;{{ subplaceCounts.datasources | localizedCount }} &amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;span ng-show="workbook.hasExtracts"&amp;gt;&amp;lt;a tb-state-href="^.extractTasks" tb-state-href-config="{ keepSearch: true, omitParams: ({{ '**.extractTasks.**' | includedByState }} ? [] : ['order']) }" tb-selected="'**.extractTasks.**' | includedByState" tb-button-click="subplaceTabClicked('extractTasks')" tb-test-id="subplace-tab-button-extractTasks" class="tb-subplace-tab-button"&amp;gt;&amp;lt;span tb-test-id="subplace-tab-label" class="tb-label"&amp;gt;Refresh Schedule&amp;lt;/span&amp;gt;&amp;lt;span tb-test-id="subplace-tab-count" class="tb-count"&amp;gt;{{ subplaceCounts.extractTasks | localizedCount }} &amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;&amp;lt;/span&amp;gt;--&amp;gt;&amp;lt;a tb-state-href="^.subscriptions" tb-state-href-config="{ keepSearch: true, omitParams: ({{ '**.subscriptions.**' | includedByState }} ? [] : ['order']) }" tb-selected="'**.subscriptions.**' | includedByState" tb-button-click="subplaceTabClicked('subscriptions')" tb-test-id="subplace-tab-button-subscriptions" class="tb-subplace-tab-button"&amp;gt;&amp;lt;span tb-test-id="subplace-tab-label" class="tb-label"&amp;gt;Subscriptions&amp;lt;/span&amp;gt;&amp;lt;span tb-test-id="subplace-tab-count" class="tb-count"&amp;gt;{{ subplaceCounts.subscriptions | localizedCount }} &amp;amp;nbsp;&amp;lt;/span&amp;gt;&amp;lt;/a&amp;gt;

You may also want to comment out ‘Extract Refreshes” and “Subscriptions” which are all in this block.

A note on these methods

Not everything is as simple as an HTML or CSS modification. Some things are actually generated in the application JavaScript, and I won’t ever advise any modifications at that level. You should always test and see if changing anything in the HTML templates actually affects what it appears to — sometimes you’ll make changes but nothing happens.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s