Dynamic progress indicator

advanced-prototyping

#1

Hi there, first post.
I would like to achieve something efficient and clever but I don’t know if it is achievable.
Any help or advice is much appreciated.

In Axure 9.0.0.3740 I would like to make a dynamic progress indicator that appears on each page.

The indicator shows the user not only which section of the journey they are in but also which step within the section, each having its own page in the file.
Some sections might have only one step.
No part of the progress indicator is user clickable.

Steps within a section are shown with text e.g. Step 1 of 5

Sections have three types of styling.
• Current step, which has bold text, its own icon and its own background colour;
• To Do step, which has regular text, its own icon and has the same background colour as the Done step;
• Done step, which has regular text, its own icon and has the same background colour as the To Do step.

Here are three very basic examples.

Progress — Step 1 of 2
:black_circle: 1. Get started
:white_circle: 2. Section Two
:white_circle: 3. Section Three
:white_circle: 4. Section Four

Progress — Step 2 of 2
:black_circle: 1. Get started
:white_circle: 2. Section Two
:white_circle: 3. Section Three
:white_circle: 4. Section Four

Progress — Step 1 of 10
:heavy_check_mark: 1. Get started
:black_circle: 2. Section Two
:white_circle: 3. Section Three
:white_circle: 4. Section Four

I am wondering if the solution to this is to have a Master, populated by a Repeater, and each page of the file has Page Loaded variables that instruct the progress indicator how to look?

Many thanks!


#2

Using a repeater is enough, you use the data in the repeater to control the icon dynamic panel, which has 3 states. Using conditional logic to represent the state of the repeater icon dynamic panel is very simple and quick!


Step.rp (2.3 MB)

More totorial at AxureBoutique


closed #3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.