Progress Bar

MaestroThe UI design product. + Avalon TemplateThis topic is related to the Avalon Template used in Maestro. | Form Builder | 22.04 This feature was introduced in 22.04.

Maestro comes with the Progress Bar component that allows you to inform a form user of ongoing activity, such as loading customer data. This is crucial in building various user journey flows. This component is available when you use the Avalon Template.

Usage

Open the Palette pane in the Maestro Editor.
Locate the Progress Bar component within the Navigation folder.
Drag the component into the View pane or the Wireframe.
Configure the component's properties via the Properties pane.
Configure the component's styles via the Styles pane.

Properties

The following properties are available to this component:

Display Text

Title Text: Rich Text titleText; This text is used as a title. If the text is not provided, the default {{T[item.id].label}} value is used.
Subtitle Text: Rich Text subtitleText; This text is used as a subtitle. If the text is not provided, the default <h1 ng-bind-html="T[Form.$Pages.currentPage.id].properties.formName">Form Name</h1> value is used.
Note
You can use HTML tags in the Subtitle Text component, for example, <samp>Welcome</samp> to <em>my</em> page!. For more information, see rich text editor.
Additional Text: Rich Text additionalText; This text is used as an additional text.
Help Text: Rich Text helpText; This text is used as a help text

Options

Hide Navigator: Boolean offMenu; A page that is in the flow of the form but not displayed in the menu.

Page View

Hide From Navigator: Boolean hideFromNavigator; A page that is in the flow of the form but not displayed in the Navigator.
Hide From Header: Boolean hideFromHeader; Hide or show the form header (if applicable for the template).
Hide From Footer: Boolean hideFromFooter; Hide or show the form footer (if applicable for the template).
Hide Navigation Buttons: Boolean hideNavigationButtons; Hide or show the navigational buttons.
Hide Menu Button: Boolean hideFromHeader; Hide or show the form menu button.
Page of No Return: Boolean pageNoReturn; The user will not be able to navigate back past this page.

Navigator

Navigator Text: Rich Text; This text will be shown in the Navigator in place of the page label.

Note

We recommend using the Form.showAccessibleAlert(message, expanded [, delay]) method to programmatically make assistive technologies, such as screen readers, notify the user of an event that will otherwise not be announced, such as loading progress, or popup content. For more information, see Maestro API Reference.

Styles

The following styles are available to this component:

Avalon Page

Next, learn about the Save and Close component.

Topics