Skip to content
Home » Editing the Progress Bar sequence

Editing the Progress Bar sequence

Editing the Progress Bar sequence

Take a look at the following 2 progress Bars.

Progress bar anamoly
  • The first progress bar represents the status of a new hire’s onboarding process.
  • The second progress bar represents the status of a task.

 While the first progress bar is perfectly normal, the second progress bar has some sequence issues.

The ideal sequences might have been:

New -> On Hold -> In Progress -> Completed -> Cancelled

OR

New -> In Progress -> On Hold -> Completed -> Cancelled

Let’s configure our progress bar to show the desired sequence.

Start by clicking on the App Settings icon and then clicking the Application Settings option.

Invoke App Settings

Click the App Model option from the menu.

Click App Model

Click the relevant object that contains the desired status property.

Select relevant object/entity

Here you can see where the sequence of the status property is coming from.

Source of anamoly

Now we need to amend the sequence to update our status bar.

New should logically be the first state in the sequence. To make it so, grab the six packs against New and drop it at the top of the values.

Grab and move New option to top

Repeat the process until all values have been rearranged to their desired locations and then click the Save button.

Fix the whole sequence and click Save

Now click the Update App button.

Click Update App button

Click the Confirm button to complete the process.

Confirm app updation

Now the progress bar would show the sequence as set by the user using the above steps.

Progress Bar fixed