Widget formset¶

On this page it is shown examples of Widgets formsets configurations.

Example:

[
     no_columns('_toggle_btn','_copy_btn', '_css_btn'),
     ' ',
     ('empty:twelve','_input'),
     '_text',
     {
         'a:Free text': [
             'h1:Header 1',
             'h2:Header 2',
             'h3:Header 3',
             'h4:Header 4',
             'h5:Header 5',
             'h1-right:Header 1',
             'h2-right:Header 2',
             'h3-right:Header 3',
             'h4-right:Header 4',
             'h5-right:Header 5',
             '-',
             'Free text here',
             'msg:Message text',
             'info:Info message',
             'warning:Warning message',
             'alert:Alert message'
         ],
         'b:Segments': [
             'The next example has a segment',
             segment(
                 '_combo',
                 '_check',
                 css='secondary'
             ),
             '_list',
             '_label'
         ]
     },
     'notifications-area'
]

Configuration options¶

tuple¶

Displays the controls horizontally.

list¶

Displays the controls vertically.

dict¶

Displays the controls in Tabs. Use [a:,b:,c:] prefix to sort the tabs.

‘-‘¶

Draw a vertical line.

Empty column¶

Use ‘ ‘, or the prefix ‘empty:’ + size of the column (ex: one, two, …, sixteen) to add a empty column.

...
('empty:twelve', ...),
...

segment¶

Wraps the formset around a segment (Semantic UI segment).

Use the parameter css, to add extra CSS classes to the segment.

Use the parameter field_css, to add CSS classes to the div.field containing the segment.

segment(
     ('person_first', 'person_middle', 'person_last'),
     ('person_gender', 'person_birthday'),
     ('degree', 'scientificarea'),
     ('person_cv', 'person_web'),
     'person_bio',
     css='inverted',
     field_css='fourteen wide',
 ),

no_columns¶

Do not apply the fields columns alignments.

Free text¶

Do not apply the fields columns alignments.

Message¶

By using the prefixes [msg:,info:,warning:,alert:] you will wrap a free message on message box.

Headers¶

Use the prefixes [h1:,h2:,h3:,h4:,h5:,h1-right:,h2-right:,h3-right:,h4-right:,h5-right:] on free text.

[
    ... ,
    'h3:PERSONAL INFORMATION',
    ...
]

Notifications area¶

By default the application’s messages are shown on the top of each application, but it is possible to define a new position to these messages by including the code ‘notifications-area’ on the formset.

2 segments side by side¶

../_images/formsets-segment-sidebyside.png

class PeopleFormWidget(BaseWidget):

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)

        ... # fields definition

        # Use the field_style to align the checkbox to the middle.

        self.person_active.field_style = 'text-align: right;margin-top:5px;'
        self.person_active.field_css   = 'two wide'

        self._rotimg_btn = ControlButton(
            '<i class="icon undo" ></i>Rotate',
            default=self.__rotimg_evt,
            label_visible=False,   # Remove all the labels from the fields to make the row thinner.
            style='margin-top:5px;',
            field_style='text-align: right;',
            css='mini'
        )

       ...

       self.formset = [
            no_columns('_privateinfo_btn', '_proposals_btn', '_contracts_btn', 'person_active'),
            'h3:PERSONAL INFORMATION',
            ( # Use the tupple to display the segments side by side.
                segment(
                    ('person_first', 'person_middle', 'person_last'),
                    ('person_gender', 'person_birthday'),
                    ('degree', 'scientificarea'),
                    ('person_cv', 'person_web'),
                    'person_bio',
                    field_css='fourteen wide', # Use the argument to resize the segment on the left.
                ),
                segment(
                    '_img',
                    '_rotimg_btn',
                    'person_img',
                    field_style='max-width:330px;' # Use the argument to define the style of the div.field wrapping the Control.
                )
            ),
       ]