Screen components

Introduction to screen components

General information about the screens in the Universal user interface is described in the Basics.

Some of the components that you can use in a screen are described here.

Cardlist (limited set of columns)

The Cardlist is a screen component that you can use to show your users a limited set of columns for multiple rows of the current subject. The rows shown are limited by any search conditions or active prefilters. If the cardlist is placed in a detail tab, only the rows that belong to the selected parent row are shown.

The overflow menu on each card gives access to clickable content on the card, like an email address, photo, website or phone number.

Cardlist with an opened overflow menu to download the employee's photo

Buttons and tasks

Action bar

By default, an action bar is shown in your application (at the top). Depending on the permitted actions for the current user, the action bar contains:

• buttons - to add, copy, edit, and delete rows or to refresh the data.
• tasks - to execute processes relevant to your application, like Generate invoices, or to preview printable documents, called reports.

Action bar containing a task button and a report button

Users can:

• Select the add, copy or edit buttons. The user interface automatically navigates to a component that is capable of editing data, such as the Form, even if it is located on another tab.
• Hover over an icon in the action bar to see the name of the action and the shortcut key, if any, in a tooltip.
• Execute tasks and reports.

Action bar tooltip

To change the configuration of the action bar:

• To display tasks as tiles, see Tiles instead of buttons.
• To replace the default action bar at the top with a custom Action bar elsewhere on the screen, you can use an action bar screen component. In that case, the default action bar is no longer shown.
• To show the task in a separate task bar instead of the action bar, you can add a Task bar component to the screen. The tasks will no longer be displayed in the action bar. See Task bar component.
• To configure the display type for tasks and reports in the action bar, see Create a table task and Table reports. Depending on the space available for the action bar, tasks and reports can be shown as buttons with an icon and text, icons only, or in the overflow menu.

Tasks in the overflow menu

Tiles instead of buttons

Tasks and reports can be displayed as tiles instead of small buttons. Users can select one to execute the task or report.

See Tasks from a tile menu or Reports from a tile menu.

Example: report tile

Grid

The Grid component shows multiple columns for the current subject's rows, possibly limited by a search condition or prefilter. See also Search and Filter.

If the grid is in a detail tab, only the rows that belong to the selected parent row are shown.

Execute a task for multiple rows on a mobile device

In a grid, it can be convenient to execute a task on multiple rows.

To select multiple rows on mobile and tablet devices, users can:

1. Long-press on a single row. Checkboxes will appear for each row.

2. Use the checkboxes to select more rows. The number of selected rows is displayed in the top bar.

3. Execute the task. If parameters apply, a single dialog is displayed for all of the rows.

To select all rows, users can:

1. Check the Select all -/Deselect all v box in the grid header.

To turn off the multi-selection, users can:

1. Select the Cancel X icon in the top bar.

The following restrictions apply:

• Since the top bar displays the selection, a user can select multiple rows in only one grid at a time.
• Multi-select is not possible in Edit mode.
• If a task has a Popup for each row setting, this popup will be displayed for all selected rows. It is not possible to abort this flow. See Create a task.

Open a lookup pop-up from the grid

There are several ways to open a look-up pop-up from a grid:

• In a grid and a form, users can open a look-up with a magnifying glass next to a field.

Example: a form field with a look-up popup

• Or, if they are not editing a row and no form field is available, users can open a lookup pop-up from the overflow menu:

Opening a look-up popup from the overflow menu

• Users can also use the Ctrl + Alt + P shortcut to open the lookup for the field that is currently selected. The shortcut only works when the grid component has focus.

Columns in a grid

• If not all columns fit within the available space, users can scroll to the other columns with a horizontal scrollbar.
• To keep a number of columns visible, users can lock a number of columns so they will always be shown as long as there is sufficient space. These columns are separated from regular columns by a vertical line. This option is available in the overflow menu > Grid > Lock columns until.
• Users can change the current sort order by using the arrow icons next to the column names.
• Users can change the column width manually by dragging a border. See Enlarge or reduce components.
• If a column contains a domain with elements, users can filter the values from the column header. See Filter in a column header.
• If a column contains a lookup column with elements, users edit a value from a control in the cell. See Select a value in a column.
• Users can change the grouping of a grid by dragging a column header to a group box. To enable this feature, see Grouping in a grid.

Rows in a grid

• Grids can contain a pinned top row. If adding records is allowed, users can add or copy a row here. See Allow adding new records to the grid.
• Users can navigate through records using the arrow keys. When a drop-down control is reached in a default editable grid, the arrow up and down keys will open the control instead of navigating to the next record.
• Users can drag and drop rows in a grid. See Drag and drop.

