A pair of macros allowing the user to add an Atlassian styled progress bar to the page, providing the user with a level of context for the page within a process.

Usage

  1. Go to the form you wish to edit.

  2. Click Edit.

  3. Click Insert More Content, and select Other Macros.

  4. Select the Progress Bar Container macro from the provided list.

    The Macro Browser with the Progress Bar Container macro available.
  5. Complete the desired fields.

    ParameterDescriptionTypeDefaultRequired

    Current Step Number

    Defines which step is currently highlighted within the process.

    int

    none

    ID

    Specifies a CSS ID to be added

    string

    none

    CSS Class

    Specifies a CSS Class to be added

    string

    none

    Title

    Text to display in a tool tip

    string

    none

  6. The macro will then appear on the page.

    The placeholder for a Progress Bar Container macro.
  7. Place the Progress Bar - Hyperlink Step macro inside the Progress Bar Container macro.

  8. Click Insert More Content, and select Other Macros.

  9. Select the Progress Bar - Hyperlink Step macro.

    The Macro Browser with the Progress Bar - Hyperlink Step macro available.
  10. Complete the desired fields.

    Parameter

    Description

    Type

    Default

    Required

    Title

    The name of this step

    string

    none

    URL

    The URL that this step links to

    string

    none

    ID

    Specifies a CSS ID to be added

    string

    none

    CSS Class

    Specifies a CSS Class to be added

    string

    none

  11. The macro will then appear on the page.

  12. Add 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.

    The "Current Step Number" value in the Progress Bar Container macro should be an integer value of the current step, and not the name of the current step.

  13. When saved, an AUI-styled Progress Bar will appear on the page:

    The saved and rendered Progress Bar macro.