Skip to main content
Version: 2024

Basics

Introduction to the Universal user interface

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, a user can change their password in their profile menu > Change password. A new screen is opened where they can change their password. After a change, it is required to log in again.

note

A password can only be changed if all changes have been saved or canceled.

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.

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

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.

The header with the profile menu

Profile menu

Selecting the user name on the right of the header, opens the profile menu.

It contains the following items:

The profile menu

User preferences

A user can change their preferences in their profile menu > 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.
  • Density - Compact mode offers less whitespace and more data on the screen. Comfortable mode offers more whitespace and less data.
  • Language - If no translations are available for the selected language, the Universal GUI will show the default language. It can take up to one minute for all translations to load.

User preferences

About

To view the version information and release date of your application, a user can select their profile menu > User preferences > About.

About screen

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

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 shows menu groups and items that you have access to.

  • Click on a menu item to open the corresponding screen.
  • Press Ctrl and click on a menu item to open another instance of the corresponding screen.
  • Press Alt and click in the menu or on detail tiles to open the (detail) document in a new floating browser window.

Numbers displayed next to a menu item are called badges. They mean that your attention is required for that subject. For example, for tasks that need 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.

  • A > means that it is a zoomed detail screen.
  • To close an open screen, select the x next to the name. A dot instead of an x means that the screen contains unsaved changes and it cannot be closed.

Classic menu

Collapse the classic menu

Click the menu icon in the header bar to collapse the menu. This increases the available space for any open documents. Hover over the menu to temporarily expand the menu.

On smaller devices, like smartphones, the menu is hidden and only opens after you select a menu icon.

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

Switch to another application

On the top left of the menu, the logo and name of the currently selected application are displayed.

  • If a user has access to more than one application, they can switch to another application by clicking the application name. This is called the Application switcher.
  • If more menus are available, a user can expand Expand the application. All the menu types can be opened in this way (Listbar, Tree, or Tiles).
  • If configured, the Application switcher contains a search bar to search for applications. See the setting enableApplicationSearch in the Universal GUI setup guide.

Switching to another application

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-click a detail tab to open a new document and display the detail information, filtered on the selected parent. This does not apply to mobile devices as there is no double-click functionality.

Press Alt and double-click on a detail tab to open it in a new floating browser window, with the subject in focus.

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

Click a detail tile to 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.

Press Alt and double-click on a detail tab to open it in a new floating browser window, with the subject in focus.

Emails of customer Retail Partners

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.

Offline warning 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:

  • offline State: offline.
  • online no change State: online without changes.
  • online pending 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 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.

Sync Progress of the synchronization

Drag-drop

If a row supports drag and drop, a drag handle handle is shown next to it. Click on it to pick up the row and press your mouse button while moving to drag it to its new position.

Drag cursor The mouse cursor changes to a hand when you hover over a drag handle

While you are dragging the row, blue dotted lines show you where you can drop the item.

Drag to target Drag row to a target table

Drag and drop is available for the grid and tree components. The following functions are available:

  • Drag from one table to another.
  • Drag between browser tabs. Cross-browser is supported. The task will be executed based on the user who is logged into the target browser.
  • Select, drag, and drop multiple rows.
  • Drag over tabs. The tab will be activated automatically.
  • Drop items on a specific row.

You can set up a task which is used for drag-drop, and create a drag-drop link. When the user drops an item on that table or row, the drag-drop task is started. You can use this to create functionality for re-ordering, adding in a specific position, or dropping children on a parent.

note

If you drop an item on a row that does not support it, it will be dropped on the table instead.

Export and import

Export to Excel

If you do not need to customize your Excel export, you can export your data immediately to an Excel (.xslx) file. You can find the Export immediately option in the overflow menu of a subject. This exports the data translated and takes your prefilters into account.

Custom export

With the Export option, you can configure how to export the data of your subject. You can find the Export option in the overflow menu of a subject. Select this option to start the Export wizard.

In this wizard, you can configure the following:

  1. Which rows to export:
    • Export selected row(s)
    • Export all rows
  2. Which columns to export.
  3. The export file format (.xls, .xslx, or .csv).

Select Export to start the export process. The generated file will be downloaded to your computer.

Import

You can import data from an Excel document. You can find the Import option in the overflow menu of a subject. Select this option to start the Import wizard.

In this wizard, you can configure the following:

  1. The file you want to import (.xls, .xslx, and .csv extensions are allowed).
  2. How to import the data:
    • Insert all data
    • Add new records, update existing records
    • Only update existing records
  3. How to prepare the data:
    • For an Excel file, you can configure the worksheet and where the data starts.
    • For a CSV file, you can select the first row that contains columns headers. The delimiter that separates the column values is detected automatically.
  4. How to map the data:
    • Select the checkbox of each column that should be imported.
    • Map each column to a column in your database: for each selected column, select a database column.
    • Set a constant value for columns that are not available in Excel but do require a value.
    • Set a column's values to empty (NULL) so that the column is imported but its values are not. Import mappingMapping the source columns to the target columns

A preview is shown of which data will be imported. Select Import to start the import process. After the import has been completed, an overview will be shown of how many records have been imported, updated, or failed. You can download an Excel file with the rows that failed to import.

Was this page helpful?

Happy React is loading...