Skip to main content

Multi Tenant Plugin Introduction

In this video tutorial you will understand how to create a multi tenant SaaS application in DrapCode.

1. Login to your Account​

Login to your account and Create a Blank Project then name your project and choose Create Project. In the next step Add Authentication to your application. You can choose any role and click Pocedd: Add Collection. You can add plugins ow or at a later stage and start to build your app.

DrapCode Builder Multi-Tenant SaaS Plugin

2. Create a Collection​

Create a tenant collection and other subsequent collections for it with a list of records. Define the fields as to what kind of data is needed. You can simply work on the fields as all fields are mapped automatically and you can work on the fields already available.This is a persistent collection. This means it will be saved locally.

If you haven’t created your collection yet, Click Here

DrapCode Login Form

3. Install Plugin​

Go to Plugins and look for Multi Tenant Plugin and select it.

DrapCode Login Form

3.1 Mention the Collection​

Mention the tenant collection and details of it that you want to be displayed everytime it is referred to and click Install Plugin. A pop-up will appear explaining the process, now you can click Proceed.

DrapCode Login Form

4. Add Permission​

Go to Pages and give permission to display all data from the Access To option and click Update.

DrapCode Login Form

5. Drop a Data Table​

Go to Components and drop a Data Table to display all tenant data. In its settings choose Get Data from Collection the collection and the filter for tenant data. Then Save the changes.

DrapCode Login Form

Create a button to estanlish a link between the Home page and Login. Open the button Settings and choose the page to link and Save.

DrapCode Login Form

7. Create an Event​

Create an event to bind login. For this go to Events and Add Event. Name your event and click Create. Here choose Log the User In and Edit.

DrapCode Login Form

7.1 Add Event Details​

In the pop-up that appears mention the role, page and notification message (optional) and choose Update

DrapCode Login Form

8. Preview the Changes​

Click Preview and add login details and click and it would take to the specified data of the logged in user.

DrapCode Login Form

9. Create an Event to Bind the Page​

Create an event to bind login. For this go to Events and Add Event. Name your event and click Create. Here choose Collection and Save Data.

DrapCode Login Form

9.1 Add Event Details​

In the pop-up that appears mention collection and notification message (optional) and choose Save

DrapCode Login Form

9.2 Page Redirect​

Now choose Navigation to Page Redirect.

DrapCode Login Form

9.3 Add Event Details​

Choose the page to redirect to and Save.

DrapCode Login Form

10. Bind the Event​

Go to the Page and open the Settings of the Collection Form. Here Link the event by choosing it from the dropdown and Save the changes.

DrapCode Login Form

11. Test the Event​

Click Preview and choose the button to test the event and Submit the details. It will create the category and redirect to the page.

DrapCode Login Form

12. Create a Page​

Just like before create the Pages for employees to be able to view data related to them only. In the dropdown copy from the existing pages so you do not have to redesign the new page and click Create.

DrapCode Login Form

13. Create an Event for New Tenant User​

Create an event to create a new user for tenant. For this go to Events and Add Event. Name your event and click Create. Here choose Multi Tenant and Create & Add User to Tenant.

DrapCode Login Form

13.1 Add Event Details​

In the pop-up that appears mention the user and notification message (optional) and choose Save

DrapCode Login Form

14. Bind the Event​

Go to the Page and open the Settings of the Collection Form. Here Link the event by choosing it from the dropdown and Save the changes.

DrapCode Login Form

15. Test the Event​

Click Preview and choose the button to test the event and Submit the new user details.

DrapCode Login Form

16. Create an Event to Add Existing User to Tenant​

Create an event to add an existing user to tenant. For this go to Events and Add Event. Name your event and click Create. Here choose Multi Tenant and Add User to Tenant.

DrapCode Login Form

16.1 Add Event Details​

In the pop-up that appears mention the notification message and choose Save

DrapCode Login Form

17. Bind the Event​

Go to the Page and open the Settings of the Collection Form. Here Link the event by choosing it from the dropdown and Save the changes.

DrapCode Login Form

18. Test the Event​

Click Preview and choose the button to test the event and Submit the existing user details.

DrapCode Login Form

19. Create an Event to Switch Tenant​

Create an event to switch tenant. For this go to Events and Add Event. Name your event and click Create. Here choose Multi Tenant and Switch User Tenant.

DrapCode Login Form

19.1 Add Event Details​

In the pop-up that appears mention the notification message (optional) and choose Save

DrapCode Login Form

20. Drop a Component​

You can go to Components and drop a Switch Tenant component and name it as you prefer. Then Save the changes to easily execute this action.

DrapCode Login Form

21. Preview the Changes​

Click Preview and login with the user details habdling multiple tenants and Submit. It will display the tenants as per the use case.

DrapCode Login Form