| SAIL Design System guidance available for Gauges
What gets measured gets done. So measure what matters with gauges. Learn how to configure and display gauges on your interface designs so you can visualize progress on your most important goals and initiatives. |
a!gaugePercentage( label, labelPosition, instructions, helpTooltip, percentage, primaryText, secondaryText, color, size, align, accessibilityText, showWhen, tooltip )
Displays the configured percentage of the gauge as an integer for use within the gauge field primaryText parameter.
See also: Gauge design guidance
Tip: This component does not require any parameters. It captures the percentage value from its parent gauge and displays that value in the center, rounded to an integer. The below table is just for reference.
| Name | Keyword | Types | Description |
|---|---|---|---|
|
Label |
|
Text |
Text to display as the field label. |
|
Label Position |
|
Text |
Determines where the label appears. Valid values: “ABOVE” (default), “ADJACENT”, “JUSTIFIED”, “COLLAPSED”. |
|
Instructions |
|
Text |
Supplemental text about this field. |
|
Help Tooltip |
|
Text |
Displays a help icon with the specified text as a tooltip. The help icon does not show when the label position is “COLLAPSED”. |
|
Percentage |
|
(Number (Decimal)) |
Number to display between 0 and 100. |
|
Primary Text |
|
Any Type |
Content to display on the first line inside the gauge. Create using plain text, a!gaugeIcon(), a!gaugePercentage(), or a!gaugeFraction(). |
|
Secondary Text |
|
Text |
Optional text to display on the second line inside the gauge. |
|
Color |
|
Text |
Determines the color. Access the percentage using fv!percentage. Valid values: Any valid hex color or |
|
Size |
|
Text |
Determines the size of the gauge. Valid values: |
|
Align |
|
Text |
Determines alignment of the gauge. Valid values: |
|
Accessibility Text |
|
Text |
Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. |
|
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. |
|
Tooltip |
|
Text |
Text to display as a tooltip on the gauge. |
Copy and paste an example into the INTERFACE DEFINITION in EXPRESSION MODE to see it displayed.
Use the interactive editor below to test out your code:
| Feature | Compatibility | Note |
|---|---|---|
| Portals | Compatible | |
| Offline Mobile | Compatible | |
| Sync-Time Custom Record Fields | Incompatible | |
| Real-Time Custom Record Fields | Incompatible | Custom record fields that evaluate in real time must be configured using one or more Custom Field functions. |
| Process Reports | Incompatible | Cannot be used to configure a process report. |
| Process Events | Incompatible | Cannot be used to configure a process event node, such as a start event or timer event. |
The following patterns include usage of the Gauge Percentage.
Percentage of Online Sales (Records, Reports, Formatting): This pattern illustrates how to calculate the percent of sales generated from online orders and display it in a gauge component.
Use the Gauge Fraction and Gauge Percentage Configurations (Formatting, Reports): This recipe provides a common configuration of the Gauge Component using a!gaugeFraction() and a!gaugePercentage(), and includes a walkthrough that demonstrates the benefits of using design mode when configuring the gauge component.
