Progress Bar

This article explains the features of the Progress Bar block and how it can be configured to track the completion of fields in your app.

Use Cases

• Field Inspection Tracker: Monitor the progress of form completion during field inspections by tracking responses to checklist questions.
• Incident Reporting: Track the completion percentage of required fields in incident or accident reports.
• Assessments: Show progress to users completing step-by-step assessments.
• Feedback Forms: Indicate the completion status of survey or feedback questions.

Help Video

Adding the Progress Bar Block

The Progress Bar visually represents the completion status of fields in the app. It dynamically updates based on the user’s inputs and helps provide clarity on how much of the form has been completed.

Editing the Block

Click on the Progress Bar block and start editing on the panel that appears on the right side.

Label

The label is the name of the block that the end user sees in the app.
Example: Progress, Form Completion, or Checklist Progress.

‍

Progress Formula

The Progress Formula defines how the progress is calculated based on the fields in your app. You need to manually configure this formula to calculate progress based on the completion of specific fields. Each field can contribute to the progress, and you can use a formula to set how this is calculated.

How to Create a Progress Formula:

1. Each field in the app that contributes to the progress, typically should have a numeric value. For example, if an app has single selector fields, and a multiline text field:some text
   • Single Selector fields (with Yes/No options): If nothing is selected, the value is treated as 0. If an option is selected, the value is treated as 1.
   • Multi-line Text or Number fields: These fields directly contribute based on whether they are filled in or not. A number that has been input can also be directly taken.
2. Use spreadsheet-like formulas to calculate progress:some text
   • Formula Example:

Let’s take 2 single selector fields and 1 multiline text field
(IF({single sel field 1}="",0,1) + IF({single sel field 2}="",0,1) + IF({multiline text 1}="",0,1))/3
This formula adds up the completed fields and divides the total by the number of fields (in this case, 3) to calculate the percentage progress.

Key Points

• What does the formula do?
  It checks whether a field is empty. If the field is empty, it assigns a value of 0; if the field is filled, it assigns a value of 1.
  For example:some text
  • If “single selector field 1” is left blank, its value is 0.
  • If "Yes" or "No" is selected, its value is 1.
• Why is this necessary?
  The Progress Bar needs a formula to determine how much of the form is completed based on user inputs. You need to define how each field contributes to the progress, using field variables and conditions in the formula.
  You can assign greater or lower values to certain fields depending on your requirements by making use of spreadsheet formulas.

Progress Text

You can configure the Progress Text to display a message below the progress bar.
This field does not accept formulas but allows dynamic text insertion using field variables.

Example: You have completed @progress_value out of @total_value steps.

Advanced Options

Advanced Label

The Advanced Label option allows you to change the label of a field dynamically based on a condition you define. Instead of always showing the same fixed label under the ‘Basic’ tab, the field can display different labels depending on requirements of the form. Use spreadsheet-like functions such as IF, AND, OR, etc. and make use of other field variables to set your conditions. Type @ and select the field.

This is useful when the meaning of a field changes based on context, business logic, or user choices.

For example:
If you have a dropdown called Select with options “Onboarding Progress” and “Project Progress”.
The Label should reflect which progress is shown.

Formula:

IF({select} = "Onboarding Progress", "Onboarding Progress", "Project Progress")

This allows the same field to adapt its displayed purpose without needing multiple separate fields.

‍

Advanced Description

The Advanced Description option works exactly like Advanced Label, but it changes the description text instead. This is useful when guidance or instructions for a field need to change depending on earlier answers.

For example, using the same scenario from Advanced Label:
If you have a dropdown called Progress Context with options like “Onboarding” and “Project”, you may want the description of your Progress Bar field to guide the user differently depending on what they selected.

So:
– If the user selects Onboarding, the description could say: “Shows onboarding completion progress.”
– If the user selects Project, the description could say: “Shows project completion percentage.”

Formula:

IF({progress_context} = "Onboarding",  "Shows onboarding completion progress.",  "Shows project completion percentage.")

This helps users understand what is required from them without showing unnecessarily long or irrelevant instructions.

‍

Additional Examples (Apply to Both Advanced Label and Advanced Description)

1. Showing nothing until a selection is made

For example, if you have a dropdown field called Visit Category with options “Routine” and “Urgent”, you may want the label or description of a field to remain blank until the user first selects a category.

Once a selection is made:

• If the user chooses Routine, the field will display “Routine”.
• If the user chooses Urgent, the field will display “Urgent”.

Formula (can be used in either Advanced Label or Advanced Description):

{visit_category}The label/description stays empty until the dropdown has a selected value.
After the user picks an option, the selected text (Routine or Urgent) becomes the label or description.

2. Changing label/description based on language selection

For example, if your form includes a dropdown field called Select Language with options English, Spanish, and French, you can show the label or description in the selected language.

