Skip to main content

Screen types

Introduction to screen types​

The screen type of a subject (table or variant) determines the screen structure used to visualize the subject. There are four different levels for which a screen type can be specified:

  • Main screen: when the table is opened from the menu.
  • Detail screen: when a table is a detail of another table.
  • Pop-up screen: when a table opens as a pop-up.
  • Zoom screen: when a detail of another table is double clicked so it opens as a main size screen.

If the screen type is left empty, then the standard screen type as indicated at the branch, is used.

Design a screen type​

Create a screen type​

Before designing a custom screen type, you first have to create one:

menu User interface > Screen types > tab Screen types > tab Form

  1. Enter a name in the field Screen type.
note

Keep the name of the screen type abstract, so you can use it in more places. For example, not customer but parallel_detail.

  1. The following settings are available:

Add screen components​

tip

To add screen components to the screen type:

menu User interface > Screen types > tab Design

  1. Drag screen components into the design area.
  2. If necessary, configure the components. See Settings and properties for screen components.

The following rules apply:

  • The first component will fill the entire page.
  • If you drag another component into the design area, both components will get a frame at the position where it is dragged.
  • You can reposition the components freely using drag-drop.
  • You can place a number of button bars and a filter next to each other instead of on top of each other. This allows for a more efficient use of the available space.
  • White space between the various components is added automatically.

Assign the screen type to a subject​

To assign a screen type to a subject:

menu User interface > Screen types > tab Screen types

  1. Select the screen type that you want to assign to a specific table.
  2. Go to the tab Assign to subjects.
  3. Select the table(s) and variant(s) to which you want to assign the selected screen type.
  4. Execute one of the tasks: Assign screen type [...] (main, detail, zoom, or popup).

The name of the screen type is highlighted in bold. Underlined screen types are explicitly set up to deviate from the standard screen types defined at the branch.

tip

It is also possible to assign a screen type to a subject in the Subjects screen: menu User interface > Subjects > tab Default/Variants > tab Settings > tab General > group Screen type. See Screen type settings.

Assigning screen types Assigning screen types

Screen preview​

tip

Best practice is to open your application and to refresh the model after you have made some changes.

  • Windows GUI Refresh model is available in the Developer ribbon.
  • Universal GUI Refresh model is available in the Profile menu.

For both user interfaces, Developer mode is required. See Developer mode.

When the screen is developed according to your wishes, it is possible to display a preview of the screen in the Software Factory.

menu User interface > Screen types > tab Design

  1. Connect to your application by selecting Connect . Use the Thinkwise Mock Database provider to display a preview without the application. The preview is then displayed with dummy data.

  2. Select the table to which it needs to be connected and select Preview .

A new document opens inside the Software Factory development environment, showing the screen type applied to the selected subject.

You can reload the model with Refresh .

Connect and preview

Overview of the Design tab​

When a new screen type is created, it can be designed on the tab Design. This tab consists of:

Designing a screen type Designing a screen type

  1. Abstract components - An overview of the available abstract screen components that can be dragged into the design area.
  2. Preview - Test your screen type on an existing end product.
  3. Design area - Drag the screen components here to create your own screen type, .
  4. Properties - The properties of the selected component. These can be manually adjusted.
  5. Save and reset - Save or reset your modifications.

Component properties within the Design tab​

In the tab Design, properties are available that you can adjust while designing the screen type:

menu User interface > Screen types > tab Design

Click on a component to change its configuration in the panel on the right-hand side of the screen. Each component has its own settings, such as:

Screen type settings​

Allow users to select a different screen type​

For each screen type, you have the option to make it available for user preferences. If enabled, users can choose a different screen type in their preferences.

menu User Interface > Screen types > tab Form > tab Screen types

  1. Select the checkbox Available for user preferences.
note

If you developed a screen type specifically for one particular process, it may not be suitable for other subjects. In such cases, clear the checkbox Available for user preferences.

Hide the breadcrumbs​

