Add Status Indicators to Your App

Use Case 

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 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 creating status indicators to alert you about low inventory levels.

Create an Inventory Table

In the Data section of the builder, create a table 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" 

 

Note: You can delete the default "Inventory Name" field that's included when you create your Inventory table.

 

 
 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:


2. Go to the Conditional Rules tab.

3. Check the box next to "Add conditional rules":

4. Add the following conditional rule:

  • When: "On-Hand" lower than "Minimum Required"

  • Value: Set to a custom value "Yes"

Note: 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. Name the page "Inventory":

 

Add a Grid view to the page. This grid view will display Inventory records: 

 

Add Display Rules to Inventory Grid

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

  • Click on the grid to edit it.

  • Hover over the "Needs Reorder" field column and click the edit pencil icon:


  • Scroll down to the Display Rules section of the editor and click the "Add Rule" button:

  • Make the following changes to the "Needs Reorder" field using a display rule to display status indicators:

  1. Change the background color

  2. Change the text style to bold

  3. Add an alert icon

 

Here's what the display rule will be:

  • If: "Needs Reorder" is "Yes"

  • Then:

    • Set the Background Color [choose a light red/pink color from the color picker]

    • Set the 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 grid.

  • Send notification emails for status changes.