Universal GUI User Manual

The Thinkwise Universal user interface is the latest Thinkwise interface, providing an ultra-modern user experience on mobile devices, desktop and web.

The Universal user interface is a fully responsive Web App that runs on any device and automatically adapts to the device's characteristics, such as the screen size and input method. The Universal user interface is deployed as a web application but, being a Progressive Web App, it can be easily installed to the user's device, just like a native desktop or mobile app. It can leverage native device features, such as the camera and location services.

The current version of the Universal GUI is suitable for use in a production environment, but does does not yet provide all features that are available in the other Thinkwise user interfaces.

info

If you want to use the Universal GUI for your application, then please make sure you are aware of the limitations. More information about the supported features can be found in the Universal blog posts on the community and in the feature matrix in the Thinkwise Community Portal (menu item Software > Feature Matrix).

A new version of the Universal GUI with additional features is released every three weeks. A basic version of all major features has been available since the end of 2020.

This user manual describes the general features and operation of the Universal user interface. For application specific features, please refer to the user manual of the relevant application. The examples and images in this manual are based on the 'Thinkwise Insights' demo application.

Logging in

After opening the Thinkwise web application in your browser, the login screen is displayed.

1. Enter your username and password.
2. If necessary, check the Remember me box to stay logged in for two weeks.
3. Press LOGIN.

The Login Screen

Logging out

To logout of the application, select the Logout option in the user menu. The application will return to the login screen.

Logout of the application

Change password

If allowed, you can change your password in the menu Your username > User preferences. A new screen is opened where you can change your password. After that you have to log in again.

You can only change your password if all changes are saved or canceled.

Main screen

When the program starts a screen similar to the one shown in the following example is displayed.

The main screen

This screen consists of three parts:

1. The header
2. The menu
3. The work screen

Header

The header contains the menu button on the left, to show or hide the menu. Next to the menu button, the title of the currently active document is displayed with underneath it information about the selected record, if any.

On the right of the header, your username is shown. Clicking on your username opens the settings menu, showing options to change your preferences, show the About screen or log out of the application.

The header

User preferences

To change your preferences, select Your username > User preferences.

The User preferences screen contains:

• Theme - the option to switch between a light and dark theme. The selected theme is stored in the browser cache and will therefore be applied to all applications using the Universal GUI on the same device.
• Change password.
• Density - Compact mode offers less whitespace and more data on your screen. Comfortable mode offers more whitespace and less data.

User preferences

About

To view the version information and release date of your application, select Your username > User preferences > About.

About screen

Menu

The menu of an application can be displayed as a classic menu, with groups and items, or as a tiles menu.

Classic menu

The classic menu contains menu groups and items that you have access to. Clicking a menu-item opens the corresponding screen. Pressing Ctrl and clicking a menu-item opens another instance of the corresponding screen.

Numbers displayed next to a menu-item, called badges, indicate that the user's attention is required for that subject. For example, tasks to be completed or unread emails.

Classic menu

All open screens are shown in the OPEN DOCUMENTS section, where you can switch back and forth between screens. An open document can be closed by clicking the x next to the name. A dot • instead of an x indicates that the document contains unsaved changes and it cannot be closed at the moment.

By clicking the menu button in the header bar, you can collapse the menu to increase the available space for any open documents. By hovering over the menu it will temporarily expand over the work screen. On smaller devices, like smartphones, the menu will ways be hidden and only opens after clicking the menu button.

Collapsed menu

Tiles menu

The tiles menu displays all menu items using tiles, divided into one or more groups.

Tiles menu

The tiles menu always covers the entire screen and automatically hides after clicking a menu item. Click on the tiles menu button in the header to return to the tiles menu.

Tiles menu button

Applications

On the top left of the menu, the logo and name of the currently selected application are displayed. If you have access to more than one application, it is possible to switch to another application by clicking the application name.

Switching to another application

Working with menu tasks in offline mode

note

Availability depends on the used platform version.

When your connection is lost or unavailable, you can still use tasks from the menu. This is useful, for example, if you are a maintenance engineer working in the basement or a ship crew member at sea.

