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.

  2. 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 General screen component settings.

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 bars and filters both horizontally and vertically in a screen. In both cases, you can place them 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 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 Properties 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 > group Settings

  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 > group Settings

  1. Select the checkbox Hide breadcrumb.

Configure a maximum screen size for modal screens​

Universal GUI

A modal screen is a screen that overlays the main application. When a modal screen is active, the user cannot interact with the main application. A modal screen is often used to display additional information such as an alert, a confirmation, or a form.

You can configure a maximum height and width for a modal screen. This is useful when a document is opened in one of the following ways:

  • as a lookup pop-up.
  • as a Floating window or as a Modal document when using the Open document process flow action.
  • as a Floating window or as a Modal document when using the Zoom detail process flow action.

To configure a maximum screen size:

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

  1. In the group Modal size (Universal GUI only), select one of the following options in the fields Max. height and Max. width:
    • Automatic - The GUI determines the width and height of the screen type.
    • Maximum - The GUI uses as much width and height as possible within the screen or browser limits.
    • Custom - A number of pixels, for example 850, which will not be exceeded.

The modal settings from the initial screen type will be used for lookup pop-ups, floating windows, and modal documents. Settings from subsequent breakpoint screen types will not be applied when the breakpoint is activated.

Configure a maximum screen size

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

Screen areas​

Introduction to screen areas​

A screen area can be seen as a group of similar information in a screen type. You can use screen areas to organize information, for example:

  • Configure details hierarchically or in a related way.
  • Place buttons at different locations on a screen.

If a screen area is not available in the assigned screen type, the detail, bars, or tiles will be shown in the Fallback area.

Create a screen area​

You can create your own screen areas and name them as suits your needs, for example:

  • A, B, C, etc.
  • General, Specific, Related, etc.
  • Human resources, Financial, Logistics, etc.

To create a screen area:

menu User interface > Screen types > tab Screen areas

  1. Add a new screen area and enter a name.
tip

The tab Usage shows where the screen area is being used. This can be helpful when, for example, you want to make a change to the screen area and see what impact this might have.

For more information on this generic feature, see Usage.

Assign a screen area to a screen component​

In a screen type, you can assign a screen area to the following components:

  • Tab containers with subject details - see Add a tab container with subject details
  • Detail tiles
  • Prefilter bar
  • Cube view bar
  • Task bar and Task tiles
  • Report bar and Report tiles
  • Universal GUI Actions in the Action bar or Custom action bar related to tasks, reports, prefilters, and cube views. See Action bars.

To assign a screen area to a screen component:

menu User interface > Screen types > tab Design

  1. Add a screen component to your screen type.
  2. In the Properties panel on the right-hand side of the screen, select the Screen area.

Assign a screen area to a screen component

If you have assigned a screen area to a screen component, you can link an object to the same screen area. That object will then be shown in that screen component. This is possible for:

Screen area example​

Example: How we configured the tab General settings for branches in the Software Factory

menu Models > Model overview > tab Branches > tab General settings

This example explains how the tab General settings and all its detail tabs are configured in the Model overview.

All General settings for a branch

The screen type and screen area configuration for this screen

menu User interface > Screen types > tab Design

The screen type for this tab is called branch_maintenance, as shown in the image below.

  • The tab container for General settings is Tabbed1TabPage 18
  • It contains one detail tab page Tabbed8DetailTabPage5.
  • To this detail tab page, we assigned the Screen area = general_settings.

Screen area = general_settings

The tables that have been linked to the same screen area

All tables that must be available as a detail tab to the tab General settings have been linked to the same screen area as the detail tab page:

menu User interface > Subjects > tab Default/Variants > tab Links > tab Details

For each detail, the Screen area has been set to general_settings. As a result, all details are shown in their own tab page underneath the tab General settings.

Details and their screen areas

Fallback areas​

Introduction to fallback areas​

menu User interface > Screen types > tab Design

It is possible to assign detail references, task and report tiles, and task, report, prefilter, and cube view bars to a specific Screen area in the model. If this screen area is not available in the assigned screen type, the details, tiles, and bars, will be shown in the Fallback area. If no fallback area is present in the screen type, the detail references will not be shown. If multiple fallback areas are provided, the GUI will decide where to show the details.

You can use fallback areas to, for example:

  • Manage where details that do not belong to any screen area 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 screen area, 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 screen type master_detail. This screen type uses screen area '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 screen areas 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 a fallback area​

