Adding Stages to Your App

This article aims to guide you through the process of implementing a workflow to an app that involves adding stages for project management.

Use Case

If you would like to incorporate stages into your application, it is important to emphasize the most relevant information for the current stage of the process.

A great example is our project management sample app. The project initially involves sales and budgeting during the planning stage, and then shifts its focus to milestones and tasks during the production stage.

Requirements

Steps

In this example, we will guide you through the process of adding stages to a project management app. These stages will include:

• Planning

• In Production

• Completed

For each stage, we will be focused on a different set of information:

• In the Planning stage, we'll focus on the budget and rates.

• In the In Production stage, we'll focus on tasks, hours, and costs.

• In the Completed stage, we'll focus on summarizing the work done on the Project.

All the information will be available on a single project details page, but we'll use display rules and page rules to display only the information relevant to the Project's current stage.

Step 1:  Create a Projects Table

Create a table in the Data section of the builder to store your projects.

For this example, you'll need the following fields:

• The default "Projects Name" field which is automatically added when creating your table.

• A multiple-choice field called "Status" with the following options:

  • Planning (make this the default option)

  • In Production

  • Completed

• A currency field called "Budget".

• A currency field called "Hourly Rate".

Step 2:  Create a Tasks Table

Create a table to store all your Tasks.

For this example, you'll need the following fields:

• The default "Task Name" field which is automatically added when creating your table.

• A number field called "Hours".

• A one-to-many connection field to the Projects table called "Project".

  • The connection field enables you to establish a link between each Task and a single Project, while also allowing you to connect multiple Tasks to each Project.

  

Step 3:  Add Summary Fields

Next, navigate back to the Projects table and include the following fields:

• A sum field called "Total Hours"

  • This field will calculate the total number of hours from all the tasks that are connected to a project.

  • The "Field to sum" that you will select in the field's setting will be "Task (Project) > Hours". At this stage of the building process, this should be the only field that is available for selection.

• An equation field called "Total Costs" with the following equation:

  • For the Equation type, select "Numeric".

  • Equation Editor: {Total Hours} * {Hourly Rate}

These fields will be used to summarize the results of a completed Project:

Step 4:  Create a Projects Page and a Grid View

Create a new page in the Pages section of the Builder using the Projects table. Select a grid view that includes:

• A link to view more details on each Project

• A form for editing each Project

• A grid that displays Tasks connected to each Project

We can name the page "Projects": 

Step 5:  Prepare the Project Details Page for the Planning Stage

In the Planning stage, you'll focus on viewing the details of the Budget and Hourly Rate for a Project.

Hide Summary Fields

On the Project Details page, it is necessary to hide the following fields as they will not contain any information at this stage.

• Total Hours

• Total Costs

To hide those fields, you'll use display rules in the details view. To edit the details view on the Projects Details page, simply click on it or select the pen icon as seen in the image below:

• Navigate to the "Rules" section of the editor.

• Select the "Add Rule" button.

• Add the following display rule:

  • If the following rules match: "Status" is "Planning"

  • Then:

    • Hide "Total Hours"

    • Hide "Total Costs"

Hide Tasks Grid

Additionally, it is important to hide the Tasks grid on the Project Details page since no Tasks will be connected to the project at this stage.

To hide the Tasks grid, we'll use a page rule. 

• Navigate to the "Rules" tab at the top of the Project Details page.

• Select the "Add Rule" button:

• Add the page rule with the following selections:

  • When the following criteria is true: "Status" is "Planning"

  • Run the following action: Hide views

  • Select which views to hide: "Task"

Step 6:  Preparing the Project Details Page for the In Production Stage

In the "In Production" stage, we'll focus on viewing the details for tasks, hours, and costs for a Project.

Add a Task Form

Since we're focusing on tasks at this stage, we'll want to add a form for adding new tasks to the Project. 

• On the Project Details page, select the form view option after selecting the "Add View" button.

• Select the the Tasks table for "What record will this form submit?".

Update the Page Rule

Now that we have added a new view to the page, it is important to update the page rule we created in the previous step to ensure that the Add Task form is not displayed for Projects in the Planning stage.

• Navigate to the "Rules" tab at the top of the Project Details page.

• Edit the existing rule with the following selections:

  • When the following criteria is true: "Status" is "Planning"

  • Run the following action: Hide views

  • Select which views to hide:

    • "Task"

    • "Add Task"

Step 7:  Preparing the Project Details Page for the Completed Stage

During the Completed stage, your attention will be directed towards the Total Hours and Total Costs for a Project.

Add a Page Rule

To ensure a completed Project remains organized, we can utilize a page rule to hide the "Add Task" form on the Project Details page. Since there won't be any more Tasks added at this stage, this will help maintain the project's final status.

Add a second page rule with the following selections:

• When the following criteria is true: "Status" is "Completed"

• Run the following action: Hide views

• Select which views to hide:

  • "Add Task"

Step 8:  Highlight Summary Fields

So far, all of our changes have been made on the Project Details page. We can also highlight the information for a specific Project on the Projects page.

In this stage, you can highlight the summary fields for a completed Project by changing the text style and color of the "Total Hours" and "Total Costs" fields.

• Select the Projects grid view on the Projects page.

• Hover over the Total Hours field's column and select the edit pen icon:

• Navigate to the Display Rules section of the field editor.

• Select the "Add Rule" button:

• Add the following display rule:

  • If the following rules match: "Status" is "Completed"

  • Then: 

    • Set Text Style: "B"

    • Set Background Color: (We'll select a green color for this example.)

Your Results

This is how your app will appear after following the steps mentioned above:

Extend this Workflow

• Send email notifications to users when a record moves to a new stage.

• Add a filter menu to the Projects grid to see all the Projects within each stage more easily.