Properties

Layouting your form

Before designing your form, you must have some idea about the look-and-feel of your application. The first basic question is: what are the platforms that you need to display the application upon? If you need to display on a desktop only then you don't have to consider the limits of a mobile phone. But if you need to be able to display on a mobile phone and a desktop as well then you will discover some challenges. First of all, the dimensions of a mobile phone are quite smaller (usually) then a desktop and the ratio differs from small width and long height (mobile) to wide screen and smaller hight (desktop).

Bootstrap solves the issue by making webpages responsive. But it does not do so automatically. You have to specify what you want. PHsPeed uses the Bootstrap Grid approach. You define a panel/area that consist of rows and columns (grids). Depending on the specification (device class), Bootstrap will break at the columns you have specified.

You will find loads of good information regarding the bootstrap grid system. But in short, every Bootstrap object can occupy 1-12 units of its parent. If you have a row with two columns that should occupy half of the form, then the amount of units to specify is 6, as that will divide a row in two equal parts. However if the form is smaller, perhaps you need to have only one column on each row. So on smaller devices the specs might be that you have one row with the same two columns, but every column will occupy 12 units, resulting in two blocks above each other.

So you must specify units for each platform that needs to be responsive. In Bootstrap 4 it means that you can specify:

(See W3Schools for more information about the bootstrap grid system, another explanation can be found here)

Full manual design

To define a form you start by adding an area or a panel and apply lines and columns, and add fields to the columns. You can pick a row column from the design panel and put it on the form, take one or more columns and put them in the rows. For large screens this can be time consuming.

Partially automated design

If your mouse is over the design panel, then you can use your right mouse click to open a menu that allows you to fast create rows, columns or a full grids with rows and columns. If you have to many rows, you can delete them later, or if you have to little add them later.

Full automated design I

if you have an area or a panel then you can use the fieldsmanager to maintain the form. To be able to do so you need to have a database table selected, as the table definition will be used for generating the form.

Full automated design II

Another approach is that you generate the form with a full working application out of a database table. This is by far the fastes way to a prototype, and you can change everything you need later on.