Nesting abstract and HTML form layouts

Official Content

To achieve a Responsive Web Application, and an optimal viewing experience, we 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 best practice and it should be avoided to use HTML editor to add a Responsive form inside. The other way round (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, the user 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 we need to create a responsive design on the basis of an HTML design.
We 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".
The user may navigate through the tree's nodes by clicking on the nodes.

Nesting an HTML container inside the abstract layout

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

We 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 us 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.

We 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. 

Example

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

ResponsiveMPForm
ResponsiveMasterPage object web form

We 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 we select 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.

AbstractFormLayout
Abstract Layout containing HTML layout

We 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 the user 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
Use Layout as Root Form
Add Layout as Root Form

 

 


 

 




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