Note that switching between online and offline mode will reset your user interface.

Warning for a lost connection

At the same time, the menu is disabled, except for the tasks flagged as Offline executable.

An indicator next to the menu shows the state of the connection:

• State: offline.
• State: online without changes.
• State: online with pending changes.

After the connection has been restored, your application will not reconnect automatically but remain offline. Therefore, you need to Reconnect manually. This option becomes available by clicking on the Offline indicator.

Reconnect when your application is online again

At that moment, all offline executed tasks and their input will be synchronized, including canceled task actions. While synchronizing, a progress page is shown. After that, the GUI is build up from scratch.

Progress of the synchronization

Work screen

After clicking a menu-item, a work screen is opened displaying the relevant information for that subject. A work screen can have many different layouts and can contain different components.

Example of a work screen

Responsiveness

The Universal user interface is responsive, which means that it automatically adapts to the display size of the device used. As a result, screens at a smaller resolution can be completely different from a higher resolution. However, the functionality of the application remains unaffected.

Splitters

Components on a screen are divided by splitters, which can be moved with the mouse to make components larger or smaller. Splitter positions are retained after closing and reopening the screen and refreshing the Universal GUI.

Dragging a splitter to resize components

Screen components

The components that can be displayed in a screen are described in the following sections.

Tabs

Tabs are used to navigate between different sections within a screen. Tabs can contain one or more components displaying information of the screen's main subject (like a List of projects or a Form showing the selected project), and components for related information, like the Subprojects or Planning for the selected project. These tabs are called detail tabs.

Tabs and detail tabs appear horizontally (next to each other) by default and can also be displayed vertically (on top of each other).

Component and detail tabs

If there are more tabs than there is space available, it is possible to scroll the tab bar to the left or right using touch or clicking the scroll icons.

Scrollable tabs

Double-clicking a detail tab opens a new document and displays the detail information, filtered on the selected parent. This does not apply to mobile devices as there is no double-click functionality.

Search and filter bar

You can use the search and filter bar to find specific data in the information on your current screen:

• To find a specific word, use your own search term in the Search field. See also: I don't see the Search field or prefilter buttons.
  • To remove the search term and its results, click on the in the Search field.
• To find a specific type of data, toggle between predefined filters, called prefilters. You can recognize an active prefilter by a line underneath the button. See also: I don't see the Search field or prefilter buttons.
  • To deactivate a prefilter, click on the filter button.

The Search field and filter bar. The underlined filter is active.

• To filter for a specific value: select a cell, open the overflow menu, and select Quick filter.
  If the overflow menu or the Quick filter option is not visible, filtering is not allowed. Due to some technical limitations, you cannot use the quick filter for all types of data.
  • To turn off a quick filter, select the same cell and press Quick filter a second time.
• To clear all filters, open the overflow menu and select Clear all filters.
  If this option is not visible, filtering is not allowed. If this option is disabled (greyed out), no filter is active.

The overflow menu with Quick filter and Clear all filters

I don't see the search field or prefilter buttons?

If not enough space is available to display the Search field or all prefilters:

• Click on the search button to access the Search field.
• Or click on the overflow menu to see all (additional) prefilters.

Collapsed search and filter bar

Filter form

If available, you can filter the data on your screen using the filter fields. The data is filtered directly when pressing [Enter].

It isn't possible to change conditions (e.g., "larger than" or "not equal to").

The following data is not yet suitable for filtering:

• Columns with a date, time, label, group header label, group header icon, HTML, RTF, SQL editor, multi-line, image link, image upload, image BLOB (binary large object), file, file upload, signature, video link.

Examples of data filters

Action bar

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 - like Generate invoices or to preview printable documents, called reports.

Action bar containing a task button and a report button

When clicking on the add, copy or edit button, the user interface will automatically navigate to a component that is capable of editing data, such as the Form, even if it is located on another tab.

Depending on the space available for the action bar, tasks and reports are shown as buttons with an icon and text, icons only, or in the overflow menu. Tasks can also be displayed as tiles.

Collapsed action bar

