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.
Currently, the Universal user interface is in beta. It can already be used for basic Thinkwise applications, but not all functions provided by the other Thinkwise user interfaces are available yet.
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 and press LOGIN to open the application.
The Login Screen
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.
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
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 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.
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
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
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 a selection of rows of the current subject, possibly limited by a search condition or prefilter.
If not all columns fit within the available space, a vertical scroll bar is shown to scroll to scroll to the other columns. A vertical line indicates which column positions are fixed. These columns will always stay within view. The current sort order is displayed using one or more arrow icons next to the relevant column names.
If the grid is located in a detail tab page, then only the rows that belong to the selected parent row are shown.
Grid with one fixed column, sorted on the Customer name
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
Is 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
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
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
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
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