While there are numerous benefits for other user roles as well, this document describes Zuar’s Rapid Portal 2.0 from the perspective of a developer or person branding their portal.

Rapid Portal 2.0 is refining its methodology, making it even simpler for users to customize their portals to meet their branding and business needs.  

Rapid Portal 1.0 was released just over a year ago.  Since then we’ve learned a lot from our user base, and now we’re incorporating what we’ve learned into a 2.0 release.  Version 2 makes the customization process even easier without giving up any of the power.  In fact, several use cases that were fairly difficult in 1.0 are now trivial.

Motivation

Modern web design is moving away from custom CSS as large amounts of CSS quickly become a maintenance nightmare.  Instead frameworks are allowing users to add the same functionality using dedicated classes in the HTML.  Tailwind CSS really pioneered this and Bootstrap - Zuar’s framework of choice - is moving more this direction with their 5.0 release.  It makes sense, an informal poll of Rapid Portal (RP) users rated the following from most to least comfort making changes to it:

  1. Configuration files
  2. HTML
  3. CSS
  4. Javascript

Users were the least comfortable making changes to JS code (by a wide margin).

Rapid Portal makes it easier to customize and maintain by moving more of the functionality into HTML.  Configuration file(s) are used for default values and will enable future builder tools.

Methodology

2.0 provides custom HTML tags that enable Rapid Portal functionality and are configured via attributes.   Adding particular functionality is as simply as dropping in the corresponding tag.  No more changing multiple different files, instead you only need to change the page you are working on.

For example, to show a dashboard, the user will just add:

<z-dashboard />

and the Rapid Portal will replace the it with the desired Tableau dashboard.  All the details of interacting with the Tableau JS API and displaying the dashboard are handled automatically.  Furthermore, that tag can be styled using standard Bootstrap class for the desired look and feel.

Just showing the dashboard encompasses a lot of functionality but is fairly similar to how things worked in 1.0.  A more impressive example is:

<z-view-list />

This seeming simple tag is incredibly powerful.

Clicking on a thumbnail shows that dashboard in the z-dashboard tag.

In RP 1.0, the user could configure this list to only show dashboards that had a particular tag, but you had to go into the Javascript to do it.  In 2.0, it’s easy with the tags attribute:

<z-view-list tags=”real-estate,oil-and-gas’ />

and the user is shown a list of only those dashboards that were tagged with real-estate or oil-and-gas.

Another commonly asked-for use case was an admin-style layout, where instead of thumbnails, links to the dashboards are displayed in a sidebar.  Again, in RP 1.0 you could do this, but it meant custom Javascript or hard-coded links.  In RP 2.0 its as simple as:

<z-view-list list-type=”vertical” />

which generates an unordered list of dashboard links. Done.

This is just a sampling of the new tags and their attributes; there are more tags and you can mix and match their attributes to control essentially all RP functionality.

Not just Tableau

All the custom tags up until now have controlled the embedding of Tableau in the page.  While this is certainly the majority of the benefit - it’s what Rapid Portal was designed for - there are tags for non-Tableau use cases too.

The majority of RP designs so far have used a background image for the login page so we’ve made this simpler:

<z-background-visual src="" />

This tag accepts the background using the src attribute and can be either an image or a video.  Depending upon the file extension, the RP correctly display it: mp4, webm or mov files are videos, others are static images.   If you every tried to style a background video in the past, this is way easier.

No more sharks

In Rapid Portal 1.0, the login page was a Mako (.mako) template.  This kinda-hacky approach caused all sorts of confusion and was often misconfigured.  In 2.0, the login page is just plain HTML and the user can choose where and how to display error messages (the main reason for using a Mako template in the first place) using a custom tag:

<z-login-error />

Advanced

What if you are comfortable with all of these technologies?  Can you start from scratch?  Absolutely.  At its heart, RP2.0 behaves like any standard website which means the tools you’re comfortable with can still be used.  Rapid portal tags act just like components in any JS framework such as Vue or React (in fact, they *are* Vue components).   Many Static Site Generators (SSGs) are gaining popularity - notably  GatsbyJS with their $43M in funding - and you’re free to use any of them or just start coding HTML from scratch.

Roadmap

What’s next?  In the future we hope to get rid of *style.css* entirely so that the user can start with a generic Bootstrap 5 ‘theme’ or generate one themselves, without having to write *any* custom CSS.  We believe this will be possible once full support for CSS variables is included in Bootstrap.  Until then, we’ll continue making the design easier to use as we encounter more and more real-world use cases.

Conclusion

Rapid Portal 2.0 changes the way users customize their portal by providing a set of extremely powerful custom HTML tags that control the functionality and ultimately Tableau.  The new methodology makes it faster and even easier to create unique portal designs.

Watch for new devops capabilities powered by Rapid Portal 2.0 by subscribing to the Community!

Take advantage of everything Zuar offers to companies using Tableau!

  • Rapid Portals are an easy way to provide branded Tableau dashboards. Monetize your data or provide secure access outside of corporate firewalls.
  • Transport, warehouse, transform, model, report & monitor. Mitto gets data flowing from hundreds of potential sources into a single destination for Tableau.
  • Zuar's team of Tableau-certified consultants can take the headaches out of even the most complex projects.
  • Read our other Tableau-focused articles.