Hovering over an icon in the action bar will show the name of the action and the shortcut key, if any, in a tooltip.

Action bar tooltip

Cardlist

The cardlist is used to show a limited set of columns for multiple of rows of the current subject. The rows shown are limited by any search conditions or active prefilters. If the cardlist is located in a detail tab, then only the rows that belong to the selected parent row are shown.

The overflow menu on each card provides 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

Grid

The grid shows multiple columns for the current subject's rows, possibly limited by a search condition or prefilter. If the grid is in a detail tab, only the rows that belong to the selected parent row are shown.

• If not all columns fit within the available space, you can scroll to the other columns with a horizontal scroll bar.
• A vertical line indicates fixed columns. These columns always stay within view.
• You can change the current sort order by using the arrow icons next to the column names.
• You can change the column width manually by dragging a border. The column widths are retained after closing and reopening a document and after a refresh.
• In some grids, when it is allowed to add records, you can click Add to add or copy a row in a pinned top row.
• You can navigate through records using the arrow keys. Note that when you reach a drop-down control in a default editable grid, the arrow up and down keys will open the control instead of navigating to the next record.

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

Available topics for Grid:

• Executing a task for multiple rows on a mobile device
• Opening a lookup popup from the grid

Executing 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:

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:

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

To turn off the multi-selection:

1. Either long-press on a row or use the Cancel X icon in the top bar.

The following restrictions apply:

• Since the top bar displays the selection, you can select multiple rows in only one grid at a time.
• You can't use multi-select 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.

Opening a lookup popup from the grid

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

Use this icon to open a look-up popup in a grid or a form field

Example: a form field with a look-up popup

Or, if you are not editing a row and no form field is available, you can open a look-up popup from the following menu:

Opening a look-up popup from the grid's menu

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

Tree

The tree component is used to display hierarchical or grouped data. Click on the arrows in front of a row or use the RIGHT and LEFT arrow keys to open or close a group.

Tree

Form

The form component shows the content of a single row, currently selected in the cardlist of grid component. Using the form, it is possible to edit existing rows or add new rows to the current subject. To create a new row, click the Add or Copy button in the Action bar. To modify an existing row, click the Edit button. The user interface will automatically navigate to the Form of the current subject, even if it is located on another tab.

Editing a row in a form

If there are more fields than can fit in the available space, the form can be scrolled vertically to access the other fields.

All controls that are available to display and edit different types of data are listed below.

Formlist

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

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 indicates whether the user wants to receive commercial emails or not. When using a formlist, this survey would look like this:

Example of a formlist

Detail tiles

Detail tiles are used to navigate to detail information of the selected parent row, like the emails or projects of the selected customer.

Detail tiles

Clicking a detail tile will open a new document that displays the detail information, filtered on the selected parent. The current parent is displayed in the title of the new document.

Emails of customer Retail Partners

Task and report tiles

Tasks and reports can be displayed as tiles instead of small buttons. Select one to execute the task or report. For more information about tasks and reports, see Action bar.

Example: report tile

Charts

The Chart component shows a visual representation of information using, for example, a stacked bar chart.

Prefilters in the filter bar can be used to show only subsets of data. If multiple charts are available, you can switch between graphs using the buttons in the action bar.

Chart

If a chart is displayed in a detail tab, it will only show the data for the selected parent row.

Scheduler

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

The following features can be available:

