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.
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.
The Login Screen
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
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.
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
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 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
The About screen shows information about the current versions of the Universal user interface and the Thinkwise Platform.
The menu of an application can be displayed as a classic menu, with groups and items, or as a tiles menu.
The classic menu contains menu groups and items that you have access to. Clicking on a menu-item will open 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.
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.
The tiles menu displays all menu items using tiles, divided into one or more groups.
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
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
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
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.
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
The components that can be displayed in a screen are described in the following sections.
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
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.
Example of a data filter
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
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
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.
The tree component is used to display hierarchical or grouped data. Click on the arrows in front of a row or use the
LEFT arrow keys to open or close a group.
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 are used to navigate to detail information of the selected parent row, like the emails or projects of the selected customer.
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
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.
If a chart is displayed in a detail tab page, it will only show the data for the selected parent row.
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
A checkbox is used to toggle the value of a field, for example, between Yes and No, or Enabled and Disabled.
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
The date control provides a drop-down calendar to easily select a date:
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.
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.
The file control is used to upload a file, like an Office or PDF document, from the local file system to the server.
The maps icon in the Address control opens Google Maps in a new browser window or tab page, showing the provided address.
An HTML control provides the possibility to enter formatted text.
Image controls are used to display images. To upload an image from the local file system, click on the image icon.
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.
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
The progress control shows the percentage progress of, for example, a task.
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
The signature control provides the possibility to enter a signature using the mouse, stylus or your finger.
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.
A Time field provides a drop down menu to easily select a time value.
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.
The video control is used to upload and display videos and can also play uploaded videos.
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