Universal GUI

Sometimes, showing the breadcrumbs is not useful for a screen type. To hide the breadcrumbs by screen type:

menu User Interface > Screen types > tab Form > tab Screen types

  1. Select the checkbox Hide breadcrumb.

Breakpoints​

Some definitions​

Universal GUI

Responsive screens are designed to work well on mobile, tablet, and desktop devices, by adapting the layout to the device and screen size. A responsive screen is created by using breakpoints in combination with screen types.

Breakpoints are the points at which your GUI changes to a screen type that presents the data with the best possible layout, depending on the screen size.

A breakpoint screen type is a horizontal screen type without splitters that is suitable for small devices. It is used after reaching the breakpoint for its connected or original screen type.

Add your own breakpoint screen type​

Universal GUI

For every screen type in the Software Factory, you can define one or more breakpoints. When this breakpoint has been reached, the GUI will switch to the screen type you selected.

menu User interface > Screen types > tab Form > tab Screen types

  1. Enter a Breakpoint in pixels.
  2. Select the Breakpoint screen type that should be used as of this breakpoint.

Add a task-created breakpoint screen type​

Universal GUI

For an existing screen type, you can use a task to create a breakpoint screen type. This screen type is based on its original screen type and automatically connected to it.

menu User interface > Screen types

  1. Select the screen type for which you want to create a breakpoint screen type.
  2. Select the task Create horizontal screen type as breakpoint .
  3. Enter the Breakpoint.

Breakpoints debug mode​

Universal GUI

In the Universal GUI, a debug mode is available to help add breakpoints. It is enabled by setting debugMode: true in the config.json. Now, the current width and active screen type for each screen are shown in the GUI. If a screen type is a breakpoint, you will also see the screen type that it is a breakpoint of.

Breakpoints example​

Universal GUI

menu User interface > Screen types > tab Form > tab Screen types

It is possible to define more breakpoints:

Breakpoint (px)Breakpoint screen type
600master_detail
400card_list_form
200card_list_only
  • In this situation, the used screen type is master_detail as long as the number of pixels is between 400 and 600.
  • When the screen is made smaller, between 200 and 400 pixels, the GUI switches the screen type to card_list_form.
  • And when the screen is smaller than 200 pixels, the GUI will show screen type card_list_only.

Example breakpoints Example of a breakpoint set-up

Fallback groups​

Introduction to fallback groups​

menu User interface > Screen types > tab Design

You can assign detail references to a specific Detail group in the model. If this detail group is not available in the assigned screen type, the detail references will be shown in the Fallback group. If no fallback group is present in the screen type, the detail references will not be shown. If multiple fallback groups are provided, the GUI will decide where to show the details.

You can use fallback groups to, for example:

  • Manage where details that do not belong to any detail group in the screen type are shown if there are multiple detail tabs or detail tiles on the screen.
  • Only show a very specific set of details if they are shown in a detail group, but show more details if you zoom in on them.
  • Leave the choice to the user (using user preferences) to display a screen type with a restricted set of details or a screen type with an extensive set of details.
  • Show a more restricted set of details on specific break points.

For example, you have set up the standard screen type master_detail. This screen type uses detail group 'A' for its detail tabs. Fallback allowed is on for the details.

If you apply this screen type, the details of group 'A' will be visible. Additionally, items assigned to other detail groups and items without a group will be visible as well (if they exist).

If you want to restrict the visible details to only group 'A', clone master_detail. Give the new screen type a name, for example, master_details_essentials. Make sure that Fallback allowed is off for this screen type. Only details that are explicitly part of group 'A' will be displayed on master_details_essentials.

Set up fallback groups​

To set up fallback groups:

menu User interface > Screen types > tab Design / tab Screen components

  • On tab Design, set the field Fallback allowed to True to indicate that the currently selected tab page can be used as a fallback group.
  • On tab Screen components, select the checkbox Use as fallback group for the screen component(s) that will be the fallback group.

Fallback group scenarios​

