Several Ways to show a Work With Detail

Unofficial Content
This documentation is valid for:

This article describes the ways to show Sections in a Work With for Smart Devices Detail Node.

Scenarios

  1. Show all sections in Tabs. The tabs are just a way to organize the data you are going to show, even you have tabs you don't want to change your navigation style, basically, when you call another object all tabs will disappear.
  2. Show all sections as Links
  3. Show all sections in the same view (inline)
  4. Show a combination, some inline, some links, some in tabs. This case is quite common in cases where you have a device with a medium or large screen size.


How can you solve each scenario in GeneXus?

Scenarios 1 , 2  and 3 - <All Sections Content> with Display Property = Tabs|Links|InLine in the Detail Layout.

AllSectionsContent

By default, in Detail layouts you have <All Sections Content> where you can specify how all Sections are rendered. This control has a property called Display =  Platform Default | Tabs | InLine | Link

If you delete <All Sections Content> from the layout, you can drag it from Toolbox again. Deleting <All Sections Content> will cause to appear on the Toolbox, in addition to that control, another control for each Section, so you can manipulate them individually. This will be relevant in Scenario 4.

In execution time (Android and iOS) the <All Sections Content> with Display = Tab is shown as follow:

AllSectionsRuntime

The <All Sections Content> has many benefits:

  • It adds automatically to the control any section you add to the Detail
  • It doesn't show sections without a layout
  • It can be rendered in different ways when Type = Platform Default,  this allows you to have just one layout in many cases

Scenario 4 - Tab Control + Section Content

TabControl

The Section Content is really useful when you don't want to do a particular design of your Panel. In small screens, Section Content is good enough, but in medium and large screens it is quite common to try another distribution of your Sections. For example 2 inline and 1 link and a Tab Control with two more.

In order to give this full power, there is a way to create exactly what you want by dragging Section Content and containers (Tab Control) to the Detail layout from Toolbox. So that for this specific platform or size you can create your specific user interface.

Using the Tab Control + Sections in GeneXus

You need to delete the <All Sections Content> from layout and drag the Tab Control and each Section from Toolbox to the Detail layout.

You can combine the Tab Control with the Sections and the Display property. For example, using Tab Control with Sections General and Contacts, and Display = Link for Property Section:

TabControl1

In execution time (Android) is shown as follow (Property Section is shown Link):

TabControl2

Each <All Sections Content> has the following properties:

  • Row Span
  • Col Span
  • Horizontal Alignment
  • Vertical Alignment
  • Control Name
  • Display
  • Visible

Each Section Content has the following properties:

  • Row Span
  • Col Span
  • Horizontal Alignment
  • Vertical Alignment
  • Control Name
  • Content
  • Display
  • Show Section Title
  • Image
  • Visible

Default Rendering for <All Sections Content> ("Platform Default" Value for Display Property)

The default layout of a Detail is to have just one Section control filling all the screen size.

When the Sections control Display = Platform Default, depending on the platform (remember that the platform includes Operating System and Screen Size ), the Section control will be rendered in different ways.

  • Android: Tabs for all sections
  • Apple: All sections with a Grid inside are shown as Links and the remaining sections are shown inline.

In execution time (Apple) the <All Sections Content> with Display = Platform Default is shown as follow (Photos Section is shown Inline):

SectionInline

See Also

Several ways to show a Menu