Home / Questions / 37132
Accepted
bgarcial
Asked: 2020-12-02 13:44:24 +0800 CST 2020-12-02 13:44:24 +0800 CST

django-crispy-forms - Inserting fields in a template

  • 772

I have the following form:

class RehabilitationSessionForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        # user = kwargs.pop('user', None)
        super(RehabilitationSessionForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_input(Submit('submit', u'Guardar'))

    class Meta:
        model = RehabilitationSession

        widgets = {
            'pain_extremity':forms.RadioSelect,
            'upper_extremity':forms.RadioSelect,

        }

        fields = ['patient', 'medical', 'therapist', 'date_session_begin',
                  'upper_extremity', 'pain_extremity','movement_up','movement_down',
                  'movement_left','movement_right',
                  'games','game_levels','iterations','game_observations','patient_behavior',
                  'observations','period','date_session_end', ]

I want to be able to render all these fields in my html template, separately, that is, place each field html divsspecifically.

I am working with django-crispy-forms and bootstrap-3

At the moment, I am rendering the fields in a separate way, using the tag, {{ form.<nombre-del-campo> }}that is, rendering the fields manually in this way:

<div class="row">
    <div class="col-md-2 pacient-pic">&nbsp &nbsp<img class="img-circle " src="{{ sessionedit.patient.user.photo.url }}" alt="User Avatar">  </div> 
        {{ form.non_field_errors }}
    <div class="col-md-3 col-xs-12 col-sm-6">
        <ul class="pacient-ul">
            {{ form.patient.errors }}
            <li><strong>Paciente:</strong>&nbsp {{ form.patient }}  </li>            
       </ul>
    </div>      
    <div class="col-md-4 col-xs-12 col-sm-6">
        <ul class="pacient-ul">
            <li><strong>Terapeuta:</strong>&nbsp {{ form.therapist }}</li>
            <li><strong>Médico:</strong>&nbsp {{ form.medical }}</li>
        </ul>
    </div>
</div>
.
.
And so sucessively more divs and fields

But this makes me lose the effect or the bootstrap styles, because I am not using the class RehabilitationSessionFormthat is where the form is created using some attributes ofcrispy-forms

The result:

My form is displayed without bootstrap-3 css and js effects

enter image description here

How can I render my form using django-crispy-forms?

UPDATE

If I have this in the base design template

<div class="box-body">
    <div class="row">
        <div class="col-md-2 pacient-pic">&nbsp &nbsp<img class="img-circle " src="dist/img/user7-128x128.jpg" alt="User Avatar"></div> 
            <div class="col-md-3 col-xs-12 col-sm-6">
                <ul class="pacient-ul">
                    <li><strong>Paciente:</strong>&nbsp Valentina Sepúlveda</li>
                    <li><strong>D.I:</strong>&nbsp 1037548297</li>
                </ul>
            </div>      
            <div class="col-md-3 col-xs-12 col-sm-6">
                <h4>Sesión N°</h4>
                <h3 class="padding-left">1</h3>
            </div>  
            <div class="col-md-4 col-xs-12 col-sm-6">
                <ul class="pacient-ul">
                  <li><strong>Fecha de inicio:</strong>&nbsp 12/01/1991 - 17:34 hs</li>
                  <li><strong>Terapeuta:</strong>&nbsp Bernardo</li>
                  <li><strong>Médico:</strong>&nbsp Christian</li>
                </ul>
            </div>
        </div>
    </div>

How could I render these fields from the method __init__in the forms.py?

I have tried this:

class RehabilitationSessionForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        super(RehabilitationSessionForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        #self.helper.add_input(Submit('submit', u'Guardar'))
        self.helper.layout=Layout(
            Div(
                FormActions(
                    Submit('save', 'Save changes'),
                    css_class='box-body btn btn-success btn-sm pull-right fa fa-pencil',

                ),
                Div('patient', css_class='col-md-3 col-xs-12 col-sm-6'),
                Div('therapist', css_class='col-md-4 col-xs-12 col-sm-6'),
                Div('medical', css_class='col-md-4 col-xs-12 col-sm-6'),
                css_class='row',

            )
        )

And in my real template where the data arrives or where I paint the form with {% crispy form %}, it looks like this

{% crispy form %}
<div class="box-body">                
    #<!--<div class="row">-->
    <div class="col-md-2 pacient-pic">&nbsp &nbsp<img class="img-circle " src="{{ sessionedit.patient.user.photo.url }}" alt="User Avatar">
    </div> 
    {{ form.non_field_errors }}
    #<!--<div class="col-md-3 col-xs-12 col-sm-6">-->
           <ul class="pacient-ul">
               {{ form.patient.errors }}
               <li><strong>Paciente:</strong>&nbsp </li>
               <li><strong>D.I:</strong>&nbsp {{ sessionedit.patient.identity_document }}</li>
           </ul>
    #<!--</div>-->
   <div class="col-md-3 col-xs-12 col-sm-6">
       <h4>Sesión N°</h4>
       <h3 class="padding-left">{{ sessionedit.id }}</h3>
   </div>  
   #<!--<div class="col-md-4 col-xs-12 col-sm-6"> -->
           <ul class="pacient-ul">
              <li><strong>Fecha de inicio:</strong>&nbsp </li>
              <li><strong>Terapeuta:</strong>&nbsp </li>
              <li><strong>Médico:</strong>&nbsp </li>
           </ul>
   #<!-- </div> -->
   #<!--    </div> end row -->
</div>#<!-- /.box-body -->

In general I kept rendering, but I can't place my css's correctly in the divs for the fields. For now my form is looking like this, in this url you can see that the fields are disorganized, but with the answer given by @German-Alzate-Martinez I am already rendering the fields of my form using django-crispy-formsand sending them from the method __init__in my forms.py.

Only that I have not found the interpretation of how to render each thing.

Any help I appreciate

django

1 Answers

  1. Best Answer

    The django-crispy-forms documentation tells you that you can help render your form fields from the init of your form, like so:

    ...
from crispy_forms.helper import FormHelper
from crispy_forms.layout import Layout, Submit, Div, Field
from crispy_forms.bootstrap import FormActions, StrictButton

class RehabilitationSessionForm(forms.ModelForm):

    def __init__(self, *args, **kwargs):
        # user = kwargs.pop('user', None)
        super(RehabilitationSessionForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper()
        self.helper.form_method = 'post'
        self.helper.add_layout = Layout(
            Div(
                Div('patient', css_class='col-md-4'),
                Div('therapist', css_class='col-md-4'),
                Div('medical', css_class='col-md-4'),
                Div(
                    StrictButton('Submit', css_class='btn btn-primary', type='submit'),
                    css_class='col-md-2'
                )
                css_class='row'
            )
        )     
...

    It should be noted that this is a demonstrative example, and you accommodate the css classes as you like best so that everything fits, you could also omit the last div of the strictbutton, and add a FormActions(Submit('aceptar', 'Aceptar')), then in your template, you just have to call like this ...

    ...
{% load crispy_forms_tags %}

<!--Ubicas tu formulario, dentro de cualquier contenedor de acuerdo a tu diseño-->
{% crispy form %} {% comment %}Solo llamas el formulario asi, y el renderiza con los divs y las clases que usaste {% endcomment %}
...

    I hope I have helped you, any question, do not hesitate to comment

    • 0