Gauge Percentage Share Share via LinkedIn Reddit Email Copy Link Print On This Page 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. Function 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 Parameters 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 label Text Text to display as the field label. Label Position labelPosition Text Determines where the label appears. Valid values: “ABOVE” (default), “ADJACENT”, “JUSTIFIED”, “COLLAPSED”. Instructions instructions Text Supplemental text about this field. Help Tooltip helpTooltip 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 percentage (Number (Decimal)) Number to display between 0 and 100. Primary Text primaryText 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 secondaryText Text Optional text to display on the second line inside the gauge. Color color Text Determines the color. Access the percentage using fv!percentage. Valid values: Any valid hex color or “ACCENT” (default), “POSITIVE”, “NEGATIVE”, “WARN”. Size size Text Determines the size of the gauge. Valid values: “SMALL”, “MEDIUM” (default), “LARGE”. Align align Text Determines alignment of the gauge. Valid values: “START”, “CENTER” (default), “END”. Accessibility Text accessibilityText Text Additional text to be announced by screen readers. Used only for accessibility; produces no visible change. Visibility showWhen 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 tooltip Text Text to display as a tooltip on the gauge. Examples To experiment with examples, copy and paste the expression into an interface object. Use the interactive editor below to test out your code: Feature compatibility The table below lists this component's compatibility with various features in Appian. 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. Related Patterns 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. Feedback Was this page helpful? SHARE FEEDBACK Loading...
