Skip to main content

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

Bar components​

Action bar​

By default, the action bar is shown at the top of your application screen and provides quick access to various features. The available options will vary depending on the permitted actions of the current user. It can include:

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 tasks and reports separately from the action bar, you can add a dedicated Task bar or Report bar component to the screen. The tasks and reports will then be moved to the new 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

Prefilter bar​

The prefilter bar shows a button for each prefilter and enables users to filter the subject's dataset. The user interface will remove this component if no prefilters are present.

For more information about the configuration of prefilters, see Prefilters. To include a prefilter bar within the action bar, see Bar within an action bar.

Cube view bar​

The cube view bar shows the available cube views as buttons. The user interface will remove this component if no cube views are present.

For more information about cube views, see Cube views. To include a cube view bar within the action bar, see Bar within an action bar.

Report bar​

The report bar contains the available reports. The user interface will remove this component if no reports are present.

For more information about the configuration of reports, see Reports. To include a report bar within the action bar, see Bar within an action bar.

Task bar​

The task bar shows all available tasks as buttons on the screen. The user interface will remove this component if no tasks are present.

For more information about the configuration of tasks, see Tasks. To include a task bar within the action bar, see Bar within an action bar.

The search bar enables users to enter keywords or phrases to find specific information.

For more information about the configuration of a search bar, see Search in a grid. To include a search bar within the action bar, see Bar within an action bar.

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:

task tiles 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.

popup from grid or 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:

popup from 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.
  • Users can show or hide read-only columns in grids with the option Grid in the overflow menu.
  • Users can lock several columns to keep them always visible as long as there's enough space. These locked columns are separated from the others by a vertical line. This option is available in the overflow menu > Grid > Lock columns until. For more information on the configuration of fixed columns in your application, see Number of columns fixed in a grid.
  • 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 Allow 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.
  • Users can change multiple records in a table at once using the Update option from the overflow menu. The Update option is unavailable while the subject is in edit mode.

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

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:

Preview​

The Preview screen component shows a detailed view of the selected item. A wide range of file types can be previewed, such as images, text files, and PDFs. In some cases, a Preview button is available to open the preview in a new tab.

For more information about the configuration of the Preview screen component, see Preview component.

Pivot table​

In business intelligence, datasets ('data cubes') are visualized in a pivot table or a chart, or both. It is possible to create predefined views (cube views) of the data.

Various screen components are available for pivot tables:

  • Pivot table - displays data in a table format, with aggregated information such as sums, totals, or averages. Dimensions and numeric information are displayed as categories (rows) and series (columns).
  • Pivot table fields - allows users to modify a series and categories and create a customized overview of the pivoted data.
  • Chart - See Chart.

Pivot tables allow users to make online analyses and to present the underlying data aggregated and sorted. Subtotals and grand totals are shown to the right of summed values. When users double-click a pivot table cell, a pop-up table opens showing the underlying data for that specific cell. This new table is read-only and adheres to any filters set on the pivot table.

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

Example of a pivot table​

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.

Pivot table

Totals in a pivot table​

To add or remove totals in a pivot table, users can select the option Pivot settings from the overflow menu. Here, they can enable and disable totals for rows and columns and choose where to show the grand totals.

For more information about the configuration of grand totals in a pivot table, see Totals for cube view fields.

Pivot settings Pivot table settings

User preferences for pivot tables​

Users can:

  • Change the fields, series, categories, and values (if the screen contains a Pivot table fields screen component).
  • Change the sort order of the dimensions by selecting the option Sort in the Cube view section of the overflow menu. The dimensions can be sorted Ascending or Descending by their display value or a value in the cube view.
  • Save their 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 (pivot table or chart). The saved cube view will show next to the model cube views.
  • Delete a custom cube view by selecting Delete cube view <name> from the overflow menu.

Chart​

The Chart screen component shows a visual representation of information. 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. It can be used independently but also in combination with a pivot table.

Chart

User preferences for charts​

In a chart, users can:

  • Do everything that is also possible in a pivot table. See User preferences for pivot tables.

  • Change the chart type and legend by selecting the option Chart from the overflow menu. 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

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 collapse and Expand all expand 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:

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. For more information about the configuration of a formlist, see Formlist component.

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

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 Universal resource scheduler Example of a resource scheduler in Universal GUI

Was this article helpful?