Five distinct fallback group scenarios are possible. They are based on the combination of fallback settings in a screen type and which tab pages are available.

In the following examples, imagine that there are three detail groups specified in subjects: A, B, and undetermined. There are two detail containers: A and B. In some scenarios, only container A is present.

The table below shows in which detail container(s) the detail groups are displayed in each scenario.

Detail container A presentDetail container B presentFallback detail containerResult
YesNoNoneOnly detail tab pages assigned to detail group A are visible (in container A).
YesNoAAll detail tab pages are visible in container A.
YesYesNone
  • Detail group A is shown in container A.
  • Detail group B is shown in container B
  • Undetermined detail tab pages are not visible.
YesYesA
  • Detail group A is shown in container A.
  • Detail group B is shown in container B.
  • Undetermined tab pages are shown in container A.
YesYesA & B
  • Detail group A is shown in container A.
  • Detail group B is shown in container B.
  • Undetermined detail tab pages are shown in the container that is in the upper left position on the screen.

Detailed example​

Situation

  • The 'ARTICLE' screen has two screen types: 'MAIN' and 'ZOOM'. It also has two detail tabs: 'PRICES' and 'LOCATION'.
  • In the 'MAIN' screen type, two detail groups are available: 'A' and 'B'. The 'ZOOM' screen type, however, only contains detail group 'A'.

Using the fallback option, you can either group all details ('PRICES' and 'LOCATION') into the fallback group or hide all detail groups not present in the screen type.

Goals

  • Show both detail tabs if you open the 'ARTICLE' screen via the menu ('MAIN').
  • Hide the 'LOCATION' detail tab if you access it via a lookup ('ZOOM').

Implementation

  1. Assign detail group 'A' to 'PRICES' and detail group 'B' to 'LOCATION'.
  2. In the 'ZOOM' screen type, set Fallback allowed to False.

This will ensure that all details assigned to detail group 'B' are hidden if you access the 'ARTICLE' screen via a lookup.

Available screen components​

The following components are available that can be dragged into the design area:

