Skip to content

Show current wizard progress to user

kenzan100 edited this page Jun 3, 2014 · 12 revisions

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>
Something went wrong with that request. Please try again.