Table of Contents

Add Stages to Your App

Lesley Updated by Lesley

Scenario 

You want to add stages into your app. When working through stages in a process, you want to highlight the most useful information for the stage you're currently in.

A great example is a project management app. The project may begin with sales and budget in the planning stage and then focus on milestones and tasks in the production stage.

Requirements

If this is your first time creating an app, you'll need to know some basics about adding tables, fields, pages, and views. You can start by reading our Builder Basics section. 

Other good resources can be found in our About Your Database and Working With Pages sections of the knowledge base.

Steps

In this example, you will be adding stages to a project management app. Those stages will include:

  • Planning
  • In Production
  • Completed

For each stage, you will be focused on a different set of information.

  • In the Planning stage, you'll focus on the budget and rates.
  • In the In Production stage, you'll focus on tasks, hours, and costs.
  • In the Completed stage, you'll focus on summarizing the work done on the Project.

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

Create a Projects Table

In the Data section of the builder, create a table to store your projects.

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

  • The default "Project Name" field (which is automatically added)
  • A multiple choice field called "Status" with the following options:
  • A currency field called "Budget"
  • A currency field called "Hourly Rate"

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)
  • A number field called "Hours"
  • A one-to-many connection field to the Projects table called "Project"
    • The connection field will allow you to link each Task to one Project and allow you to link each Project to multiple Tasks.

Add Summary Fields

Now, go back to the Projects table and add the following fields:

  • A sum field called "Total Hours"
    • This field will sum up the hours from all Tasks connected to a Project
  • An equation field called "Total Costs" with the following equation:
    • {Total Hours} * {Hourly Rate}

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

Create a Projects Page and Grid

In the Pages section of the Builder, create a new page using the Projects table. You'll choose 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

Call the page "Projects":

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, you'll need to hide the following fields because they won't have any information in them yet:

  • Total Hours
  • Total Costs

To hide those fields, you'll use display rules in the details view. 

  1. Click on the details view on the Projects Details page to edit it.
  1. Go to the Rules section of the editor.
  2. Click the Add Rule button:
  1. Add the following display rule:
  • If: "Status" is "Planning"
  • Then:
    • Hide "Total Hours"
    • Hide "Total Costs"
Hide Tasks Grid

You'll also need to hide the Tasks grid on the Project Details page because there won't be any Tasks connected to the project yet.

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

  1. Go to the Rules tab at the top of the Project Details page.
  2. Click the Add Rule button:
  1. Add the following page rule:
  • When: "Status" is "Planning"
  • Action: Hide views
  • Views: Click each view to hide:
    • "Tasks grid"

Prepare the Project Details Page for the In Production Stage

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

Add a Task Form

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

  1. On the Project Details page, click the form view option at the top to add a new form.
  2. Select the "Insert a new Task" option:
Update Page Rule

Now that you've added a new view to the page, you'll need to update the page rule you created in the last step to ensure that the Add Task form doesn't display for projects in the Planning stage.

  1. Go to the Rules tab at the top of the Project Details page.
  2. Edit the existing rule to say:
  • When: "Status" is "Planning"
  • Action: Hide views
  • Views: Click each view to hide:
    • "Tasks grid"
    • "Add Task form"

Prepare the Project Details Page for the Completed Stage

In the Completed stage, you'll focus on the Total Hours and Total Costs for a Project.

Add a Page Rule

You'll need to use a page rule to hide the Add Task form on the Project Details page because there won't be any more Tasks added to a completed Project.

To add a new page rule:

  1. Go to the Rules tab at the top of the Project Details page.
  2. Click the 'Add Rule' button under the first page rule to add another page rule:
  3. Add the following page rule:
  • When: "Status" is "Completed"
  • Action: Hide views
  • Views: Check each view to hide:
    • "Add Task form"
Highlight Summary Fields

So far, all of your changes have been made on the Project Details page. You 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.

  1. Click on the Projects grid view on the Projects page.
  2. Hover over the Total Hours field's column and click the edit pencil icon:
  1. Go to the Display Rules section of the field editor.
  2. Click the Add Rule button:
  3. Add the following display rule:
  • If: "Status" is "Completed"
  • Then: 
    • Set Text Style (click on "B")
    • Set Background Color (choose a light green color from the color picker)

Finally, repeat those steps for the Total Costs field column, and be sure to click the Save Changes button when you're done.

Your Results

Here's how your app will look now:

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

How did we do?

Create a Registration Form with Limited Availability

Store Multiple Images or Files for Individual Records

Contact