Table of Contents

Add Status Indicators to Your App

Sarto Jama Updated by Sarto Jama

Scenario 

You want to add status indicators to your app that quickly gauge which processes are on track and which ones are in need of attention.

A great example is tracking inventory levels. You want a quick way to see which inventory items are running low and need to be re-ordered. 

Requirements

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

Other good resources can be found in our designing the database and building pages sections of the knowledge base.

Steps

In this example, you will be creating status indicators to alert you about low inventory levels.

Create an Inventory Object

In the Schema section of the builder, create an object to store your inventory.

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

  • A short text field called "Product"
  • A number field called "On-Hand"
  • A number field called "Minimum Required"
  • A yes/no field called "Needs Reorder"
You can delete the default "Inventory Name" field that's included when you create your Inventory object.

Mark the Inventory That's Low

Currently, the "Needs Reorder" field needs to be manually updated to "Yes." To automate that change, you're going to add a conditional rule to that field. 

  1. Click on the ellipses on the "Needs Reorder" field and select the 'Settings' option to edit it:
  1. Go to the Conditional Rules tab.
  2. Check the box next to "Add conditional rules":
  3. Add the following conditional rule:
  • When: "On-Hand" lower than "Minimum Required"
  • Value: Set to a custom value "Yes"
To choose the "Minimum Required" field for the first part of the conditional rule, use the dropdown arrow next to the last input box to switch from Custom Value to Field Value: 

Create an Inventory Page

In the Pages section of the builder, create a new page. Call the page 'Inventory':

Add a Table view to the page. This table view will display Inventory records:

Add Display Rules to Inventory Table

Now that you have the Inventory table, you can add the status indicators to the table using display rules.

  1. Click on the table to edit it.
  2. Hover over the "Needs Reorder" field column and click the edit pencil icon:
  1. Scroll down to the Display Rules section of the editor and click the 'Add Rule' button:
  2. Make the following changes to the "Needs Reorder" field using a display rule to display status indicators:
  • Change the background color
  • Change the text style to bold
  • Add an alert icon

Here's what the display rule will be:

  • If: "Needs Reorder" is "Yes"
  • Then:
    • Set Background Color [choose a light red/pink color from the color picker]
    • Set Text Style [click the "B" for bold]
    • Display Icon [search for "exclamation" and you'll see the triangle and choose a red color from the color picker]

Your Results

Here's how your app will look now:

Extend This Workflow

  • You can highlight the whole row instead of just one column by adding the display rule to each column on the table
  • Send notification emails for status changes

How did we do?

Add Notification & Reminder Emails to Your App

Contact