btc-flex-forms

=================================================== BTC Flex Forms

Some form mixins, styles and scripts for fast form development.

Detailed documentation is in the "docs" directory.

Quick start

1. Add "flex_forms" to your INSTALLED_APPS setting like this::

   INSTALLED_APPS = ( ... 'flex_forms', )

2. Add static files css::

3. Classes for usage: StaticFieldset designed for rendering only static fieldsets::

   Usage: when you need to display arbitrary static information on the page.

   For example:

   In view:

   static_data = StaticFieldset(model_1=some_model, model_2=another_model)

   In form:

   grid = { ['field_1', 'field_2'], # etc. ... } field_1 = StaticFlexField(label='Data 1', help_text='Field 1') field_2 = StaticFlexField(data='Some data', label='Data 2')

   def init(*args, **kwargs) self.model_1 = kwargs.pop('model_1', None) self.model_2 = kwargs.pop('model_2', None) super().init(*args, **kwargs) self.static_fieldset['field_1'].data = self.model_1.field_1 + self.model_2.field_1 ...

4. StaticModelFieldset::

   Usage: when you need to display static information on a page based on model data.

   For example:

   In view:

   my_model = get_object_or_404(MyModel, pk=self.kwargs.get('pk')) static_model_data = StaticModelFieldset(instance=my_model)

   In form:

   Support is for StaticFlexField only.

   grid = { '_1': ['model_field_1', 'model_field_2'], '_2': ['separate_static_field'], # etc. ... } separate_field = StaticFlexField('This is a static field') # only static fields can be defined.

5. MixedFlexForm::

   Usage: when you need to display multiple forms on a page with a mixed arrangement of fields.

   For example:

   In view:

   mix = MixedFlexForm([form_1, form_2, formset_1]) # form_1, form_2, formset_1 - must be are flex too!

   In form: static field from the form_2

   grid = { / '_1': ['form_1_field_2', 'form_2_static_field_1', [formset_1_field_1, form_1_field_1]], '_2': ['separate_field', 'form_1_field_3', 'separate_static_field'], # etc. ...
   } field defined below (non-forms field)

   You can define separate non-forms fields and specify them in grid.

   separate_field = forms.CharField() separate_static_field = StaticFlexField('This is a static field')

   If you use prefixes for forms (this will be needed if the forms have the same field names (formset)),

   you must specify fields with prefixes:

   grid = { ['form_1_prefix-form_1_field_2', 'form_2_prefix-form_2_field_1'], # etc. ... }

6. FlexForm, FlexModelForm designed for rendering good known django forms - Form, ModelForm with flex layout::

   class CustomFlexForm(FlexForm):

    grid = {
        'Fields': ['field_1', 'field_2'],
        'New row': ['field_3'],
        'Controls': ['button'],
        ...
    }
   
    field_1 = forms.MultipleChoiceField(
        label='Fruits?',
        choices=(('0', 'Apple'), ('1', 'Mango')),
        widget=forms.CheckboxSelectMultiple(attrs={
            'field_group_class': 'checkbox-as-button checkbox-as-row',
        })
    )
   
    # static fields support
    field_2 = StaticFlexField(
        data='Example', label='Example', help_text='Example')
    )
    field_3 = StaticFlexField(data='Example', label='Example')
    button = FlexButton('Submit')
    ...
   

7. FlexFormset, FlexModelFormset, FlexInlineFormset - respectively implementation of BaseFormSet, BaseModelFormSet, BaseInlineFormSet::

   formset = formset_factory(CustomFlexForm, FlexFormset, extra=4)

8. Grid: to locate fields you must specify them in grid variable as shown below. The dict key is a row title that allows you to horizontally split field rows. If the title is not needed, it must starts with _ symbol::

   grid = { 'User Info': ['field_1', 'field_2'], '_1': ['field_3', ['field_4', 'field_5'], 'field_6'], '_2': ['field_7', 'field_8'], '_3': ['field_9', 'field_10', 'field_14'], '_4': ['field_11'], '_5': ['field_12'], '_6': ['button'], }

9. Template tags::

   {% load flex_forms %}

   {% as_flex form_object %} # use this tag for rendering form or formset {% flex_form_grid form %} # use this tag for rendering form body generated with form_grid (visible fields) {% complex_flex_field field %} # use this tag for rendering a single flex field of the form

• Manual template building::

  Create template for the form (or fieldset).

  For example, custom template:

  custom_form_template.html:

  {% load flex_forms %}

  {% csrf_token %} {% for field in form.hidden_fields %} {{ field }} {% endfor %}

    <div class="flex-fields-column">
        <div class="flex-fields-row_title">Title</div>
        <div class="flex-fields-row">
            <div class="flex-fields-block block-with-padding">
                {% complex_flex_field form.field_1 %}
                {% complex_flex_field form.static_fieldset.field_44 default_value='No value' %}
                {% complex_flex_field form.static_fieldset.button %}
            </div>
        </div>
    </div>
    <div class="flex-fields-column">
        <div class="flex-fields-row_title">Controls</div>
        <div class="flex-fields-row">
            <div class="flex-fields-block block-with-padding">
                {% complex_flex_field form.static_fieldset.button %}
            </div>
        </div>
    </div>
  

  In form class set template path:

  class MyForm(FlexForm):

    template = 'custom_form_template.html'
  

  In this case form grid does not need to be set up.

1. The appearance of forms should be configured through css-properties, use :nth-of-type() and :nth-child(n+x):nth-child(-n+x+y) selectors to style rows. Default forms style involved through built-in style 'flex-form'.

Example

.. image:: https://user-images.githubusercontent.com/33987296/73204264-b7cb5780-414f-11ea-859a-356aecdfd5c7.png