• Drag & drop - You can 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 your browser (for example, Google Chrome on your 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

Pivot grids

A pivot grid component displays aggregated source data in grid format, with aggregated information such as sums, totals, or averages. Pivot grids allow you 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 illustrative 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, click the arrow icon. This expands or collapses the Mechanic dimension, and then Year fixed.

• The other 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 grid

Controls

Different controls are used to display and edit different types of data.

The Universal user interface currently only supports editing data through the Form component, but in the future it will be possible to edit data using the grid and other components too.

When editing a row, mandatory fields are indicated with an asterisk after the title and require a value before the row can be saved. Fields without an asterisk are optional and can be left blank.

Mandatory Name field

Optional Website field

Checkbox

A checkbox is used to toggle the value of a field, for example, between Yes and No, or Enabled and Disabled.

Checkbox control

Combobox

A combobox is used to select an option from a predefined set.

Combobox control with images

Combobox control with lookup button

If a lookup button is displayed in the combobox, it is possible to open a popup window for more information about the options or, if allowed, to add or edit the available options.

Lookup popup to select or modify the available Countries

Date

The date control provides a drop-down calendar to easily select a date:

Date control

Email

Clicking the email address in read only mode or the email icon while editing creates a new email to the provided email address, using the default Email client.

Email control

Export to Excel

Depending on the settings, data can be exported to Excel. Select Export immediately in the overflow menu to export the data to Excel. This exports the data translated and takes your prefilters into account.

Import from Excel

Depending on the settings, you can import data from an Excel document (with .xlsx, .xls or .csv format).

To import data from an Excel document:

1. Select Import from the overflow menu in the action bar.
   Depending on your screen, an Import ... dialog will be displayed.

2. In this dialog, click the Import icon to open the Excel file to import the data from.

   The import dialog for the Projects screen

3. Click IMPORT.

4. (Optional) If you also want to update the existing matching rows, select the Update existing rows checkbox.

After rows are imported, you can download failed rows using the DOWNLOAD FAILED ROWS button in the summary dialog.

Dialog with a DOWNLOAD FAILED ROWS button

File

The file control is used to upload a file, like an Office or PDF document, from the local file system to the server.

File control

Address

The maps icon in the Address control opens Google Maps in a new browser window or tab, showing the provided address.

Address control

HTML

With an HTML control, you can enter formatted text.

In the form editor, you can edit the text in the currently applied format. Or, if there is no text in the field yet, you can start typing without formatting.

HTML control

If the popup icon is present, you can click it to open a larger display. In edit mode, that display contains a formatting toolbar.

HTML control popup

In both the popup and form editor, you can use regular keyboard shortcuts:

• ctrl + b for bold text
• ctrl + i for italic text
• ctrl + u for underlined text
• ctrl + c to copy
• ctrl + v to paste

tip

You can paste images directly into the editor.

Image

Image controls are used to display images. To upload an image from the local file system, click on the image icon.

Image control

Number

Number fields only allow the input of numeric values and will automatically apply the correct number of decimals. Use the minus key to toggle between positive and negative numbers.

Number control

Password

In a password control field, the password is by default hidden from view. You can use the 'visibility' icon to display the password in plain text or to hide the password from view. Password controls are available in grid, form, and card list components.

When a password field is non-editable or read-only, the 'visibility' icon is hidden, and the number of characters is set to 8 instead of revealing the password length.

Password control field with visibility icon

caution

The passwords are not sent or stored encrypted, so this only protects against being displayed in plain text.

Phone number

Clicking on the phone icon in a phone number control opens the default telephony application, like Skype on Windows or the integrated iOS and Android app.

Phone number control

Progress

The progress control shows the percentage progress of, for example, a task.

Progress control

Radio

A radio button control is used to select from two or more options. If the field is not mandatory, a choice can be undone by clicking on it again.

Radio button control

Signature

The signature control provides the possibility to enter a signature using the mouse, stylus or your finger.

Signature control

Suggestion

The suggestion control is similar to a combobox, but provides the ability to filter the available options. It only shows the first couple of options that match the input filter. The suggestion control is often used when there are a large number of options to choose from.

Suggestion control

Time

A Time field provides a drop down menu to easily select a time value.

Time control

Text

Text fields are used to input free text, and can allow single or multiple lines of text.

Single line text field

Multiline text field

Bar code scanner

If you're using a hand-held scanner and scanning is the last step in a task, the task is submitted directly, if:

• The scanner is configured to send Tab after the barcode.
• The scanner is connected to, e.g., a cell phone or a desktop.
• The focus is on the barcode input field in a task.
• The barcode field is the last visible field in a task.

Video

The video control is used to upload and display videos and can also play uploaded videos.

Video control

Website

Clicking a website address in read only mode or the open icon while editing opens the provided URL in a new browser window or tab.

Website or URL control