To set up a fallback area:

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 area.
  • On tab Screen components, select the checkbox Use as fallback area for the screen component(s) that will be the fallback area.

Fallback area scenarios​

Five distinct fallback area 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 screen areas specified in subjects: A, B, and undetermined. There are two detail tab pages: A and B. In some scenarios, only page A is present.

The table below shows in which detail tab page(s) the screen areas are displayed in each scenario.

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

Fallback area 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 screen areas are available: 'A' and 'B'. The 'ZOOM' screen type, however, only contains screen area 'A'.

Using the fallback option, you can either group all details ('PRICES' and 'LOCATION') into the fallback area or hide all screen areas 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 screen area 'A' to 'PRICES' and screen area 'B' to 'LOCATION'.
  2. In the 'ZOOM' screen type, set Fallback allowed to False.

This will ensure that all details assigned to screen area '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 Cubes.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 default 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 settings
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 Cubes.
Cube panelProvides 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 Cubes.
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 Cubes.
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
The default action bar for the Universal GUI. It can be placed anywhere on a screen, both horizontally and vertically.
Custom action barUniversal GUI
A custom action bar for the Universal GUI. It can be placed anywhere on a screen, both horizontally and vertically.
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​

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

Screen component properties​

To change the properties of a screen component:

menu User interface > Screen types > tab Design

  1. Select the screen component.
  2. In the Properties panel on the right-hand side of the screen, adjust the properties.

Icon sizes, button and text sizes​

You can set the icon sizes for the following screen components: prefilter bars, task bars, cube view bars, report bars, action bars (Universal GUI only), and custom action bars (Universal GUI only).

Universal GUI In the Universal GUI, the icon size is determined by the selected mode: Compact or Comfortable. In Compact mode, less padding is applied, while more padding is applied in Comfortable mode. Since the Universal GUI is a responsive user interface, icon and button sizes are converted by the Universal GUI to the sizes illustrated in the tables below.

Icon sizes

Software FactoryUniversal GUI (Compact mode)Universal GUI (Comfortable mode)
16×16px, 24×24px16×16px32×32px
24×24px24×24px32×32px
32×32px, 40×40px, 48×48px, 64×64px32×32px36×36px

Icon size for icon + text buttons

Software FactoryUniversal GUI (Compact mode)Universal GUI (Comfortable mode)
16×16px, 24×24px16×16px24×24px
24×24px16×16px24×24px
32×32px, 40×40px, 48×48px, 64×64px24×24px24×24px

Button sizes

Software FactoryUniversal GUI (Compact mode)Universal GUI (Comfortable mode)
16×16px, 24×24px24px high40px high
24×24px32px high48px high
32×32px, 40×40px, 48×48px, 64×64px40px high56px high

To set the icon size for a screen component:

menu User interface > Screen types > tab Design

  1. Select the screen component.
  2. In the Properties panel on the right-hand side of the screen, select an Icon size.

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

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.
  6. To change the tab container's label and icon, see Tab container label and icon.

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 tab container with subject details​

To insert a tab container 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.

  4. In the Properties panel on the right-hand side of the screen, select a value for the following settings:

  5. If necessary, configure this component. See General screen component settings.

Tab container label and icon​

Each tab container has a header with a label and an icon:

  • For a component, you can change the default label and icon to better describe the content of the tab component. The following defaults are used:

    • The screen component name is used as label.
    • The subject icon is used as icon.

  • For a detail tab header, the name and icon from the underlying table are used. This cannot be changed.

note

The Universal GUI only shows tab icons when the extended property ShowTabIcons is enabled.

To change the label and icon in the tab component:

menu User interface > Screen types > tab Design

  1. In the Properties panel on the right-hand side of the screen, enter a Tab page label and select a Tab page icon.

A translation object is automatically generated.

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 - Select True or False to show the tab label and icon or not. If you select False, the tab header is hidden.

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 Properties panel on the right-hand side of the screen, 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 Screen area setting in the Properties panel on the right-hand side of the screen. See Screen areas.

    • In the Subjects details screen, you can distribute the subject details among the screen areas.
    • If a screen area is not available in the assigned screen type, the detail references are shown in a fallback area. Detail tiles are removed if no details have been defined.

Action bars (Universal GUI)​

Types of action bars​

Universal GUI

Two types of action bars are available for the Universal GUI:

  • Action bar (Universal GUI only) - This is the default action bar. When added to a screen type, you can only include or exclude predefined actions. In its default configuration for a branch, you can change the order, display type, screen area, and fallback settings.
  • Custom action bar (Universal GUI only) - When added to a screen type, you can include or exclude predefined actions, and change their order, display type, screen area, and fallback settings.

