How to Create Multi-Sided Apps

Give your users different features or experiences based upon their role. Enable coach/client views, control paid features of your app, or build yourself an admin panel!

Skill Level: Intermediate

Before You Begin

• Know about Databases and the basics of how to create them.

• Know the basics of Conditional Visibility and Conditional Actions

• Know the basics of Screens and Components

• You do not need a paid Adalo plan to use this feature.

Walkthrough

Simple

1.) Before we choose and build out how our multi-sided app will work, we need to establish some user types or roles within our database in order to determine which side of the app a user should see. There are a few ways to do this.

• True/False fields for user roles. For instance, if we had mentor/client roles, we could add two True/False properties to the User collection - one called "Client?" and the other called "Mentor?".

• A text property called "Role" that holds a unique value for a user type. This prevents us from clogging up our users collection with true/false properties if we have lots of roles. For instance, if we had mentors, clients, and admin as user roles, we could simply set those values for the user automatically within a form or on a button that the user presses.

• We can also create a Collection called User Roles, if we have a lot of roles for users to choose from. The advantage here is that we can assign lots of properties to a user role, then assign that user role to a user through a Relationship. Using this method, we can assign things like "Clearance Levels" to users so that all users above a certain level all have access to the same things while users below that level do not. This allows us to give permissions to several user roles within a hierarchy of many roles.

No matter which route you choose, you can use the same logic to provide different workflows and experiences for your users. There are many different ways to accomplish this, but all of them will require some sort of conditionality by either using Conditional Visibility or Conditional Actions. Here are 3 examples utilizing the True/False method above to get you started:

Using Conditional Visibility Based on User Role

This method can be used to display a component or button only if a user's role matches a certain criteria.

1.) Ensure you have your True/False properties of "Mentor?" and "Client?" setup in the Users collection and at least 2 screens in your app - a home screen and a mentor dashboard screen.

2.) On one screen, add a simple button labeled "Mentor Dashboard" by clicking on the big plus sign in the top left corner

3.) Click on the new button, then in the Click Actions section, add a Link action to link to the second screen.

4.) Click on the More icon in the top right of the button's settings menu, then choose Change Visibility

5.) In the Visibility dropdown, choose Sometimes Visible.

6.) Since we only want this "Mentor Dashboard" button to be visible to the user if they are a mentor, we need to set the visibility to reflect this. In the Will be visible if... dropdown choose Logged In User > Mentor? In the dropdown that now appears just below, be sure to select Is True if not already chosen.

Using Conditional Actions Based on User Role

This method can be used to perform an action only if a user's role matches a certain criteria.

1.) Ensure you have your True/False properties of "Mentor?" and "Client?" setup in the Users collection and at least 3 screens in your app - a home screen, a client dashboard screen, and a mentor dashboard screen.

2.) On the home screen, add a simple button labeled "Dashboard" by clicking on the big plus sign in the top left corner

3.) Click on the new button, then in the Click Actions section, add a Link action to link to the client dashboard screen.

4.) Click on the new link action's Show Advanced option in the action settings, then in the When does this happen? dropdown, choose Sometimes.

5.) Another dropdown will appear labeled This action will only happen if... In this dropdown choose More> Logged In User > Client? Just below, be sure to set the dropdown to Is True

Building Different Apps with a Shared Database

Yet another way to control the user's experience based on role, is to simply make separate apps for each user role by sharing the same database between the apps. For instance, Uber has a driver app and a rider app.

1.) Once you have created one user role's app and it's database, you can copy it or create a new app that shares the same database. To create a new one, click the name dropdown of the app in the top middle of the Adalo Builder, then click the Create New App option at the bottom

2.) Choose the type of app, then click Next.

3.) Choose Blank from the template options, then click Next.

4.) Give your app a name, choose the Team it should be placed on and it's colors, then click Advanced Options

5.) Choose the Share Database with an Existing App option, then choose which app to share the database with. Click Done, then click Create.

7.) To copy the app instead of creating a new one, click the Settings icon on the lefthand menu in the Adalo Builder.

8.) Click on the Copy/Delete section dropdown, then choose Copy ______

9.) You will be prompted to give the new app a name. Be sure to check the Share the same database in order to use the same database for both apps. Choose which team to put the app on from the dropdown, then click Create.

In-Depth

1.) Before we choose and build out how our multi-sided app will work, we need to establish some user types or roles within our database in order to determine which side of the app a user should see. There are a few ways to do this.

• True/False fields for user roles. For instance, if we had mentor/client roles, we could add two True/False properties to the User collection - one called "Client?" and the other called "Mentor?".

Add true/false properties to denote a user's role.

• A text property called "Role" that holds a unique value for a user type. This prevents us from clogging up our users collection with true/false properties if we have lots of roles. For instance, if we had mentors, clients, and admin as user roles, we could simply set those values for the user automatically within a form or on a button that the user presses.

