3.2.02 Responsive forms

You need an application that can be used on mobile devices, so you need responsive forms. BOA takes care of that so this becomes a simple task. It is up to you to define the layout of a form. To do this correct, you need to know the basics of it.

What is Responsive Web Design?

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).

Yes, seems evident and looks simple right?

BOA uses the rules of Bootstrap to implement responsive design. This means that each form can be divided in blocks, and each block is divided in 12 columns. When resizing the screen, it uses this information to decide where to place the form element.

In most case we will have one block in a form. This means the form has 12 columns. You can have multiple element on one row. Suppose the following example.

In the above sample the elements have the following width:

• Label Naam/Firma: 2 columns
• Field ABO Service bvba: 4 columns
• Label Contactpersoon: 2 columns
• Field Chris Andries: 4 columns

The total of the columns is 12. When we resize the screen the elements as ‘Contactpersoon: Chris Andries’ will move to the first column as in the following sample.

The above result is what we want and is fine in most cases. However with some forms this is not what we want. Look at the following sample:

In the above sample the form is divided in two blocks, each block has 12 columns. You need this if you don’t want the data of the right column between the left column when you resize the screen. When resizing this form the right block will be placed below the left block. This way the data will still be logical.

Each block is divided in 12 columns, this means that in the left block each element has a width of 4. Total is 12 and BOA will resize it correctly.

Definition of blocks.

In the response of your form, you need to add an array with the definition of the blocks. The total number should be 12.

• “blocks”: [ { “width”: 12} ]: A form with one block.
• “blocks”: [ { “width”: 6}, { “width”: 6} ]: A form with two blocks of 6 columns. Screen will be divided in two identical columns. Each column will be divided in 12 columns.
• “blocks”: [ { “width”: 3}, { “width”: 6},{ “width”: 3}]: A form with three blocks starting with a smaller block of 3, bigger of 6 and another block with a width of 3 columns. Each block is divided in 12 columns.

With the above blocks BOA knows how to move the blocks when resizing the screen.