SiteGUI Blog
Creating the first application with SiteGUI App Builder: the Task Management app
Nam Nguyen
1718100486

Before we start building your first application with SiteGUI, we'd suggest you review the documentation at https://sitegui.com/docs/sitegui-app-overview to get familiar with SiteGUI's different types of Applications and the App Builder. The application we will build together today is a common application that every business needs to efficiently manage tasks, track progress, and improve team collaboration. That is the Task Management application.

Application Requirements

Creating a task management application for a business involves capturing detailed information about each task to ensure efficient tracking, delegation, and completion. Here are some essential input fields and their values:

- Task Details
  1. Task ID: (Automatically generated)
  2. Title/Label: a text field for the user to enter the title of the task
    • Example: "Prepare Monthly Sales Report"
  3. Task Description: a textarea field to enter the task's detailed information
  4. Attachment: a file select field for uploading/attaching file
  5. Priority: a select field to choose one of the following priority for the task
    • Low
    • Medium
    • High
    • Urgent
  6. Status: a select field to choose one of the following status for the task
    • To Do
    • Scheduled
    • Doing
    • Done
    • Cancelled
- Assignment
  1. Created By (Owner): User selection from a list of staff
  2. Team Members: User selection from a list of staff
- Dates
  1. Due Date
  2. Start Date
  3. Completion Date
  4. Duration: time for completing the task
- Task Dependencies
  1. Dependent Tasks: a lists of dependent/sub tasks  
  2. Linked CRM/ERP/External ID: optional (use SubApps or text field for link)

Application Design

The app (Task_App) is built using the App Builder interface, you can access the interface by choosing App in the menu. We'll explain some key information in the corresponding tab panels below (the tabs are clickable, please do click on each tab to see its content)

App can be handled by Instant App Builder, PHP Class or remote API endpoint
URL-encoded string to update the record when it is ticked e.g: page%5Bstatus%5D=Done
Task management app is an instant app which can be deployed instantly. Its primary users are staff only, the supervisor role is set to Site Managers. Task entries are displayed in Kanban boards and Quick Check ✔️ button is enabled to mark a task as Done/Completed when it is checked.
App should present users with a form to create or edit record. Here you can enable/disable the default inputs or add custom ones
Type
Name
Label
Description
Options
Options
Options
Options
Options
Options
Options
Options
Options
Create task's input fields using standard HTML fields. For the 'owner' field, we'll use a select field with options loaded from Staff Lookup and for the 'members' field, a lookup field is used to lookup for staff members. The owner of the task is not necessary the creator of the task, the creator can actually set any staff as the task owner/creator i.e: a team leader can create tasks for his/her team members and set them as the owners/lead user of those tasks.
When
Operator
Value
              &
                  &
                      &
                                      &
                                                  &
                                                              &
                                                                              &
                                                                                          &
                                                                                                                  &
                                                                                                                      &
                                                                                                                                                          A task can be read or changed by its owner, members and supervisors only. If team members are selected, we'll use the value of this field (which is staff IDs) to set the task accessible/writable by those IDs.

                                                                                                                                                          We can also calculate the duration to complete the task by recording the start/restart/end time when the task is worked on or resumed. We'll use an internal field named i_restart to record the time when the task is resumed after being put on hold.

                                                                                                                                                          Using the Notify Staff action, staff will be notified when a task is updated or assigned to them.
                                                                                                                                                          App
                                                                                                                                                          Alias
                                                                                                                                                          Entry/User
                                                                                                                                                          Listing Style
                                                                                                                                                          To enable communication between team members, a Reply app is added as a SubApp. This app allows team members to add their replies to the task. Besides Reply, Comment (public access), Like and Dislike are other default applications you can add to any apps.

                                                                                                                                                          As each task can be a part of a bigger task and a task can have other sub-tasks, Task application should be added as a SubApp of itself to create infinite levels of tasks.
                                                                                                                                                          document.addEventListener("DOMContentLoaded", function(e){ var myCodeMirror; myCodeMirror = initCodeMirror("#file-template"); document.querySelector("#syntax-mode").addEventListener("click", function(event) { if (this.checked == true) { myCodeMirror.setOption("mode", { name: 'smarty', version: 3 }); } else { myCodeMirror.setOption("mode", { name: 'smarty', version: 3, baseMode: 'text/html' }); } }); document.addEventListener("shown.bs.tab", function(event) { //fix content not fully loaded myCodeMirror.refresh(); }); document.addEventListener("shown.bs.collapse", function(event) { //fix content not fully loaded myCodeMirror.refresh(); }); }); document.addEventListener("shown.bs.tab", function(e){ thisCodeMirror = document.querySelector('#file-template + .CodeMirror').CodeMirror; thisCodeMirror.setOption("mode", { name: 'application/x-httpd-php', }); });

                                                                                                                                                          SiteGUI Apps can utilize the default table, grid and kanban views so no template customization is necessary. Your app will work right away with one of those views. However you are free to customize the templates to fit your app.

                                                                                                                                                          Results

                                                                                                                                                          After the application is created, you can click on the Listing menu at the top, choose Apps and activate your app to use it on your Site. This Task Management application is also available on the SiteGUI Appstore, you can install and customize it for free. Here is the demo of the application.

                                                                                                                                                          #Tutorial, #App Builder