IconComponentExplanationProperties
Tab containerThe tab container ensures that several tabs can be used under which the details or other components can be classified. Empty tabs are removed by the user interface.Show borders (True/False)
Show tab headers (True/False)
Tab orientation (Horizontal/Vertical)
Detail tilesThis component shows the subject details in tiles. Clicking on a tile will open a new document.
GridShows multiple records in a grid. The user interface will remove the grid if there is only one line at most.Show grid header (True/False)
FormData from one row can be presented and modified in the form.
FormlistThis component shows a form without tab pages for every row in the grid. All the forms will be stacked and a scrollbar will be created when it exceeds the screen.
Find formWindows GUI The find form provides an overview of the (limited) search set on the screen. The search result is marked, and all other rows remain visible.
Filter formThe filter form provides an overview of the (limited) filter set on the screen. The result is filtered, and all other rows are removed as long as the filter is active.
Universal GUI Columns with the following domain Control types (as set in the menu Data > Domains > tab Form > field Control) are not supported: Date, DateTime, Time, Label, Group header label, Group header icon, RTF, SQLeditor, Multiline, Image link, Image upload, Image BLOB, File, File upload, Signature, Video link.
Prefilter barA button for all prefilters is displayed in this bar. The user interface will remove this component if there are no (visible) prefilters.Alignment (Left/Right or Top/Bottom)
Cube view barTo show the available cube views in a bar on the screen in the same way as prefilters, tasks, and reports. Use it, for example, to develop screens with only charts and the toolbar to select the view. The user interface will remove this component if there are no cube views. See also Business intelligence.Alignment (Left/Right or Top/Bottom)
Task barIn this bar, a button is displayed for each available task. The task buttons then disappear from the standard action bar at the top. The user interface will remove this component if there are no tasks.Alignment (Left/Right or Top/Bottom)
Task tilesUniversal GUI All tasks assigned to the subject will be displayed as tiles.Alignment (Left/Right or Top/Bottom)
Report barA button for all reports is displayed in this bar. The user interface will remove this component if there are no reports.Alignment (Left/Right or Top/Bottom)
Report tilesUniversal GUI All reports assigned to the subject will be displayed as tiles.Alignment (Left/Right or Top/Bottom)
TreeviewShows a tree structure. The user interface will remove the structure if there is only one row at most. See also Tree view properties
SearchThe Search can be used for searching on several columns.
In the Universal GUI, columns with the following domain Control types (as set in the menu Data > Domains > tab Form > field Control) are not supported: Date, DateTime, Time, Label, Group header label, Group header icon,, RTF, SQLeditor, Multiline, Image link, Image upload, Image BLOB, File, File upload, Signature, Video link.		Dock (Left/Fill/Right)
DashboardShows the data in a Dashboard form. The user interface will remove the component if there is no maps definition for the table. At the time of writing, this can only be created with an object model extender.
MapThe Maps component shows a folder in which data can be viewed. The user interface will remove the component if there is no maps definition for the table. At the time of writing, this can only be created with an object model extender.
PreviewShows the first column of a table that contains a file link or path (for example, a URL or a file upload column).
Pivot tableProvides the possibility to show a pivot table. The user interface will remove the pivot table if there is no cube definition for the table. See also Business intelligence.
Pivot table fieldsProvides the possibility to show fields that can be dragged and dropped in a pivot table. The user interface will remove the pivot table fields if there is no cube definition for the table. See also Business intelligence.
ChartShows a graph on the screen. The user interface will remove the graph if there is no cube definition with a graph for the table. See also Business intelligence.
SchedulerThe scheduler shows a graphical planning. The user interface will remove the component if there is no scheduler definition for the table.
Windows GUIWeb GUI - A scheduler can only be created with an object model extender.
Universal GUI - Available as a component with limited functionality, but no object model extender is needed.
Card listUniversal GUI
This component shows records as cards, with an image and title, in a scrollable list.
Action barUniversal GUI
This component replaces the default action bar, and can be placed anywhere on a screen in a horizontal position.
RSSShows an overview in which RSS feeds can be presented. The user interface will remove the component if there is no RSS definition for the table. At the time of writing, this can only be created with an object model extender.

General screen component settings​

Screen component heigth and width​

Each screen type is a collection of several components. Each screen component within a screen type has its own settings:

menu User interface > Screen types > tab Screen components

The tab Screen components displays an overview of the selected screen type's components in a tree structure. Depending on the horizontal or vertical orientation of the component you can adjust the following settings:

  • Height, Height unit, Width, and Width unit - the height and width in pixels or a percentage
  • Fix on resize - Select if the size should remain the same when the screen is resized.

Tab container component​

The component Tab container has two functions:

  • Add tab pages that contain other components
  • Add tab pages for details

If you add a Tab container to your screen type, it shows one tab by default. You can add other components to this tab. Use the context menu to add extra tabs, and to change a component tab to a detail tab and vice versa.

Add a tab container with components​

A Tab container can contain other components, for example, a Grid, a Form, and a Task bar.

To insert a tab with other components:

menu User interface > Screen types > tab Design

  1. Drag the component Tab container into the design area.
  2. Right-click on the tab container and select Edit tab pages from the context menu (right mouse button).
  3. Drag other components to this tab.
  4. If necessary, configure the components. See Screen component properties.
  5. To add another tab at the same level as the first, select Add component tab page from the context menu.

This example shows a Tab container with a Grid, a Form, two Task bars, and a second tab.

A tab container with components

Add a detail tab​

To insert a tab with subject details:

menu User interface > Screen types > tab Design

  1. Drag a Tab container component into the design area.
  2. From the Tab container, open the context menu (right mouse button).
  3. Select Change component tab page to detail. The tab will become gray and the details will be initialized based on the definitions of the subject.
  4. If necessary, configure this components. See Screen component properties.

