ProgressIndicator control

Article
11/03/2022

A control used to create a loading experience.

Note

Full documentation and source code found in the GitHub code components repository.

ProgressIndicator control.

Description

Progress indicators are used to show the completion status of an operation lasting more than two seconds. If the state of progress can't be determined, use a Spinner or use the Indeterminate Indicator type instead. Progress indicators can appear in a new panel, in a flyout window, under the UI that initiated the operation, or they can even replace the initiating UI as long as the UI can return if you cancel or stop the activity.

This code component provides a wrapper around the Fluent UI ProgressIndicator control for use in canvas & custom pages. See component documentation for best practices.

Properties

Key properties

Property	Description
`Label`	Optional label for spinner.
`Percentage Complete`	Percentage of the operation completed, on the scale of 0 to 1. If not set Indeterminate Indicator will be shown.
`TypeOfIndicator`	Specifies the type of indicator style. Choices: `Default Indicator` or `IndeterminateIndicator`
`HideProgressState`	Specify true to hide progress state
`BarHeight`	Specify height of the bar as applicable

Style properties

Property	Description
`Theme`	Accepts a JSON string that is generated using Fluent UI Theme Designer (windows.net). Leaving this blank will use the default theme defined by Power Apps. See theming for guidance on how to configure.
`AccessibilityLabel`	Screen reader aria-label

Behavior

Display loading progress

Make the ProgressIndicator control itself (or the surface it's located within) visible when a process begins, then update a variable with the value as segments of the process are completed. Hide it when the process is complete. Use a variable to control the visibility of the control, and update the values between the major code blocks of the process that need to be indicated.

UpdateContext({ var_showProgress: true , var_progressValue: 0 });

/* Some code ... */

UpdateContext({ var_progressValue: 25 });

/* Some code ... */

UpdateContext({ var_progressValue: 50 });

/* Some code ... */

UpdateContext({ var_progressValue: 75 });

/* Some code ... */

UpdateContext({ var_progressValue: 100 });

Notify("Successfully completed process", NotificationType.Success);

UpdateContext({ var_showProgress: false });

Provide the var_showProgress variable as the value for the Visible property of the ProgressIndicator (or the surface containing it), and assign the var_progressValue variable for the Value property.

Limitations

This canvas component can only be used in canvas apps and custom pages.

Share via