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.

Assigning a screen type

To assign a screen type to a subject, follow these steps:

menu User interface > Screen types > tab Screen types

1. In the left list of screen types, select the screen type that has to be assigned to a specific table .
2. Select the relevant table(s) and variant(s) in the Assign to subjects tab to which this screen type has to be assigned.
3. Use the Assign screen type tasks to assign the selected screen type to the desired screen type levels of the selected subjects.

Assigning screen types

If a selected screen type is used by a subject, then 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.

Designing a screen type

To design a custom screen type, a new screen type first has to be created in the Screen type overview.

menu User interface > Screen types > tab Screen types

The ID, and possibly a definition of this new screen type, is specified here.

note

Thinkwise recommends keeping the name of the screen type abstract, since it could be used in several places. Therefore, not customer but for instance parallel_detail.

When a screen type is especially developed for one process, then this screen is not suitable for use with other subjects. By turning off Available for user preferences, this screen is not displayed in the user interfaces when switching screen types with user preferences.

When a new screen type is created, it can be designed on the tab Design. This tab consists of a number of parts which are explained in more detail in the table below.

Designing a screen type

1. Abstract components - In this component, an overview is presented of the available abstract screen components that can be dragged onto the work sheet.
2. Preview - With the help of these buttons, a screen type can be tested on an existing end product.
3. Work sheet - This is the work sheet on which the various components are dragged to construct a screen type.
4. Overview of properties - The properties of the selected component are presented here. These can be manually adjusted.
5. Save and reset - The modifications can be saved or undone using these buttons.

Add a screen component

All the components listed below can be dragged and dropped onto the work sheet to compose the required screen. When the first component is dragged onto the work sheet, it will fill the complete page. When another component is subsequently dragged onto the work sheet, a frame will appear at the position where it is dragged to. The components on the work space can be moved freely by dragging.

It is possible to display several button bars and the filter next to each other instead of below each other. This allows more efficient use of the available space. White space between the various components (prefilter, report, tasks and filter) is added automatically.

Available screen components

The following components are available that can be dragged onto the work sheet:

Icon	Component	Explanation	Properties
	Tab container	The 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 tiles	This component shows the subject details in tiles. Clicking on a tile will open a new document.
	Grid	Shows multiple records in a grid. The user interface will remove the grid if there can only be at most one line.	Show grid header (True/False)
	Form	Data from one row can be presented and modified in the form.
	Formlist	This component displays 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.
	Search form	The search form provides an overview of the (limited) search set on the screen. The search result is marked, and all other rows remain visible.
	Filter form	The 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 bar	A 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 bar	A button for all cube views is displayed in this bar. The user interface will remove this component if there are no cube views.	Alignment (Left/Right or Top/Bottom)
	Task bar	A button for all tasks is displayed in this bar. 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. See also Task bar component icon sizes. Universal GUI - A task bar must be placed horizontally. Task bar buttons are not sizable.	Alignment (Left/Right or Top/Bottom)
	Task tiles	Universal GUI All tasks assigned to the subject will be displayed as tiles.	Alignment (Left/Right or Top/Bottom)
	Report bar	A 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 tiles	Universal GUI All reports assigned to the subject will be displayed as tiles.	Alignment (Left/Right or Top/Bottom)
	Treeview	Displays a tree structure. The user interface will remove the structure if there can only be at most one row. See also Tree view properties
	Filter	The filter can be used for quick filtering 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)
	Dashboard	Displays 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.
	Map	The Maps component displays 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.
	Preview	Displays the first column of a table that contains a file link or path (for instance a URL or a file upload column).
	Pivot table	Provides the possibility to display a pivot table. The user interface will remove the pivot table if there is no cube definition for the table.
	Pivot table fields	Provides the possibility to display 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.
	Graph	Displays a graph on the screen. The user interface will remove the pivot table if there is no cube definition with a graph for the table.
	Scheduler	The scheduler displays 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 list	Universal GUI This component shows records as cards, with an image and title, in a scrollable list.
	Action bar	Universal GUI This component replaces the default action bar, and can be placed anywhere on a screen in a horizontal position.
	RSS	Displays 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.

Settings for screen components

The Screen components tab displays an overview of the selected screen type's components in a tree structure. Several advanced settings for the screen type can be adjusted here.

menu User interface > Screen types > tab Screen components

