Building a Task Management App with NextAppFast

A Comprehensive Guide

From Concept to Deployment

Steps to build Task Management app with NextAppFast:

1. Identify and Create Models
2. Create UI by adding Route
3. Preview running app
4. Download codebase and run it locally

Contents

• Introduction
• Creating the Application
• Defining the Models
• Configuring the User Interface
• Configuring the Routes
• Testing the Application
• Conclusion

Introduction

In this tutorial, we will walk through the step-by-step process of building a simple task management application, called TaskFast using the NextAppFast platform. The app will allow users to create and manage multiple projects, and within each project, they can create and track tasks with different status levels, such as Open, Planned, In Progress, and Done.

Creating the Application

Create App UI

1. On the Builder tab, click + Create App and enter the following details in the Create App dialog:
   • Name of your application: TaskFast
   • App Type: Internal Tool/Business App
2. Click Create to generate the starter project with the basic tables, user, password, role, right, roleRight, and userRole.

Defining the Models

Project Model

Add Model UI

1. Click on Add Model and enter the following details in the Add Model dialog:
   • Model Name: Project
   • Add Audit Columns: Check
   • Add two fields:
     • projectName
     • projectDescription
2. Click Save to create the project table.

Task Model

Add Model UI

1. Click on Add Model and enter the following details in the Add Model dialog:

   • Model Name: Task
   • Add three fields:
     • taskName
     • taskDescription
     • taskStatus

2. Click Save to create the task table.

3. Establish the relationship between the project and task tables by dragging the taskId field from the task table and dropping it onto the project table. This will create a one-to-many relationship, where a single project can have multiple tasks.

4. Add Audit Fields to the task table by clicking on the ⋮ more menu on the task table and selecting + Audit Fields. This will create four audit fields to track who created the record, when it was created, who last updated the record, and when.

Final Model UI

Configuring the Routes

Add Route UI

Project Task Routes UI

1. Click on Add Route and enter the following details in the Add Route dialog:

   • Template: Card List + Detail Form
   • Model: Project

2. Click Save to add the Project List and Project Form routes.

3. Click on the Project List route. In the Components tab, drag Board and drop it below Card. In the Add Related Item dialog, select Task as the Related Item and click Save. This will add the Task as a related item (child) that can be navigated from the parent Project.

4. Go to the Task List route and click on Board Groups. In the Properties pane, click the Group Field selector and select Task Status. This will group the tasks on the kanban board based on their status.

5. Configure the group labels and field conditions for each status:

   • Open: Group Label = "Open", Condition = taskStatus equals "Open"
   • Planned: Group Label = "Planned", Condition = taskStatus equals "Planned"
   • In Progress: Group Label = "In Progress", Condition = taskStatus equals "In Progress"
   • Done: Group Label = "Done", Condition = taskStatus equals "Done"

6. Navigate to the Task Form route and make the following changes:

   • Change Task Description to Multi Line Text (Select Type)
   • Hide Project Name (Check Is Hidden)
   • Move Task Status next to Task Name
   • Change Task Status type to Select List
   • Configure the Select List Values: Open, Planned, In Progress, and Done. Also Check No Empty Options.
   • Set Is Required to Check for Task Name and Task Status

What we did was make Task Name and Task Status required fields, and hide the Project name picker as app knows what project user is on (based on the nested route segments)

Running the Application

1. Go back to the Routes and click Run App.
2. In the App Preview, the Project menu will be pre-selected. Click Add to create a new project called "Expense Manager".
3. To add tasks, click on the Task > link. This will bring up the Tasks Kanban board. Click Add to create a new task with the following details:
   • Task Name: Create Project
   • Task Status: Open
4. Click Add to add the task to the project.
5. Drag the task from the Open column to the Planned column to update its status.

Conclusion

In this tutorial, you have learned how to create a simple task management application using the NextAppFast platform. You have defined the models for projects and tasks, configured the routes and user interface, and tested the application by creating a new project and adding tasks. Feel free to further customize and expand the application to suit your specific needs.