GeneXus generates default RWD forms for web transactions, Work With pattern forms, and prompts when Web Form Defaults property is set to Responsive Web Design.
The purpose of this document is to explain RWD in GeneXus by analyzing the default form generated for a web transaction.
First, we recommend reading: My first Responsive Web Application.
Let's analyze the "Airport" RWD default web transaction form. In this case, the web form is set as default, and the Web Form Defaults property is set to RWD.
Airport Web Transaction default form
This design can be adapted at runtime to any screen size (any device). The details of the solution are described later on in this text.
The figure above shows the Abstract layout of the web transaction. In order to edit this web transaction layout, the designer uses the Web Abstract Editor by dropping controls in the form from the toolbox, and editing the layout with the Responsive Sizes property (X Evolution 3).
This example is a one-level web transaction.
The layout is presented with a main Responsive Table control, where the rest of the controls are dropped inside (each in a different row).
The web form layout includes all the edit controls corresponding to each attribute of the transaction. Each edit control is displayed with its label
to the left.
Besides, the Error Viewer control and two Action Group controls are included (Toolbar and FormButtons) for the paging buttons and the confirm, delete and cancel buttons, respectively.
Controls in the Airport Web Transaction default form
In sum, the default form shows a responsive table, which includes:
- Cells (rows and columns)
- One control inside each cell. The properties can be shown by pressing F4.
First of all, remember that what the designer views in the web form layout is not any particular design; it's like a table that determines the different rows and columns available and the controls inside. For each screen size, the designer will determine the distribution of these columns (which can interchange their position, be hidden or have different widths).
By right-clicking on the form, the Responsive Sizes property can be selected, and a new window is opened where the designer can configure the settings for the different screen sizes.
There, a combo box displays four different options:
- Extra Small (Phones < 768 px)
- Small (Tablets >= 768 px)
- Medium (Desktop >= 992 px)
- Large (Desktop >= 1200 px)
Each one of these options displays a grid where the designer may configure the width, visibility, and offset of each column for the corresponding screen size.
By default, the web transaction form has the following settings:
The extra small screen is designed by default so that all the controls are stacked in only one row.
The small screen is designed by default so that all the controls are stacked in only one row; the Error Viewer, Toolbar and FormButtons Action Groups have an offset other than 0.
All these settings are translated into BootStrap CSS classes which are assigned to the columns, in order to get the results at runtime.
The medium-size screen inherits from the small screen. The same happens with the large screen which inherits from the medium-size screen. Therefore, there are no explicit settings for medium and large-size screens in the default RWD of web transaction forms.
At runtime it looks as follows:
2. Small Screen execution of the Airport Web Form
The width assigned to the label and to the input controls is automatic for small devices. For labels, the width is 25% by default, and for the input it is 75%.
For extra small screens, the default is 100% for both, the label and the input control. See Label Width Property.
As a consequence, for extra small screen devices, the labels are shown at the top of the input control, whereas for small and wider screens the labels are shown on the left side of the input control.
Further Reading: How to use the Abstract Editor: designing a Web Transaction Form
Arranging the layout in a RWA
Salto version: Getting started with RWD: Understanding default forms