Detail tab properties Detail tab page groups

Hide tab headers and borders​

To hide the tab header or border in a Tab container screen component:

menu User interface > Screen types > tab Design

  1. Select the tab container.

  2. Edit the following tab properties:

    • Show borders - True or False
    • Show tab header - True or False

Horizontal or vertical tabs​

Universal GUI

By default, tabs in a Tab container component are displayed horizontally, next to each other. It is possible, however, to display them vertically, to make the tabs look like a menu.

tip

For more information about the use of icons in vertical tab headers, see Fields on next tab.

vertical tabs Vertical tabs example

To convert a (horizontal) tab panel in the Tab container component of a screen into a vertical tab panel:

menu User interface > Screen types > tab Design

  1. Select the Tab container component.

  2. In the screen type modeler on the right-hand side, change the property Tab orientation to Vertical.

tab orientation property Tab orientation property in the screen type modeler

Detail tiles component​

To insert a Detail tiles component with subject details:

menu User interface > Screen types > tab Design

  1. Drag a Detail tiles component into the design area.

  2. Select a Detail group setting on the right-hand side of the screen.

By default, options A and B are available, but you can add new options in the tab Detail groups.

In the Subjects details screen, you can distribute the subject details among the detail groups.

If a detail group is not available in the assigned screen type, the detail references are shown in a fallback group. Detail tiles are removed if no details have been defined.

Action bar component​

Hide the main action bar​

Sometimes the action bar that is shown by default does not make sense for a screen type.

To hide the toolbar by screen type:

menu User interface > Screen types > tab Form > tab Screen types

  1. Select the checkbox Hide main action bar.

Change the order in the action bar​

You can reposition the items in the action bar. You could, for example, place the tasks on the left and the search field on the right.

menu User interface > Screen types > tab Screen components > tab Form > tab Screen component properties

To change the order of items in the action bar:

  1. Add the Screen component prop toolbar_order to the top screen component in the screen tree.
  2. Enter the Value in JSON format.
{ 
  "start": [ 
    "Extra",
    "Crud"
  ],
  "end": [
    "Reports",
    "Prefilters",
    "Tasks",
    "CubeViews",
    "Search"
  ]
}

This JSON object has two properties, "start" (the items on the left) and "end" (the items on the right). Both properties are arrays that can hold the following values:

  • "Search"
  • "Prefilters"
  • "Crud"
  • "Tasks"
  • "Reports"
  • "CubeViews"
  • "Extra" - Holds the items in the overflow menu, such as Import, Export, Filter, Restore sort order.

Bar within an action bar​

To include any bar within the action bar:

menu User interface > Screen types > tab Screen components > tab Screen component properties

  1. Add the screen component property AlwaysMergeToActionBar to a bar. It will stay in place in the Windows GUI.

Task bar component​

The task bar shows a button for each task. When there are no tasks, the UI automatically hides the task bar. If your application does not have a task bar, tasks are shown in the action bar. Adding a dedicated task bar shows buttons for the tasks and removes them from the action bar.

Universal GUI
  • The taskbar automatically resizes to fit the icons.
  • You can place both a task bar and a task tiles component on a screen. Multiple task bars on one screen are also possible.
  • Task tiles are removed if no tasks have been defined.
  • If you place the task bar at the top of the screen, it will become part of the main action bar. In that case, it will never be removed from the main action bar, even if the screen contains another taskbar or task tiles component.

Task bar component icon sizes​

For the icons in a task bar, you can choose from 7 sizes (in pixels).

task bar icons Screen type with task bar and Icon size property

Universal GUI

In the Universal GUI, these sizes are translated into 3 possible values, according to the following table. The icon size is also affected by the Compact or Comfortable mode setting. In compact mode, less padding is applied. More padding is applied in the comfortable mode.

Icon size in Software FactoryIcon size in Universal GUIButton size Compact modeButton size Comfortable mode
16*16, 20*2020*2032*3240*40
24*2428*2840*4048*48
32*32, 40*40, 48*48, 64*6436*3644*4456*56

