Skip to main content

Page Restrictions in Multi-Tenant SaaS

Allows you to build a multi-tenant SaaS web app on DrapCode. It is a simple plugin that incorporate a readymade multi-tenant architecture in your web app.

It will help you build a web app that can serve multiple customers and organisations with a single software infrastructure. You can show, hide, disable or apply read-only permissions on any component in a page.


Multi-Tenant SaaS Plugin for Page/Component Restrictions

Here are steps to set up multi tenant SaaS Plugin for adding page or component restrictions:

1. Install the Login/Sign Up Plugin

It is mandatory to install the Login/Sign Up plugin before installing the Multi-Tenant SaaS plugin. So after landing on the plugins page, find the Login/Sign Up plugin and click the install button. To know the process of setting up the login/Sign Up plugin installation, click here.

DrapCode Builder Multi-Tenant SaaS Plugin

3. Open the Role Collection

As you successfully install the Login/Sign Up Plugin, some pages, collections and events will get added automatically with the installation. So go to the collections panel and open the collection named, Role.

DrapCode Builder Multi-Tenant SaaS Plugin

4. Create Roles

User role is the default role. To add more roles, click the Add Role button and create as many as roles you want. In the example below, we have created 2 more roles: Super Admin and Admin.

DrapCode Builder Multi-Tenant SaaS Plugin

5. Go to Pages

Go to the pages panel and open the page whose component you want to apply multi-tenant functionality on. In the example below, home page is opened. You can create a new page as well.

DrapCode Builder Multi-Tenant SaaS Plugin

6. Design a Page

Open the homepage or add a new page and design it as you want. You can add components that you want to hide, show or disable on the basis of roles. In the example below, a data table is dropped in the page that already contains a navbar.

DrapCode Builder Multi-Tenant SaaS Plugin

7. Bind a Collection to the Data Table

If you have added a CMS component like data table to dynamically bring data from collection, then bind a collection whose data you want to display.

DrapCode Builder Multi-Tenant SaaS Plugin

8. Install the Multi-Tenant SaaS Plugin

Go back to the plugins page and find the multi-tenant SaaS plugin. Click the Configure button to commence the installation process.

DrapCode Builder Multi-Tenant SaaS Plugin

9. Multi Tenant Collection Name

As you click on the install button, the installation settings of multi-tenant SaaS plugin will open. So, first name the multi-tenant collection as you want or leave the field empty to use the default name, "Multi Tenant". This collection will handle all the multi-tenant SaaS features.

DrapCode Builder Multi-Tenant SaaS Plugin

10. Tenant Collection Field

Now select one or more create roles that could access the configuration page. In the example below, only Super Admin is selected for the creator role.

DrapCode Builder Multi-Tenant SaaS Plugin

11. Unistall/Install Multi-tenant Plugin

The next step is click Uninstall. Then go back to Plugin and choose Install. This will install this plugin.

DrapCode Builder Multi-Tenant SaaS Plugin

12. Open Collections

Once you have successfully installed the multi-tenant SaaS plugin, open Collections as shown below. There will be three default collections that got added automatically with login/sign up and multi-tenant SaaS plugins.

DrapCode Builder Multi-Tenant SaaS Plugin

13. Open the User Collection Data

Open and add data to the collection that you have bound to your CMS component. As we have bound user collection to the data table, let's add some data to it.

DrapCode Builder Multi-Tenant SaaS Plugin

14. Add User

Click on the Add button and start adding as much data you want to add in it. As you can see in the example below, tenant ID field shows no options. So let's create some tenant rules.

DrapCode Builder Multi-Tenant SaaS Plugin

15. Open Data of Multi Tenant SaaS Collection

Go to Collections and open the data of Multi Tenant SaaS Collection so you can create tenant rules in back-end.

DrapCode Builder Multi-Tenant SaaS Plugin

16. Create Tenant Rules through Back-end

There are two ways to create tenent rules. One way is to through the back-end. So, if you have backend access then open the Multi Tenant collection and create tenant rules directly. In the example shown below, a rule to hide data table in the homepage from users is created.

Remember, permission to Read-Only can be applied on components like button and links.

DrapCode Builder Multi-Tenant SaaS Plugin

17. Create Tenant Rules Through Front-end

The other way to create tenant rules is through the front-end, if you don't have the backend access. So, go to the pages panel and click on the Multi Tenant Dashboard page to open it. It will already contain a collection form as shown below.

DrapCode Builder Multi-Tenant SaaS Plugin

18. Apply the Filter

Open the settings of the "Select" Component of User Roles Field and bind the All Tenant Roles filter that came with multi tenant SaaS plugin.

DrapCode Builder Multi-Tenant SaaS Plugin

19. Fill the Form

Open the Multi Tenant Dasboard page in the preview or publish mode and fill the form to make tenant rules.

DrapCode Builder Multi-Tenant SaaS Plugin

20. Open the Home Page

Once done, open the login page and add credentials for any role you want. As we have created a rule to hide data table from users, we added the user credentials in the example below. And as you can see, after loggining in the data table is not showing as it is hidden for users as per the rule.

DrapCode Builder Multi-Tenant SaaS Plugin