Build an Employee Expense Reimbursement Workflow Application

This article focuses on creating an expense reimbursement workflow application where employees can create invoices for reimbursement and managers can reject or approve them.

Let’s get started!

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, “Expense” as shown in the example below. Once done, start building.

Add Fields in the Collections

After landing on the builder console, first complete the collections created while on-boarding by adding fields to it. So open the “Expense” collection and add fields to it.

Then open the role collection and add new roles to it, i.e. Manager & Employee. Also, add a text field to add full name in the User collection.

Create & Design Pages

Go to the pages tab and click the create button to create Employee Dashboard, Manager Dashboard, Create Expense page and Approve & Reject Expense page. Once done, design the pages by dropping different components.

Also, remember to use snippets (a reusable component) while designing the pages. Also add a collection form on the Create Expense page to gather expense information.

Create Events

Open the events and create a Save Data event. Also, add Show Alert Message and Page Redirect events.

Once the event is created, bind it to the collection form on the Create Expense page.

Design the Manager Dashboard & Approve/Reject Page

Open the Manager Dashboard page and add a navbar and a data table to it. Then open the Approve & Reject Expense page, add a navbar and a collection form to it and bind the expense collection to it. 

Create Events to Approve & Reject Claims

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 Update Data event. Also, add Show Alert Message and Page Redirect events.

Once done, bind the event to the collection form on the Approve & Reject Expense page.

Login/Sign Up Flow

Edit the Login Flow

Open the Login event and make the user role of employees to land on the employee dashboard and managers to land on the manager dashboard page.

Edit the Sign Up Flow

Open the SignUp/Register event, remove the “Send Dynamic Email” event action and add the user role of “Employee” in the “Sign Up User” event action. Also, add the “Page Redirect” event action to the Login page.

Create Users

Open the User collection and add data to it.