Progress Bar is a pair of macros that adds visualization and context for all stages of a documented process, making it easier for your users to read and navigate. Start by adding the Progress Bar Container macro then add a Progress Bar Step for each section of the process.

Instructions

Progress Bar Container

  1. Navigate to the page where you want to add a progress bar.

  2. Click Edit.

  3. Click Insert More Content Other Macros.

  4. Select the Progress Bar Container macro from the Macro Browser.

    The Macro Browser with the Progress Bar Container macro available.
  5. Customize the macro using the following parameters. 

    ParameterDescriptionTypeDefaultRequired

    Current Step Number

    Defines which step is currently highlighted within the process. This should be an integer value of the current step, and not the name of the current step.

    int

    none

    (tick)

    ID

    Option to specify a unique ID for this element. If using this parameter to apply styling to the element, do not include the # selector.

    string

    none

    (error)

    CSS Class

    Option to apply a custom CSS class to the element. Enter the CSS class name(s) to apply to the macro (case sensitive); multiple classes can be separated by a space or comma. Do not include the . selector in the class name. Classes must be part of your Global Confluence CSS or defined in a CSS Stylesheet macro that you have added to your page.

    string

    none

    (error)

    Title

    Text to display to users as a tooltip on hover on the progress bar

    string

    none

    (error)

  6. Click Insert. The macro placeholder displays.

Progress Bar Hyperlink Step

  1. Click the Progress Bar Container placeholder added in the previous steps. 

  2. Click Insert More Content Other Macros.

  3. Select the Progress Bar - Hyperlink Step macro from the Macro Browser.

  4. Customize the macro using the following parameters.  

    Parameter

    Description

    Type

    Default

    Required

    Title

    The name of this step, e.g. Welcome

    string

    none

    (tick)

    URL

    The URL or Confluence page that is linked from this step

    (Use the full URL format, e.g. https://www.docs.adaptavist.com, or start typing the name of the required Confluence page to display a list of matching results to select from)

    string

    none

    (tick)

    ID

    Enter a unique identifier for this macro element, if required.

    string

    none

    (error)

    CSS Class

    Enter the CSS Class to be applied to the macro (case sensitive); the class must be defined in a CSS Stylesheet macro on the page, above the Progress Bar macros.

    string

    none

    (error)

  5. Click Insert. The macro placeholder displays inside the container.

  6. Insert a Progress Bar - Hyperlink Step macro to the Progress Bar Container macro for each step required. Note there should be at least as many Progress Bar - Hyperlink Step macros as the Current Step Number parameter in the Progress Bar Container macro.

  7. Save the page. An AUI-styled progress bar displays. The example below is the default AUI-styled progress bar without custom CSS. 
    Progress bar with four steps for a new starter onboarding process

    Test any links to ensure they navigate to the correct page.