phpsymfonycraueformflow

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


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?


Solution

  • 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');