More from Henry Kim

RSS

Multi-step wizard navigation with Turbo Frames

3020 views

0 comments

                  <%= turbo_frame_tag 'wizard_step' do %>
  <%= render "onboarding/steps/#{@step}", onboarding: @onboarding %>
<% end %>

                  class OnboardingController < ApplicationController
  def update
    @onboarding = current_member.onboarding
    @step = params[:step]

    if @onboarding.update(step_params)
      redirect_to onboarding_step_path(step: next_step(@step)), status: :see_other
    else
      render :show, status: :unprocessable_entity
    end
  end

  private

  def step_params
    params.require(:onboarding).permit(:company_name, :timezone, :role)
  end

  def next_step(step)
    %w[profile preferences done].fetch(%w[profile preferences done].index(step) + 1, 'done')
  end
end

Wizards are often over-engineered with client state machines. With Turbo Frames, I render each step inside a frame, and the “Next” button simply POSTs to update the record and then redirects to the next step URL. If validation fails, I re-render the same step with 422 inside the frame. The outer page (header/sidebar) stays stable, and only the step content swaps. This is great for onboarding flows because you keep everything in Rails forms and validations. I also like to store progress in the DB so the user can resume on another device. The only real design rule is: each step should be a normal resource route and produce bookmarkable URLs.

Henry Kim

More from Henry Kim

Multi-step wizard navigation with Turbo Frames

0 Comments

More from Henry Kim