Customizing form step rendering by separating each view on panels or divs

Question

I'm using CraueFormFlowBundle in a development and also I'm using Fuelux Wizard2 for render my wizard. I have managed to change the way the tabs are drawn in CraueFormFlowBundle by overwriting the stepList_content.html.twig template on my app/Resources directory but can't find a way to do the same with the form content itself. The idea from the Wizard component is to draw each step on a separate div as for example:

<div class="step-content">
    <div class="step-pane" data-step="1">
         // first step goes here
    </div>
    <div class="step-pane sample-pane " data-step="2">
        // second step goes here
    </div>
    <div class="step-pane sample-pane" data-step="3">
        // third step goes here and so on
    </div>
</div>

How can I get this working? It's possible?

Answer 1

I use CraueFormFlowBundle in one of my projects. I have one twig template with code like the following:

    {%- if flow.currentStepNumber == 1 %}
        blah blah blah yada yada yada
    {%- elseif flow.currentStepNumber == 2 %}
        blah blah blah yada yada yada
    {%- elseif flow.currentStepNumber ==3 %}
        blah blah blah yada yada yada
    {%- elseif flow.currentStepNumber ==4 %}
        blah blah blah yada yada yada
    {%- endif %}

You obviously need to pass the flow variable from your controller to the template. If using @Template annotation:

return array(
    'form'     => $form->createView(),
    'flow'     => $flow,
);

...where $flow is the service defined in config/services.yml, etc.

$flow = $this->get('your.flow_service');