The icon size set for task bar icons also applies to icons in the action bar at the top.

Preview component​

Supported file formats​

The preview component supports a wide range of file formats, including but not limited to:

  • Images (.jiff, .jpg, .jpeg, .bmp, .png, .ico, .svg, .gif)

  • Text files (.txt, .cs, .java, .ini, .log, .bat and .sql)

  • Web pages (.html, .htm, .xml, .gif, .msg and .svg)

  • XML files (.xml)

  • Universal GUI Outlook emails (.msg, .eml)

    note

    Users can download attachments in emails directly from the preview.

  • PDF and PostScript files (.pdf and .ps)

  • URLs

If a preview cannot be generated for a file, the preview component will state 'No preview is available'.

Add a button for opening the preview​

Universal GUI

Due to some technical limitations, such as CORS, the Universal GUI cannot always show URLs in preview components. To solve this, you can add a preview button to the preview component to open the previewed content in a new tab. It is also available to show a file larger in a separate browser tab.

To add this button:

menu User interface > Screen types > tab Screen components > tab Screen component properties

  1. In field Screen component prop., add the property showPreviewOpenButton with value True.

Enable Cross-Origin Resource Sharing (CORS)​

By default, a website only allows requests that come from the same origin (domain). If you host a website yourself and you want to allow requests from another origin, you can use Cross-Origin Resource Sharing.

This concept also applies to previewing websites for another domain in the Universal GUI. This is only possible if the request is allowed in the configuration of the website you want to preview.

Scheduler component​

note

For Windows GUI and Web GUI, a scheduler can only be created with an object model extender.

Universal GUI
  1. Place the Scheduler screen component in the screen type.
  2. For more information about setting up the Scheduler, adding views with a different time scale, and an overview of its available features, see the Scheduler manual.

FormList component​

Windows GUI Universal GUI

A formlist can be created by using a screen type that contains a FormList component. A formlist uses the subjects and columns Form settings for visualization and positioning.

The FormList component shows the content of multiple rows within a single form. A formlist is always in edit mode. There are no action buttons, every change is automatically saved. Formlists are used to display dynamic forms that can have different control types.

Suppose a survey contains multiple questions with different types of answers. For example, a full name (string), a birth date (DateTime), and a Yes/No checkbox that indicates whether the user wants to receive commercial emails or not. Using a formlist, this survey would look like this:

Example of a formlist

In this example, a Layout control procedure in combination with an answer type field can be used to show the correct answer field for the related question. The corresponding stored procedure is then executed to determine the visibility of each control.

Using a Group label control type in a Form or FormList component results by default in a bold (group) label. See the labels Full name, Birthdate and Allow communication in the image above.

Formlist details​

Universal GUI

In a Formlist, the Universal GUI supports the following control types: String, Number, Decimal, DataTime/Date/Time, Checkbox, Combo and Radiobutton.

  • For adjacent fields, the width is evenly distributed over the available width, regardless of the settings in menu User Interface > Subjects > tab Components > tab Form.
  • A Formlist is editable by default and works around the subject editing mechanism. Without any other editable components, like form or grid, CRUD buttons are hidden on the action bar.
  • In a default procedure, the Formlist applies new values not only to the edited column but also to other impacted columns.
  • For a layout procedure, the layout is applied after a value has been changed.
  • You can set a Formlist to refresh automatically after a value has been changed, see Refresh behavior.
  • Only the navigation layout mode can be used as layout mode.

Formlist limitations​

Universal GUI

The FormList screen component has a few limitations to be aware of when designing forms:

  • HTML and file controls are not supported.
  • Related lookup editors are not yet supported.
  • Pop-up buttons of lookup editors are not available in formlists.
  • There can only be one form column. Multiple form columns are not supported.
  • When grouping controls for a single record, the options Field in next group and Field on next tab page are not supported.
Was this article helpful?