Add a text field to hold the user's role type.

• We can also create a Collection called User Roles, if we have a lot of roles for users to choose from. The advantage here is that we can assign lots of properties to a user role, then assign that user role to a user through a Relationship. Using this method, we can assign things like "Clearance Levels" to users so that all users above a certain level all have access to the same things while users below that level do not. This allows us to give permissions to several user roles within a hierarchy of many roles.

A view of the Role Types collection

The relationship type between Users and Role Types

No matter which route you choose, you can use the same logic to provide different workflows and experiences for your users. There are many different ways to accomplish this, but all of them will require some sort of conditionality by either using Conditional Visibility or Conditional Actions. Here are 3 examples utilizing the True/False method above to get you started:

Using Conditional Visibility Based on User Role

This method can be used to display a component or button only if a user's role matches a certain criteria.

1.) Ensure you have your True/False properties of "Mentor?" and "Client?" setup in the Users collection and at least 2 screens in your app - a home screen and a mentor dashboard screen.

2 True/False properties for the Mentor and Client roles

2.) On one screen, add a simple button labeled "Mentor Dashboard" by clicking on the big plus sign in the top left corner

Adding a simple button to link to the mentor dashboard.

3.) Click on the new button, then in the Click Actions section, add a Link action to link to the second screen.

Adding a link action to the mentor dashboard button.

4.) Click on the More icon in the top right of the button's settings menu, then choose Change Visibility

5.) In the Visibility dropdown, choose Sometimes Visible.

Setting the button visibility to sometimes visible.

6.) Since we only want this "Mentor Dashboard" button to be visible to the user if they are a mentor, we need to set the visibility to reflect this. In the Will be visible if... dropdown choose Logged In User > Mentor? In the dropdown that now appears just below, be sure to select Is True if not already chosen.

Setting the visibility so that the button is only visible if the Logged In User is a Mentor.

Using Conditional Actions Based on User Role

This method can be used to perform an action only if a user's role matches a certain criteria.

1.) Ensure you have your True/False properties of "Mentor?" and "Client?" setup in the Users collection and at least 3 screens in your app - a home screen, a client dashboard screen, and a mentor dashboard screen.

2 True/False properties for the Mentor and Client roles

2.) On the home screen, add a simple button labeled "Dashboard" by clicking on the big plus sign in the top left corner

Adding a simple dashboard button to the home screen

3.) Click on the new button, then in the Click Actions section, add a Link action to link to the client dashboard screen.

4.) Click on the new link action's Show Advanced option in the action settings, then in the When does this happen? dropdown, choose Sometimes.

Making the link action only happen sometimes.

5.) Another dropdown will appear labeled This action will only happen if... In this dropdown choose More> Logged In User > Client? Just below, be sure to set the dropdown to Is True

Adding the conditional action's criteria.

Building Different Apps with a Shared Database

Yet another way to control the user's experience based on role, is to simply make separate apps for each user role by sharing the same database between the apps. For instance, Uber has a driver app and a rider app.

1.) Once you have created one user role's app and it's database, you can copy it or create a new app that shares the same database. To create a new one, click the name dropdown of the app in the top middle of the Adalo Editor, then click the Create New App option at the bottom

Creating a new app.

2.) Choose the type of app, then click Next.

Choosing the type of app.

3.) Choose Blank from the template options, then click Next.

Choosing the blank template option

4.) Give your app a name, choose the Team it should be placed on and it's colors, then click Advanced Options

Adding a name and selecting advanced options

5.) Choose the Share Database with an Existing App option, then choose which app to share the database with. Click Done, then click Create.

Sharing the database with another app

7.) To copy the app instead of creating a new one, click the Settings icon on the lefthand menu in the Adalo Editor.

Select the settings gear in the left-hand menu.

8.) Click on the Copy/Delete section dropdown, then choose Copy ______

Copying the current app

9.) You will be prompted to give the new app a name. Be sure to check the Share the same database in order to use the same database for both apps. Choose which team to put the app on from the dropdown, then click Create.

Name the app copy and be sure to select Share the same database

Video

Example

If you followed one of the methods above, you should have a good start to building a multi-sided app for your users. If you would like to view or clone the app used in this walkthrough, please click here.

Learn More

• Note that if you create two or more separate apps that share the same database, you will need to also publish them separately on the app stores.

• You can always find examples of great multi-sided apps by checking out our app templates.

• A common way to assign roles upon user signup is to provide an onboarding sequence where they choose their role by selecting buttons.

• You can also assign roles at signup by setting them as automatic fields within a form.

Help

If you need additional help with this article, you can always ask in our community forum! Be sure to paste the link to this article in your post as well!

Do you have a tutorial or help doc request? Let us know!