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