Skip to content

Show navigation style linear step progress to user

Ben Richardson edited this page Apr 24, 2020 · 1 revision

You can get an array of all steps using:

  wizard_steps

And you can get your current step using:

  step

With these you can build some custom UI around all of the steps available and the current one the user is on.

There are several helper methods included to help you style and customize the experience.

past_step?(step)
future_step?(step)
previous_step?(step)
next_step?(step)

If you have some experience making wizard progress look great, drop me a line and I would love to include it here.

One example:

On helper:

def tutorial_progress_bar
  content_tag(:section, class: "content") do
    content_tag(:div, class: "navigator") do
      content_tag(:ol) do
        wizard_steps.collect do |every_step|
          class_str = "unfinished"
          class_str = "current"  if every_step == step
          class_str = "finished" if past_step?(every_step)
          concat(
            content_tag(:li, class: class_str) do
              link_to I18n.t(every_step), wizard_path(every_step)
            end 
          )   
        end 
      end 
    end
  end
end 

Our view structure looks like this.

<section class="content">
  <div class="navigator">
    <ol>
      <li class="finished">Download
      <li class="current">Task
      <li class="unfinished">Upload
      <li class="unfinished">Questionnaire
    </ol>
  </div>
</section>