Content Formatting Macros for Confluence Server and DC

Progress Bar

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.

    prog 01
  5. Complete the desired fields.

    Parameter Description Type Default Required

    Current Step Number

    Defines which step is currently highlighted within the process.

    int

    none

    check

    ID

    Specifies a CSS ID to be added

    string

    none

    error

    CSS Class

    Specifies a CSS Class to be added

    string

    none

    error

    Title

    Text to display in a tool tip

    string

    none

    error
  6. The macro will then appear on the page.

    prog 02
  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.

    prog 03
  10. Complete the desired fields.

    Parameter

    Description

    Type

    Default

    Required

    Title

    The name of this step

    string

    none

    check

    URL

    The URL that this step links to

    string

    none

    check

    ID

    Specifies a CSS ID to be added

    string

    none

    error

    CSS Class

    Specifies a CSS Class to be added

    string

    none

    error
  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:

    prog 04