So:

• If the user selects English, show English text.
• If the user selects Spanish, show Spanish text.
• If the user selects French, show French text.

Formula (can be used in either Advanced Label or Advanced Description):

IF({select_language} = "English", "Enter details", IF({select_language} = "Spanish", "Ingrese detalles", "Entrez les détails"))The formula returns the text for the selected language.
Only one label/description is shown at a time, depending on what the user picks in the Select Language dropdown.

‍

Important Notes (applies to both Advanced Label and Advanced Description)

1. Variables do not change
When a field is created, its variable name is derived from the label you set in the Basic tab. That variable name is what you must use in formulas, workflows, and other logic. The visible label or description shown by Advanced Label / Advanced Description does not change the variable name.

2. Submissions tab: table view vs right panel
In the Submissions area, the table view always displays the labels from the Basic tab. When you open an individual submission, the right panel shows the labels and descriptions as they appear in the form (i.e., the Advanced Label and Advanced Description applied for that submission). This keeps the submission list consistent while letting reviewers see the context-aware labels and descriptions when viewing a record.

3. Bulk Edit shows Basic tab labels and descriptions
When you need to Bulk Edit submissions, the spreadsheet you download shows the labels and descriptions from the Basic tab only. Advanced Label and Advanced Description are not applied in Bulk Edit, so keep that in mind when preparing bulk updates.

4. Some fields cannot be used inside Advanced Label/Description formulas
Certain block types do not expose a variable that can be referenced in Advanced Label or Advanced Description. If a block does not expose a variable, you cannot use it inside the formula.

Geo Address

GPS Location

PaymentGateway

Audio

Live Tracking

Signature

Code Scanner

NFC Reader

Get Data from RestApi

Get Data from Other Apps

Get Data from Google Sheets

Get Data from Database

AI Block

Text, HTML & Embedding

Attached Files

Image Viewer

Video Viewer

PFD Viewer

Code block

Progress Bar

Action Button

‍

Display this field if

Use this option to show or hide the field under specific conditions. It accepts the standard Clappia formulae, similar to conditional sections or in the ‘Calculations & Logic’ block.

1. Type @ to get a list of all the fields you have added in the app and select the relevant field or type @ followed by the field name.
2. Use these field variables to write spreadsheet-like formulae for conditional display of the field in the app.

Example: Show the Progress Bar only if a specific section is reached.

Block Width

• Desktop View: Set the width of the Progress Bar in the desktop view. Options are 100%, 75%, 50%, or 25%.
• Mobile View: Set the width in the mobile view. Options are 100% or 50%.

Variable Name

The Variable Name is the unique identifier for the Progress Bar block, automatically generated upon saving. This can be used in formulas or references within the app.

Example: Field Inspection Tracker

Context of the App

A Field Inspection Tracker app is created for safety inspections in a manufacturing plant. The app includes the following fields:

1. Checklist Questions using Single Selector Blocks: Yes/No options to ensure compliance with safety measures.
2. Multi-Line Text Block: To capture additional notes or actions taken during the inspection.

Fields in the App

1. Single Selectors in the App

Field 1

• Label: Has the equipment been inspected for visible wear or damage?
• Options: Yes/No
• Variable Name (after saving): has_the_eq
  
  Field 2

• Label: Are all safety measures in place and functional?
• Options: Yes/No
• Variable Name (after saving): are_all_sa

2. Multiline text Block in the App

• Label: Actions Taken
• Variable Name (after saving): actions_ta

Progress Bar Configuration

1. Progress Formula:
   (IF({has_the_eq}="",0,1) + IF({are_all_sa}="",0,1) + IF({actions_ta}="",0,1))/3
   
   This formula adds a value of 1 for each completed field and divides the total by 3 to calculate the percentage progress.
   
   

Using the Progress Bar

Once the app is live, the Progress Bar dynamically updates as users fill in the form fields. For example:

• If the user selects "Yes" for one checklist question and fills in the multi-line text, the Progress Bar will display 2/3 completed.

If you'd like to display a custom progress description below the Progress Bar, such as "2 out of 3 completed," you can use the Progress Text option in the Progress Bar’s configuration panel. To dynamically calculate the values for progression, a Calculations & Logic block can be used.

Using the same example, the configurations are as follows:

‘Calculations & Logic’ Block:

Label: Progress Value
Formula:  IF({has_the_eq}="",0,1) + IF({are_all_sa}="",0,1) + IF({actions_ta}="",0,1)
Variable (after saving): progress_v
Advanced option > Hidden: Enabled (This is to ensure that this field is not visible in the main app as it is not relevant for users to see).

Progress Bar: 

Progress Text: {progress_v} out of 3 completed.

In App Home, it will look like the below image.