Universal GUI User Manual · Thinkwise Docs

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.

If you already 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.

Enter your username and password.
If necessary, check the Remember me box to stay logged in for two weeks.
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:

The header
The menu
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, the username is shown. By clicking on the username, the settings menu is opened, showing options to change your preferences, show the about screen or log out of the application.

The header

User preferences

The User preferences screen currently only contains the option to switch between a light and dark theme. The selected theme is stored in the browser cache for now and will later be added to the user preferences in the Intelligent Application Manager.

Switching to the dark theme

About

The About screen shows information about the current versions of the Universal user interface and the Thinkwise Platform.

About screen

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

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.

Dragging a splitter to resize components

Screen components

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

Tab pages

Tab pages are used to navigate between different sections within a screen. Tab pages 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 tab pages are called detail tab pages.

Component and detail tab pages

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

Scrollable tab pages

Search and filter bar

The search and filter bar can be used to search the subject's data using a custom search term or to toggle predefined filters, called prefilters. Enabled prefilters are displayed using a line underneath the button.

Search and filter bar

If there is not enough space available to display the search box or all prefilters, click on the search button or the overflow menu to access the search box or (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 after changing a field.

It isn't possible to change conditions (e.g., "larger than" or "not equal to"). The filter always uses "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.

Form filter Example of a data filter

Action bar

Depending on the permitted actions for the current user, the action bar contains buttons to add, copy, edit and delete rows, to refresh the data and, when applicable, to execute tasks, like Generate invoices or 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 page.

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.

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 page, 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 page, 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 one or more arrow icons next to the column names.

Grid with one fixed column, sorted on the Customer name

Executing a task for multiple rows on a mobile device

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

Tasks with a Popup for each row can only be executed for a single row.

To select multiple rows on mobile and tablet devices:

Long-press on a single row.

Checkboxes will appear for each row.
Use the checkboxes to select more rows. The number of selected rows is displayed in the top bar.
Execute the task. If parameters apply, a single dialog is displayed for all of the rows.

To select all rows:

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

To turn off the multi-selection:

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.

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

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.

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

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 page, it will only show the data for the selected parent row.

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.

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 page, showing the provided address.

Address control

HTML

An HTML control provides the possibility to enter formatted text.

HTML control

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

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

Website or URL control