Display State Map

A common problem for SaaS front-ends is to conditionally display UI elements based on the set of permissions that the logged-in user possesses. For example, if a user only has "viewer" permissions, the front-end typically wants to avoid displaying UI elements that allow users to edit or update resources.

Topaz addresses this problem by defining the display state map pattern. An authorization policy defines decisions called visible and enabled, which take on true / false values when evaluated against the roles and attributes of the logged-in user. We refer to the following type of JSON map as a display state:

{ "visible": true, "enabled": false }

Topaz's decisiontree API makes it possible to compute these display states for every route or permission in your application based on the roles and attributes of the logged-in user. We call this map of maps a display state map and it looks like this:

{
  "GET/api/users": { "visible": true, "enabled": true },
  "POST/api/users": { "visible": true, "enabled": false },
  ...
}

SDK Usage

The Topaz JavaScript SPA SDK and React.js SDK support this pattern. Each of these SDKs works together with other high-level language SDKs like the Express.js middleware to allow retrieving this display state map when the user logs in (and/or reload it). This in turn can be used to instruct the UI on whether to render specific UI elements that correspond to these routes / permissions.