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. Go to Plugins
Go to the left toolbar and click on the Plugins options. It will redirect you to the Plugins page that contains all the plugins.
2. 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.
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.
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.
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.
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.
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.
8. Install the Multi-Tenant SaaS Plugin
Go back to the plugins page and find the multi-tenant SaaS plugin. Click the Install button to commence the installation process.
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.
10. Pages to Restrict
The next step is to select the pages to restrict. It means the pages you select will be managed by the multi-tenant plugin. In the example below, Login page and home page is selected. Home page is where multi-tenant restrictions will be applied. You can also create a new page and then select that page here.
11. Creator Roles
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.
12. Tenant Roles
Now select the tenant roles that could access the tenant configuration page. In the example below, user and admin are selected for the tenant roles.
13. Plugin Install
Once you have filled all the fields, click on the install button.
14. 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.
15. 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.
16. 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.
17. 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.
18. 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.
19. 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.
20. 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.
21. Fill the Form
Open the Multi Tenant Dasboard page in the preview or publish mode and fill the form to make tenant rules.
22. 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.