Grid with one fixed column, sorted by Customer name. At the top, you can add a new row, or copy a row.

Pivot grid

A Pivot table screen component displays aggregated source data in grid format, with aggregated information such as sums, totals, or averages. Pivot grids allow users to make online analyses and to present the underlying data aggregated and sorted.

In a pivot grid, dimensions and numeric information are displayed as categories (rows) and series (columns). As an example, the screenshot below visualizes four dimensions:

• At category level, data is grouped by three dimensions, primarily by Mechanic, then Year fixed, and then Contract type.
  To view each individual Contract type with its Hours estimate and Hours worked numeric information, users can click the arrow icon. This expands or collapses the Mechanic dimension, and then Year fixed.
• The fourth dimension is the location where mechanics work. In the example, this can be Apeldoorn, Hardenberg, and Harderwijk, respectively. On the right are the three associated series.

If a category-level dimension contains a numeric value, these values are automatically aggregated (by using a sum, average, or count). For example, in the screenshot below, the total number of Hours worked for Bakker, Gerrit in 2017 is 108.

Subtotals and grand totals are shown to the right of summed values.

When users double-click a pivot grid cell, a pop-up grid opens showing the underlying data for that specific cell. This new grid is read-only and adheres to any filters set on the pivot grid.

For more information about the configuration of pivot grids, see Business intelligence.

Pivot grid

Pivot table fields

A Pivot table fields screen component allow users to modify a cube's series and categories and create a customized overview of the pivoted data.

User preferences for pivot table fields

After changing the series, categories, or values in the pivot table fields, a user can save them as a custom cube view by selecting Save as cube view from the overflow menu. They can enter a name for the cube view and select the default view type.

If the name already exists, a user must confirm if they want to overwrite the existing custom cube view or enter a different name.

The saved cube view will show next to the model cube views. Users can select Delete cube view <name> from the overflow menu to delete an active custom cube view.

Tree (hierarchical or grouped data)

The Treeview screen component displays hierarchical or grouped data. In a tree view, users can:

• Click on the arrows in front of a row or use the RIGHT and LEFT arrow keys to open or close a group.
• Select Collapse all and Expand all from the overflow menu to expand or collapse all the items in the tree view. An active row is always expanded.

For more information about the configuration of tree views, see Tree settings.

Treeview

Edit

Form

The Form screen component shows the content of a single row, currently selected in a cardlist or grid component. In a form, users can:

• Create a new row on the current subject by selecting the Add or Copy buttons in the Action bar.
• Modify an existing row by selecting the Edit button. The user interface will automatically navigate to the Form of the current subject, even if it is located on another tab.
• Scroll vertically to access more fields if there are more fields than can fit in the available space.

For more information about the configuration of forms, see:

• Form settings.
• In a form, controls are used to display and edit different types of data. See Controls.

Editing a row in a form

Formlist

In a Formlist screen component, users can start editing right away. A formlist does not contain action buttons: every change is automatically saved.

Example

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

Example of a formlist

Select a value in a column in a grid

If a column contains a domain or lookup column with elements, users can select the values from a control in the column.

See:

• Domain elements for COMBO, IMAGE COMBO, and RADIO BUTTON.
• Use a column as a lookup

Chart

The Chart screen component shows a visual representation of information using, for example, a stacked bar chart. If a chart is displayed in a detail tab, and if the detail tab is related, it will only show the data for the selected parent row.

In a chart, users can:

• Use prefilters in the filter bar to show only subsets of data.
• If multiple cube views are available, switch between graphs using the buttons in the Actions bar.

Chart

User preferences for charts

Users can change the chart settings. The option Chart settings is available in the overflow menu of the taskbar.

In the popup, users can adjust the chart type and the legend.

If a legend is available, the following settings can be changed:

• Horizontal alignment (left, center, right)
• Vertical alignment (top, center, bottom)
• Legend direction (left to right, right to left, top to bottom, bottom to top)

Chart settings

Scheduler

In a Scheduler screen component, appointments or tasks are visible in a timeline.

If available, users can:

• Drag & drop - Change the start- or end date of a row manually or by dragging the resource horizontally.

• Zoom in or out to another timescale. This can provide a better overview. When reopening the Scheduler window, the last chosen timescale is displayed. This preference is saved in the user's browser (for example, Google Chrome on their device) but is not persisted across browsers or devices.

• Not yet available:

  • Double-click tasks or appointments.
  • Double-click time cells.
  • Drag & drop an external row, for instance, from a grid.

Example of a resource scheduler in Universal GUI