Several Ways to show a Work With Detail

Unofficial Content

When designing for Smart Devices user interfaces there are many options to show the same information. 

In Several ways to show a Menu for Smart Devices we describe the ways to show a Menu for Smart Devices object.

In this article we are going to describe 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 dissapear.
  2. Show all sections as Links
  3. Show all section in the same view  (in line)
  4. Show a combination, some inline, some links, some in tabs. This case is quite common in cases where you hava a device with a screen size medium or large.


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 Display =  Platform Default | Tabs | InLine | Link

If you delete <All Sections Content> from 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 Secenario 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 whe Type = Platform Default,  this allow us 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 we provide the way to create exactly what you want buy 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 of the platform (remember that the platform includes Operating System and Screen Size ), the Section control will be rendered in different ways.

  • Android & BB: Tabs for all sections
  • iOS: All sections with a Grid inside are show as Links and the remaining sections are show inline.

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

SectionInline