Canvas Envision Knowledge Base 5.10 Help

Progress Bar Gadgets

A progress bar gadget is an interactive object you can insert into Envision documents to display a user's page progress through the document and provide navigation controls for moving to the previous or next page.

The progress bar displays the 3/14 page progress of the Medical Ventilator Assembly Procedure

To work with progress bar gadgets, you should know:

Progress bar gadget UI and behavior

A progress bar gadget consists of the following interactive UI elements:

Interactive UI elements of a progress bar gadget
  1. Previous: a navigation button to go to the previous page in a document. This element is optional and included by default.

  2. Progress bar: a bar that displays how far a user has gone in the document. This element is always included.

  3. Page indicator: a label that displays the number of the current page out of the total number of pages. This element is optional and included by default.

  4. Next: a navigation button to go to the next page in a document. This element is optional and included by default.

A document can have one or more progress bar gadgets. The best practice is to have them on master pages. If there are multiple master pages or users are not allowed to leave the current page without some validation, you can insert progress bar gadgets with different sets of UI elements into the document. A master page or page can have its own progress bar gadget for a specific user case.

Multiple master pages with a progress bar gadget on each

Configuring progress bar gadgets

As a newly created progress bar gadget has the default settings, you can customize them with the Progress Bar Configuration pop-up dialog. If multiple progress bar gadgets are in the document, you should configure each separately. The dialog is for one progress bar gadget only.

The Progress Bar Configuration pop-up dialog for a progress bar gadget

You can configure a progress bar gadget as follows:

The Progress Bar Configuration dialog

The Progress Bar Configuration pop-up dialog provides the following controls to configure a progress bar gadget selected in a document:

The Progress Bar Configuration pop-up dialog with the default settings
Starting Page

A drop-down list, the name of the page from which the progress bar gadget will display the document progress. The default value is the name of the first page of the document.

Show Navigation Buttons

A checkbox to control whether the progress bar gadget will provide (selected) or will not provide (cleared) document users with the Previous and Next buttons. The default value is selected—it will have such buttons.

Show Navigation Range

A checkbox to control whether the progress bar gadget will display (selected) or will not display (cleared) the page indicator. The default value is selected—it will have such an indicator.

Specifying the starting page of a progress bar gadget

To specify the page from which a progress bar gadget will display the document progress:

  1. Select the progress bar gadget.

    A progress bar gadget on the page 11 out of 12
  2. Open the Progress Bar Configuration pop-up dialog.

  3. From the Starting Page drop-down list in the Progress Bar Configuration dialog, select the name of the page from which the progress bar gadget will display the document progress.

    The Starting Page drop-down list in the Progress Bar Configuration pop-up dialog
  4. If necessary, continue configuring the progress bar gadget as discussed in the following sections.

  5. Once done with configuring, click the OK button to save the changes. The dialog disappears, and the progress bar gadget displays the progress from the page you have selected from the Starting Page drop-down list.

    A progress bar gadget on the page 9 out of 10
  6. Verify that the progress bar gadget behaves as expected.

Managing the inclusion of the navigation buttons in a progress bar gadget

To include or exclude the Previous and Next buttons in a progress bar gadget:

  1. Select the progress bar gadget.

    A progress bar gadget with the Previous and Next buttons
  2. Open the Progress Bar Configuration pop-up dialog.

  3. In the Progress Bar Configuration dialog, click the Show Navigation Buttons checkbox, either:

    The Show Navigation Buttons checkbox in the Progress Bar Configuration pop-up dialog
    • Select the checkbox to include the navigation buttons in the progress bar gadget.

    • Clear the checkbox to exclude the navigation buttons from the progress bar gadget.

  4. If necessary, continue configuring the progress bar gadget as discussed in other sections.

  5. Once done with configuring, click the OK button to save the changes. The dialog disappears, and the progress bar gadget includes or excludes the Previous and Next buttons according to your settings of the Show Navigation Buttons checkbox.

    A progress bar gadget without the Previous and Next buttons
  6. Verify that the progress bar gadget behaves as expected.

Managing the inclusion of the page indicator in a progress bar gadget

To include or exclude the page indicator label in a progress bar gadget:

  1. Select the progress bar gadget.

    A progress bar gadget with the page indicator label
  2. Open the Progress Bar Configuration pop-up dialog.

  3. In the Progress Bar Configuration dialog, click the Show Navigation Range checkbox, either:

    The Show Navigation Range checkbox in the Progress Bar Configuration pop-up dialog
    • Select the checkbox to include the page indicator label in the progress bar gadget.

    • Clear the checkbox to exclude the page indicator label from the progress bar gadget.

  4. If necessary, continue configuring the progress bar gadget as discussed in other sections.

  5. Once done with configuring, click the OK button to save the changes. The dialog disappears, and the progress bar gadget includes or excludes the page indicator label according to your settings of the Show Navigation Range checkbox.

    A progress bar gadget without the page indicator label
  6. Verify that the progress bar gadget behaves as expected.

Testing progress bar gadgets

To verify a progress bar gadget as an end-user:

  1. Verify that the progress bar gadget displays the progress from the correct starting page.

    Verifying that the progress bar gadget displays the progress from the correct starting page
  2. Verify that the visibility of the Previous and Next buttons is correctly set.

    A progress bar gadget without the Previous and Next buttons
  3. Verify that the visibility of the page indicator label is correctly set.

    A progress bar gadget without the page indicator label
19 June 2025