Overriding Components Based on Roles

Overview

We can easily override component properties based on user roles. This can come in handy when you have multiple users and roles in your application.

Example: Overriding button text based on role

In this example, we have a button with the text, Sign in. We want to override this text to Sign in as Manager based on whether the logged in user has the Manager permission or not.

Enable Access Management

In order to enable access management, navigate to the Project Settings and opt for Access Management

• Enable login for your project.
• Create a new permission under Permissions tab and label it as Delete with value DELETE.
• Create a new role under Roles tab and label it as Manager. Add the the DELETE permission for this role.
• Create two users, one with the Manager role and one without.

Configure the button

• Drag and drop the button component onto the canvas.
• Add the button text as Sign in.

Add the override

• Open the Overrides tab for the button.
• Click on + Override to add a new override.
• Choose Expression for the Based on input.
• Add the expression to apply the override only if the user permission includes the DELETE permission, which for our case is only applicable to the Manager role. The expression would look like {{user.permissions.includes("DELETE")}}
• Choose the property to override as Text.
• Make the Text property Sign in as Manager for the override.

Testing

• Deploy the application.
• Log in with the user with Manager role.
• Observe that the button should have Sign in as Manager text.
• Log in with the user without the Manager role.
• Observe that the button should only have the text as Sign In.