The Rapid Portal is customizable by anyone who has knowledge of HTML, CSS, and JavaScript. Some simple branding changes like swapping out images or colors require almost no front end web development knowledge. For those with more in depth knowledge of JavaScript, the Tableau JavaScript API, and the Tableau REST API, the Rapid Portal can be completely customized and extended.

In browser editor

To make prototyping and simple tweaks easier, the Rapid Portal has an in browser editor. In production, this functionality should be turned off and only enabled if and when changes need to be made (rarely).

In your browser, on your new Rapid Portal go to /edit.

This in browser editor allows you to change any of the Rapid Portal's files directly, save those changes, and see the changes live.

Rapid Portal's /edit feature.

Clicking on “Enter a file path and name to edit” shows the list of files.

Rapid Portal's main files. 

Important files below:

  • /login.mako - Login page
  • /index.html - Main Application page showing embedded Tableau dashboards
  • /css/style.css - Cascading Style Sheet for images, logos, colors, etc. Controls styling for both the Login and Index pages.
  • /js/app.js - This is the JavaScript for the Rapid Portal. It leverages the zwaf.js and Tableau JavaScript API.
  • /js/zwaf.js - JavaScript allowing the Rapid Portal front end to communicate with the backend Tableau REST API.

Save edits

You can edit any of the files and press CTRL+S or click the pink SAVE button to save. After saving, navigate to the page you edited and refresh your browser. You should see the changes reflected live.

HELPFUL TIP: It is best practice to create new files and edit those while testing changes rather than overwriting the main pages directly.

Create new files

You can create a new file by typing a filename and pressing enter or clicking the black arrow.

Example of creating a new page in the Rapid Portal.

Branding

The /css/styles.css file is your one stop shop for branding the Rapid Portal.

You can customize anything, but we have simplified the pieces that are necessary and consolidated them at the top.

In browser editor and editing the /css/style.css page.
Examples of where changing the /css/style.css affects the login page.
Examples of where changing the /css/style.css affects the index page.

HELPFUL TIP: Split your screen so you can edit and save in the editor and then refresh the live page.

Example of split screen to test edits against live Rapid Portal.