django-crispy-forms - Inserting fields in a template

1

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, to locate each field in html divs specific.

I'm working with django-crispy-forms and bootstrap-3

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

<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 causes me to lose the effect or the bootstrap styles, because I'm not using the RehabilitationSessionForm class that is where the form is created using some attributes of crispy-forms

The result:

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

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 __init__ method in the forms.py ?

I 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 arrive or where I paint the form with {% crispy form %} , this is so

{% 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 continued to render, but I can not locate my css's well in the divs for the fields. For now my form is staying 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-forms and sending them from the __init__ method in my forms.py .

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

Any help I appreciate

    
asked by bgarcial 01.12.2016 в 22:44
source

1 answer

0

The Django-crispy-forms documentation tells you that you can help you render your form fields from the init of your form, as follows:

...
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 is clear that this is a demonstrative example, since the css classes you set them as you like most 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 questions, do not hesitate to comment

    
answered by 05.12.2016 / 14:24
source