Official Content

To achieve a Responsive Web Applications, and an optimal viewing experience, you must use the Web Abstract Editor.

For extra flexibility in designing web application forms, it's possible to use either the HTML editor or the abstract editor for designing different parts in a form. Nevertheless, note that this isn't a good practice and you should avoid using the HTML editor to add a Responsive form inside. The other way around (the HTML editor inside a Responsive Form) could be acceptable in some cases. But these should be exceptional cases where there isn't another way to design the form.

Nesting form layouts

As explained, you may decide to use the abstract editor, in addition to the HTML editor for the various parts in the web form that is designed.
This may be achieved through "nesting form layouts", which consists of including an HTML editor inside the abstract layout and vice-versa.

Nesting an abstract layout inside the HTML form

This could be useful when you need to create a responsive design on the basis of an HTML design.
You may drag the Layout control into the form, in web forms edited with the traditional HTML editor.

Layout Control
Layout control dragged into the HTML form

With a double click on the layout control, an abstract form will appear in the window's editor.

Layout inside HTML Form
Layout to be edited

Note that, in the figure above, the Layout is the child node of a tree whose root is "Root Form".
You may navigate through the tree's nodes by clicking on the nodes.

Nesting an HTML container inside the abstract layout

Deprecated: Since GeneXus 18.

The HTML container may be dragged from the toolbox to the abstract layout as shown in the figure.

Html Container inside Abstract Layout
HTML Container inside abstract layout

Nesting a Responsive Table inside the abstract layout

You can work with different Responsive Table in the abstract layout. This means that n responsive tables may be nested, all displayed in the same window of the editor.

Responsive Table inside Abstract Layout
Responsive Table nested in abstract layout
Responsive Tables inside Abstract Layout
Responsive Tables edited in the same abstract Layout

This enables you to easily design a Responsive web application with more flexibility, since each editor implies specific advantages and they may be used interchangeably.

Layout tree

The different layouts used in designing a single web form are represented on a tree structure. The tree of form layouts consists of nodes, which may be either an HTML layout or an abstract layout. This tree's Root form may be either an HTML or an abstract Layout.

You can only display one form layout in the web object's web form tab. The layout displayed depends on the selection made on the tree. 


In the following example the "ResponsiveMasterpage" object has a main HTML form including three abstract editors.

ResponsiveMasterPage object web form

You can display the form in the web form tab by double clicking on any abstract editor, or by selecting the corresponding node in the tree.

In this example, after selecting the "RecentLinksLayout" it is displayed in the web form tab.
Note that it contains a "RecentLinksWrapper", which is an HTML layout embedded in the abstract layout.

Abstract Layout containing HTML layout

You can edit the HTML Layout by double-clicking on it, or by selecting it from the tree.

How to switch from HTML to Abstract Layout and viceversa

There is no automatic conversion between the two forms. But to allow you more flexibility, there is the possibility of switching from one form to the other, as explained in these links:

Use HTML As Root Form
Add Html as Root Form menu option
Use Layout as Root Form
Add Layout as Root Form


Last update: November 2023 | © GeneXus. All rights reserved. GeneXus Powered by Globant