Both bars have two sides:

  • Near - The left (horizontal) or top (vertical) side of the action bar.
  • Far - The right (horizontal) or bottom (vertical) side of the action bar.

Both action bars have a single overflow menu at the far side of the screen. For each button, the fallback display type behavior to the overflow menu is evaluated individually, starting at the far side of the screen. By default, this means that all tasks, reports, and CRUD buttons will move to the overflow menu before any prefilter. Search will be the last to fall back to icon size or the overflow menu.

Place an action bar in a screen type​

Universal GUI

It is allowed to place multiple Action bars and Custom action bars in a screen type. Each bar can be configured differently.

To place the action bars horizontally or vertically in a screen type:

menu User interface > Screen types > tab Design

  1. In the Abstract components panel at the left, select the Action bar or Custom action bar.

  2. Drag the bars into the design area.

  3. In the Properties panel at the right, select the Icon size.

  4. Configure the bars. See:

A grid with an Action bar (horizontal) and a Custom action bar (vertical)

Configure the default Action bar settings​

In the default configuration of the Action bar for a branch, you can include or exclude actions, and change their order, display type, screen area, and fallback settings.

To configure the default settings for the Action bar for a branch:

menu Model overview > Branches > tab General settings > tab Default action bar

The following options are available:

  • To add or remove actions: select an action and execute the task Exclude action or Include action .
  • To move an action to the Near or Far side of the action bar, execute the task Swap side .
  • Select a Screen area for the action. For more information, see Screen areas.
  • Select the checkbox Allow as a fallback bar to use this action as a fallback bar if the default action bar is not available. This is only available for actions related to bars with a screen area. For an overview, see Assign a screen area to a screen component.
  • Select the Default display type.

    For example, Icon + text (> text > icon) means that the report is displayed as an icon with text. On a smaller screen with less space, it is displayed as text (the first fallback: > text). With even less space, it is displayed only as an icon (the second fallback: > icon). The overflow menu is always the last fallback type, except for the display type Hidden.

  • To change the order of the actions, execute the task Move action up or Move action down .

Set up an Action bar for a screen type​

To deviate from the default Action bar settings for a branch, you can include or exclude actions for a screen type:

menu User interface > Screen types > tab Action bars

  1. Select an Action bar.
  2. Select an action and execute the task Exclude action or Include action .

Changing more settings is only possible in the default configuration of the Action bar for a branch. If changing the default settings is not desired, you can use a Custom action bar in your screen type instead.

Action bar with an excluded action

Set up a Custom action bar for a screen type​

In a Custom action bar, you can include or exclude actions, and change their order, display type, screen area, and fallback settings.

To set up a Custom action bar:

menu User interface > Screen types > tab Action bars

  1. Select a Custom action bar.

    When you first set up a Custom action bar, all actions are excluded and unassigned by default. The following options are available:

  • Select an action and execute the task Include action .
  • The action is assigned to the Near or Far side of the action bar. To change the side, execute the task Swap side .
  • Select a Screen area. For more information, see Screen areas.
  • Select the checkbox Allow as a fallback bar to use this action as a fallback bar. This is only available for actions related to bars with a screen area. For an overview, see Assign a screen area to a screen component.
  • Select the Default display type.

    For example, Icon + text (> text > icon) means that the report is displayed as an icon with text. On a smaller screen with less space, it is displayed as text (the first fallback: > text). With even less space, it is displayed only as an icon (the second fallback: > icon). The overflow menu is always the last fallback type, except for the display type Hidden.

  • To change the order of the actions, execute the task Move action up or Move action down .

Custom action bar configuration

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.

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.

Preview embedded HTML forms​

Universal GUI

By default, HTML forms embedded within a webpage are not allowed to submit data when using the Preview screen component. You will get the following message: 'Blocked from submission to (your website)'.

You can solve this by setting the extended property UnsafePreviewAllowForms to True. See Available extended properties.

warning

Only enable this feature if you trust the contents of all web pages you intend to embed. HTML forms do not enforce the Cross-Origin Resource Sharing restrictions typically applied to web requests. This means that forms can access external websites that would otherwise block such requests.

Enable Cross-Origin Resource Sharing (CORS)​

By default, a website only allows requests that come from the same origin (scheme, host/domain, and port). 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?