Building Multi Tenant SaaS Web App

 

 

This article focuses on creating a multi-tenant SAAS application where multiple tenants or accounts will use the same software without sharing any data. So we will step by step show you how to create a multi-tenant employee directory app using DrapCode where multiple companies can create their account, add their employee details and easily manage their data by keeping it secure.  

Let’s get started!

1. Create a Blank Project

Click on the “Add authentication in your application” button and choose the default security settings or customise it. Then add collections if you want. For example, “Organisation” & “Employee”as shown in the example below. Once done, start building.

2. Create Collections 

After landing on the builder console, start by creating the database via "Collections". So go to the collections panel and start creating required collections. Then, add fields in it as per your requirement.

If you have created collections during the on-boarding process, then complete them by adding fields.

3. Create & Design Pages

Go to the pages tab and click the create button to create Organisation Dashboard, create employee page, etc. Once done, open the roles collection and edit the default user to “Organisation Manager”. You can add more roles if you want.

Remember to use snippets (a reusable component) while designing the pages. Also add a collection form to gather employee information.

4. Create Events

Go to the events tab and click the Add Event button. You will be redirected to the create event page. Here name the event and add the Save Data event. Also, add Show Alert Message and Page Redirect events.

5. Bind the Event

Go to the “Create Employee” page and open the collection form layer. Then open its settings and bind the event so that collection form can collection and save data in the database. 

6. Set Up the Login/Sign Up Flow

• Create Pages

Create two new pages for Organisation Sign Up. Then add a button in the landing page to go to the create an organisation page. Also, drop a collection form in the Organisation Sign Up (Step -1) page to create an organisation. 

• Create & Edit Events

Go to the events tab and create a Save Data event. Also add Page Redirect event action to it so that after successfully creating an organisation, the user can land up on the organisation sign up (step-2) page. 

Once the event is created, bind it to the collection form previously created.

Then, Add Sign Up Form in the Organisation Sign Up (Step-2) page and open the SignUp/Register event. In this event, remove the “Send Dynamic Email” event action and add the user role of “Organisation Manager” in the “Sign Up User” event action. Also, edit the default success and error messages in the “Show Alert Message” event action. Then add the “Page Redirect” event action to the Login page.

7. Bind the Collection to the Page

Open the Organisation Sign Up Step 2 page, go to the settings of the page and bind the “Organisation” collection to it so you can use the data of the collection in the page.

Once done, make the “Organisation” field in the sign up form hidden after binding its input field to the Organisation collection.

8. Edit the Login Event

Open the Login event and select “Organisation Manager” in the user role. Also select “Organisation Dashboard” in the page field. So that after logging in, the user lands on the Organisation dashboard.

9. Add a Link

Drop a link component in the Organisation Dashboard page and link it to the “Create Employee” page.

10. Create Filters

Go to the collections tab, open the Organisation collection and add filters in it. Adding filters will make your multi-tenant. Once the filter is created, apply it on the data table in the organisation dashboard page.

Now, publish or open your web app in the preview and check the whole workflow. You can also check out the video above for better understanding.