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.
If this is your first time creating an app, you'll need to know some basics about adding objects, fields, pages, and views. You can start by watching our "Introducing Knack" video tour and then working through the articles in our Get Started section.
In this example, you will be creating status indicators to alert you about low inventory levels.
Create an Inventory Object
In the Data 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"
- Note: You can delete the default "Inventory Name" field
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 "Needs Reorder" field 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, add a new page with the following settings:
1. Choose a table view.
2. Call the page "Inventory":
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:
3. Go to the Display Rules tab.
4. Click the Add Rule button:
5. 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"
- 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]
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