Multiple Layouts in Panels

Official Content
This documentation is valid for:

In different mobile devices and even in the same device you may want to use different designs. For example:

  • In a Tablet, you may want to use one design and in a Phone, you may want to use another design.
  • In an Android device, you may want to use one design and a different design when using iOS, even though they have the same screen size.
  • In the same device, you may want to use one design in Portrait mode and another one in Landscape mode.
  • In the same device, you may want to use one design if I’m editing an entity and another one if you are viewing it.

Multiple Layouts

GeneXus allows having more than one design for the panel layouts, making them different for each platform, size, version, and orientation combination. When creating a Panel object, a default layout is created to be used for Any Platform, Any Size, Any Version, and Any Orientation.

multiplelayouts1

Using the "Add Layout" button, new designs can be created.

MultipleLayouts- GeneXus 15

In this step, it is needed to choose which type of layout is being created, selecting the platform, size, version, and orientation. Available combinations are :

Platform Size Version (Since xev2u4) Orientation
logoany Any Platform Any Size
Phone
Tablet 7"
Tablet 10"
The minor OS version Supported Any Orientation
Portrait
Landscape
logoandroid Android Any Size
Phone
Tablet 7"
Tablet 10"
The minor OS version Supported Any Orientation
Portrait
Landscape
logoios iOS Any Size
iPad
iPhone
The minor OS version Supported Any Orientation
Portrait
Landscape


Also, the new layout design can be initialized with the design of a previously created layout

multiplelayouts3

Selecting the "click here" option, the new layout design is created with the selected type and based on the selected template. Then, when working on the Panel layouts design, each created layout can be selected in the bottom left corner of the screen to be edited.

MultipleLayouts4 GeneXus 15

Layouts by Mode

In the layouts of Details of Work With for Smart Devices objects, in addition to platform, size and orientation, we can define different layouts designs depending on the Mode (View and Edit)

MultipleLayouts2 GeneXus 15

 

See Also