Tuesday Tips: Implementing User Roles in Experiences

Most applications have user roles. For example, in some applications, certain pages and functionality are available to everyone, and others only available to an admin user. You can implement your own custom user roles with a Losant Experience.

This tip is adapted from How to Securely Upload Files with Losant Experiences , by Brandon Cannaday

Let’s look at an example. Here is an example of an Experience View:

For this application, the maintenance interval data (stored in a Losant Data Table), should be available to everyone. But, we only want administrators (a new role type) to upload new maintenance interval data to the underlying Losant Application. This use case requires us to show/hide the upload form you see above based on the user’s “role.”

There are two main ways to “group” Experience Users:

Experience Groups - An Experience Group is a mechanism for associating your application’s devices with your Experience Users. Experience Groups are there to help you manage the relationship between your groups of customers and their devices.

Experience User Tags - Tags allow for the storing of arbitrary data against any Experience User, like user roles (ex. admin or not). Tags can be used to group Experience Users in the most flexible way possible.

We recommend Experience User Tags for user roles. Since user roles don’t usually impact any relationships to devices, but they do impact the UI, we don’t need to create Experience Groups for user roles.

In the image of the Experience you see above, here is the code to hide/show the upload form based on the user’s role (experience.user.userTags.role) and using the #eq helper:


{{! Only show the upload form if the user is an admin and a member of the Kanarra Technologies group }}
{{#eq experience.user.experienceGroups.[0].name 'Kanarra Technologies'}}
{{#eq experience.user.userTags.role 'admin'}}
  <form action="/maintenance-intervals" method="POST" enctype="multipart/form-data">
    <div style="font-size: 16px; text-align:center;margin-bottom:15px;">
      Upload new maintenance intervals
    </div>
    <div>
      <div style="text-align:center;">
        <input type="file" name="maintenanceIntervals" id="maintenanceIntervals" accept=".csv">
      </div>
      <div style="text-align:center;margin-top:10px;">
        <button class="button">Upload</button>
      </div>
    </div>
  </form>
{{/eq}}
{{/eq}}

Using techniques in this tip, you can start to build out user roles in your Experiences today. We’ll be back with a tip next week! :slight_smile: