jthi3rry / django-silhouette

Elegant Form Templating for Django
MIT License
13 stars 3 forks source link

Silhouette + Django Multiple form wizard #11

Open fab10m opened 9 years ago

fab10m commented 9 years ago

Hi Thierry,

I'm trying to use silhouette for creating a multiple form-wizard. Do you have any suggestion about the best way to use the Silhouette template for a multiple form wizard?

Regards,

Fabio

jthi3rry commented 9 years ago

Hi Fabio,

It's not a case I had thought of, but using the example at https://docs.djangoproject.com/en/1.7/ref/contrib/formtools/form-wizard/#creating-templates-for-the-forms, your main template could look something like:

{% extends "base.html" %}
{% load silhouette_tags %}
{% load i18n %}

{% block head %}
{% form_media wizard.form %}
{% endblock %}

{% block content %}
<p>Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}</p>
<form action="" method="post">{% csrf_token %}
<table>
{{ wizard.management_form }}
{% form_errors wizard.form %}
{% if wizard.form.forms %}
    {% formset wizard.form %}
{% else %}
    {% form_fields wizard.form %}
{% endif %}
</table>
{% if wizard.steps.prev %}
<button name="wizard_goto_step" type="submit" value="{{ wizard.steps.first }}">{% trans "first step" %}</button>
<button name="wizard_goto_step" type="submit" value="{{ wizard.steps.prev }}">{% trans "prev step" %}</button>
{% endif %}
<input type="submit" value="{% trans "submit" %}"/>
</form>
{% endblock %}

If I had to do it, I'd probably go with a theme, as wizard will be available in the context when rendering the form templates.

So you would add most of the above to silhouette/wizard-form/forms/form.html (copy the base one or simply extend it to add the wizard.management_form output to it and possibly handle formsets), then add the step navigations to silhouette/wizard-form/forms/form_controls.html (same here, you can just extend the base one), and finally output the form in your view template with:

{% extends "base.html" %}
{% load silhouette_tags %}
{% block content %}
    {% silhouette wizard.form theme="wizard-form" %}
{% endblock %}

If you need to add specifics to any of the step forms, you can create a form theme in the silhouette/wizard-form directory (e.g. silhouette/wizard-form/step1_form/fields.html for your Step1Form class, etc. as needed).

I'd be interested to know how it goes. It could be good to add a new wizard tag to do most of this work.

Let me know if you need me to clarify any of the above.

Cheers, Thierry

fab10m commented 9 years ago

Hi Thierry,

I'll try to follow your instructions and I'll let you know how it's gone. Thank you very much for your reply.

Regards, Fabio

2015-06-08 8:33 GMT+02:00 Thierry Jossermoz notifications@github.com:

Hi Fabio,

It's not a case I had thought of, but using the example at https://docs.djangoproject.com/en/1.7/ref/contrib/formtools/form-wizard/#creating-templates-for-the-forms, your main template could look something like:

{% extends "base.html" %} {% load silhouette_tags %} {% load i18n %}

{% block head %} {% form_media wizard.form %} {% endblock %}

{% block content %}

Step {{ wizard.steps.step1 }} of {{ wizard.steps.count }}

{% csrf_token %} {{ wizard.management_form }} {% form_errors wizard.form %} {% if wizard.form.forms %} {% formset wizard.form %} {% else %} {% form_fields wizard.form %} {% endif %}
{% if wizard.steps.prev %} {% endif %}

{% endblock %}

If I had to do it, I'd probably go with a theme, as wizard will be available in the context when rendering the form templates.

So you would add most of the above to silhouette/wizard-form/forms/form.html (copy the base one or simply extend it to add the wizard.management_form output to it and possibly handle formsets), then add the step navigations to silhouette/wizard-form/forms/form_controls.html (same here, you can just extend the base one), and finally output the form in your view template with:

{% extends "base.html" %} {% load silhouette_tags %} {% block content %} {% silhouette wizard.form theme="wizard-form" %} {% endblock %}

If you need to add specifics to any of the step forms, you can create a form theme in the silhouette/wizard-form directory (e.g. silhouette/wizard-form/step1_form/fields.html for your Step1Form class, etc. as needed).

I'd be interested to know how it goes. It could be good to add a new wizard tag to do most of this work.

Let me know if you need me to clarify any of the above.

Cheers, Thierry

— Reply to this email directly or view it on GitHub https://github.com/jthi3rry/django-silhouette/issues/11#issuecomment-109879996 .

fab10m commented 9 years ago

HI Thierry,

I followed your instruction and It seems that all is working fine. For the moment I preferred to put the code of wizard form directly into the view template, because there are only few things that I have not entirely understood. I'm using a global theme and I do not understand whether, in your example, you are referring to a global theme or "form theme". Also I don't understand how to use the form_controls.html. Exactly, what should I write to that file? Finally, what kind of command is "wizard.form"? Is the dot notation for wizard-form?

Regards,

Fabio