Function: a!progressBarField()
Displays a completion percentage, such as receiving all the necessary approval tasks, completing a certain number of on-boarding processes, or completing a single process. Similar to the Gauge, but with a bar style rather than a circular style.
Name | Keyword | Types | Description |
---|---|---|---|
Label |
|
Text |
Text to display as the field label. |
Instructions |
|
Text |
Supplemental text about this field. |
Percentage |
|
Number (Integer) |
Number to display between 0 and 100. |
Label Position |
|
Text |
Determines where the label appears. Valid values:
|
Help Tooltip |
|
Text |
Displays a help icon with the specified text as a tooltip. The tooltip displays a maximum of 500 characters. The help icon does not show when the label position is |
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
Color |
|
Text |
Determines the color. Valid values: Any valid hex color or |
Visibility |
|
Boolean |
Determines whether the component is displayed on the interface. When set to false, the component is hidden and is not evaluated. Default: true. |
Style |
|
Text |
Thickness of the progress bar. Valid values: |
Show Percentage |
|
Boolean |
Determines whether the progress bar displays the percentage. Default: true. |
Notes
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Thick Progress Bar with Percentage Details in the Instructions
1
2
3
4
5
6
7
8
9
10
=a!localVariables(
local!completedTasks: 143,
local!totalTasks: 150,
a!progressBarField(
label: "Tasks Completed",
instructions: local!completedTasks & " of " & local!totalTasks & " done",
percentage: (local!completedTasks / local!totalTasks) * 100,
style: "THICK"
)
)
Displays the following:
Thin Progress Bar with Color Based on Value
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
=a!localVariables(
local!evals: {
{name: "David Rogers", completedEvals: 6, totalEvals: 14},
{name: "Marigold Brown", completedEvals: 13, totalEvals: 15}
},
{
a!richTextDisplayField(
value: {
a!richTextHeader(
text: {"Evaluations Completed"},
size: "SMALL"
)
}
),
a!forEach(
items: local!evals,
expression: a!progressBarField(
label: fv!item.name,
percentage: tointeger(fv!item.completedEvals)/tointeger(fv!item.totalEvals) * 100,
color: if(tointeger(fv!item.completedEvals)/tointeger(fv!item.totalEvals) * 100 > 60, "POSITIVE", "NEGATIVE")
)
)
})