Getting started with RWD: Understanding default forms (X Evolution 3)

Official Content

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 Trn Abstract Layout
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).

Form controls

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 Airport Trn Abstract Layout
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.

Distribution of the controls at runtime 

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:

1. Extra Small Screen Design for the Airport Web Form

Abstract Layout Extra Small Screen design

The extra small screen is designed by default so that all the controls are stacked in only one row.

2. Small Screen Design for the Airport Web Form

Abstract Layout Small Screen design

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.

Important

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:

1.  Extra Small Screen execution of the Airport Web Form

Airport trn execution 2

2. Small Screen execution of the Airport Web Form

Airport trn execution 1

Note

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

See Also

Arranging the layout in a RWA

Salto version: Getting started with RWD: Understanding default forms

 

 



Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.