Progress Tracker

Summary

A progress tracker guides users through a number of steps across multiple screens in order to complete a task flow. It shows users where they are in the process, and also offers navigation within the process.

Status

API status:	experimental
Included in AUI core?	Not in core You must explicitly require the web resource key.
Web resource key:	`com.atlassian.auiplugin:aui-experimental-progress-tracker`
Experimental since:	5.0

Examples

Default:

Configure instance
Select plugins
Invite users
Confirm

Inverted:

Configure instance
Select plugins
Invite users
Confirm

Code

Soy

{call aui.progressTracker.progressTracker}
    {param steps: [
        [
            'text': 'Step 1',
            'href': '#step1'
        ],
        [
            'text': 'Step 2',
            'href': '#step2',
            'isCurrent': true
        ],
        [
            'text': 'Step 3',
            'href': '#step3'
        ],
        [
            'text': 'Step 4',
            'href': '#step4'
        ],
        [
            'text': 'Step 5',
            'href': '#step5'
        ]
    ] /}
{/call}

Options

Soy is available

/**
 * Progress Tracker
 * @param steps list of the steps to display
 * @param? isInverted boolean - set to true if using on a grey background
 * @param? id
 * @param? extraClasses
 * @param? extraAttributes
 */
 
/**
 * Step in the Progress Tracker
 * @param? isCurrent boolean - set to true if step is the current step
 * @param width number - should be the exact same width as all the other steps to maintain correct visual formatting (can't do this in CSS due to CSS not knowing the number of steps)
 * @param text
 * @param? href
 * @param? id
 * @param? extraClasses
 * @param? extraAttributes
 **/