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?

CraueFormFlow spits out a new form depending on the selections of previous forms. It seems that this wizard.js requires everything to be known in advance (which it isn't). — keyboardSmasher, Oct 14 '14 at 17:18
@keyboardSmasher not at all, this is just a default example, I can add new steps on the fly programmatically with the wizard just need to know how to render the current step from CraueFormBundle on to the new added step, any advice around this? — ReynierPM, Oct 14 '14 at 17:23

keyboardSmasher · Accepted Answer · 2014-10-14T18:25:08.773

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

edited Oct 14 '14 at 18:25

answered Oct 14 '14 at 18:18

keyboardSmasher

2,661
18
20

Thanks, have sense I'll try later when I get this fixed (BTW can you take a look to [this post](http://stackoverflow.com/questions/26367738/argument-passed-to-function-is-not-an-instance-of-some-class-error) I'm having a problem and can't find where I making the mistake) – ReynierPM Oct 14 '14 at 18:26
it's possible that you share some part of this code where you use `CraueFormFlowBundle`? I'm stucked in some points and after reads once and once the docs and also test by myself I can't advance, so if it's possible I'll be very graceful – ReynierPM Oct 14 '14 at 21:30
@ReynierPM Which part are you stuck on? I'm not sure what I could show that would help you. If I could give advice for testing your app (aside from using xdebug) it would be to use ladybug to dump your objects, like `$flow`. [LadybugBundle](https://github.com/raulfraile/LadybugBundle) – keyboardSmasher Oct 15 '14 at 02:20
well if I understood docs then in each form step the data is persisted to the DB, right? Well my application requires in each step to process and persist the data but also I need to add the ability for users to leave the application in any step and comeback later for end the complete flow, is that possible using this bundle? I'm also testing SyliusFlowBundle and apparently is more easy than this one – ReynierPM Oct 15 '14 at 02:26

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

1 Answers1