PHsPeed can create full responsive applications. But to do that correctly, the system needs to know what you want. This manual describes the working with the form editor and how you can create full responsive forms.

Introduction

PHsPeed is build upon Bootstrap. Originally Bootstrap 3, currently Bootstrap 4 (BS 5 is currently under development).


The form design is based upon the Boostrap Grid system. This is an intelligent ‘look-alike’ to the former Tables that were used to layout webpages. But to start designing your form, you need to think in ‘responsive tables’. 

The component palette of PHsPeed has 3 different types of components. A type for layouting, a type for visual components and a type for non-visual components. 


The lay-out components row and column require a container to keep the form together. This container can be an ‘area’, which is a simple <div>..</div> or a ‘panel’ which is a bootstrap element (panel in BS3, card in BS4).

Within the container you can add rows and columns. Columns are placeholders for fields. Although you can add more fields to a column, it is advised to keep only one field per column, especially when you are still learning the in’s and out’s of the behavior of Bootstrap.

The Form

When you create a new application in your project, then the project manager gives the opportunity to create the application with some design elements in advance. 



If you are working with databases, then you need the database connection, otherwise you can uncheck this checkbox. When you accept a form is generated with at least a Root (or module) component, a form and a panel (in a module the form will be set to off by default, as the module in general is used as part of the current form in use).


The design panel will open with the standard components:



Let us create a simple login form. A login form contains a user id, a password and a submit button. In the simple approach we need three rows with each one column. 

Add a row to the design


To add a row to the design, go to the component palette and click on row. Then go to the form and click in the panel. Rows are always aligned to the top. 


Add a column to a row


To add a column to the row, go to the component palette and click on column. Then go to the form and click in the row, that will receive the column.



Add a field to a column.


For the login form we only need ‘simple fields’. These can be found on the ‘standard’ panel. If you have done things right your screen would look something like this:


 


Quickly add rows and columns

In many cases you will know more-or-less how many rows and columns you need. To add each and every row and/or column can be time consuming and boring, especially when you have a lot of those. A faster way to add a grid to the form is to make use of the generator. In the form designer use the right mouse button to open the popup menu. You can add rows, add columns or a full grid depending on your choice. 



By changing the number of rows and/or columns you can fast create a set of rows with columns.



Don’t worrie about the margins and the elements per column. All can be changed later, even with bulk operations. However to understand the working of Bootstrap, it is important to know about the device classes (phone..desktop), margins and padding.

The Bootstrap GRID system


First something about the grid system. In Bootstrap each container (panel/card, row, column) can be divided into 12 elements. 



If you specify nothing then the field is not a bootstrap object. If you do then the field is a bootstrap object. So how do you specify how much space a column will take in a row? Well, if you need 2 identical rows, then both need 6 units, as 12 div 2 = 6. You can also make two columns with 1/3 and 2/3 sizes. Then you need to specify the first column to 4 and the other to 8 as 4/12 = 1/3 and 8/12 is 2/3. Complex? Well look at the above chart. If you want full space then you have to specifiy 12 units.


Now how large is a unit? That differs! Bootstrap is responsive and created for mobile first. If you have a regular desktop then you might need two columns to prevent an empty screen. But on a mobile, this might not be the best layout and you want both columns under each other. That is the responsiveness we have been talking about. 

So how do you arrange that the two columns are side-by-side on a desktop but top-bottom on a mobile? That is where the device context comes in.

By using responsive objects, you need to specify the amount of space that it will take. But besides the amount of space, you need to specify on what type of screen it applies to. Bootstrap 4 knows about 5 types (BS5 adds a new one). 


  1. - (for extra small devices): screen width less than 576px.
  2. sm- (for small devices): screen width equal to or greater than 576px.
  3. md- (for medium devices): screen width equal to or greater than 768px.
  4. lg- (for large devices): screen width equal to or greater than 992px
  5. xl- (for xlarge devices): screen width equal to or greater than 1200px.



Now how do we ‘break’ the columns on a mobile? Simple. By setting the amount of units to the device. So on a desktop > 992px we need 2 columns? Then we set md-6 on each column. If the resolution of the form is > 992 px then the columns will be rendered side-by-side. To bind the two on smaller screens they will break into 2 columns and the columns need to use 12 units.

Important to realize is that you do not have to specify each and every device, only the device that is the breaking point on your design. In earlier days it was more complex as mobiles had very low resolution screens, but that is not the issue any more. 


To set the device class, most visual and layout components have properties:




If you select a column and look at the properties you will probably not see all device classes, but only the ‘deviceclass’. Clicking on the + in front of the line, will open the properties. Just enter the required number behind the device class.


We’ll describe later, how you can test the different layouts. But important to know is that what you design on the form designer is not ‘what you see is what you get’, but a fast way of setting up your form and access its behavior. The layout depends on the devices it is displayed upon.