Depending on the horizontal or vertical orientation of the component:

1. Set the Height or Width to a fixed number of pixels or a percentage.
2. In fields Height unit and Width unit, select 'Percentage' or 'Pixels'.
3. Check the box for option Fix on resize.

Screen preview

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

First, connect to an end product by clicking the Connect button. Then select the table which it needs to be connected to and click the Preview button. A new document will open inside the Software Factory development environment, showing the screen type applied to the selected subject.

The model is re-loaded with the Refresh button.

note

When making the connection, use the Thinkwise Mock Database provider to display a preview without the end product. The preview is then displayed with dummy data.

Hide the action bar

Universal GUI

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.

Checkbox for hiding the main action bar

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

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.

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

For every screen type in the Software Factory, one or more breakpoints can be defined. A breakpoint consists of a Breakpoint in pixels and a Breakpoint screen type. When the width of a screen type becomes smaller than the defined number of pixels in Breakpoint, then the screen type changes to the Breakpoint screen type.

Breakpoints debug mode

Universal GUI

In 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

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

It is possible to define more breakpoints:

Breakpoint (px)	Breakpoint screen type
600	master_detail
400	card_list_form
200	card_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 of a breakpoint set-up

Tab container component

The tab page container has two functions:

• Tab pages for components
• Tab pages for details

If you add a tab page container to your screen type, it contains a component tab by default. You can use the context menu to add extra tabs, and to change a component tab to a detail tab and vice versa.

A tab page container

Component tab page

To insert a component tab with components:

menu User interface > Screen types > tab Design

1. Drag a Tab container component into the Design area.

2. Right-click on the tab container and select Edit tab pages from the context menu.

On the right-hand side of the screen, it is indicated for each screen component whether its size must remain fixed when changing the size of the screen.

By setting up a tab control for a component tab, you can influence the translation and the icon of the tab. New controls can also be added via the Tab controls tab. The standard can be overwritten by adding a custom icon and translation.

Detail tab page

To insert a detail 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. Indicate which details should be displayed by selecting a tab control on the right-hand side of the screen.

   By default, you can select one of the options A, B and C, but new detail controls can also be added under Detail groups. You can also add your own icon here, hide tab headers and borders, set the tab orientation, or set the tab as a fallback group.

   Detail tab page groups

5. Indicate if the detail group can be used as a fallback group.

Hiding tab headers and borders in the screen type modeler

menu User interface > Screen types > tab Design

You can hide the tab header completely or only hide its border. Select a tab container, and use the following tab properties to achieve this:

• Show tab header
• Show borders

These fields can both be set to false to hide their respective properties.

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.

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 Tab orientation property to Vertical:

Tab orientation property in the screen type modeler

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

You can set up fallback groups in menu User interface > Screen types, either on tab Design or 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 present	Detail container B present	Fallback detail container	Result
Yes	No	None	Only detail tab pages assigned to detail group A are visible (in container A).
Yes	No	A	All detail tab pages are visible in container A.
Yes	Yes	None	Detail group A is shown in container A. Detail group B is shown in container B Undetermined detail tab pages are not visible.
Yes	Yes	A	Detail group A is shown in container A. Detail group B is shown in container B. Undetermined tab pages are shown in container A.
Yes	Yes	A & 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.

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.

Task bar component icon sizes

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

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 Factory	Icon size in Universal GUI	Button size Compact mode	Button size Comfortable mode
16*16, 20*20	20*20	32*32	40*40
24*24	28*28	40*40	48*48
32*32, 40*40, 48*48, 64*64	36*36	44*44	56*56

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

Preview component

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

  You 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'.

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 or Web 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 and restrictions

Universal GUI

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

• HTML, file, lookup, and combo box controls are not supported.
• There can only be one form column. Multiple form columns are not supported.
• 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.
• When grouping controls for a single record, the field in next group and field in next tab options are not supported.
• A formlist is default editable and works around the subject editing mechanism. Without any other editable components, like form or grid, CRUD buttons are hidden on the action bar.
• A formlist patches directly to the table just after changing a value. To keep the editing experience fast and smooth, no data is refreshed and field visibility is not updated.
• After changing a field value, layout changes (whether fields are visible or not) are not performed.
• After changing a field value, other dataset changes are not visible instantly.
• As layout mode, only the navigation layout mode can be used.