Transition to the Universal GUI
Transition from a previous generation UI to Universal GUI
Moving from previous generations of user interfaces, such as the Windows or Web GUI, to the Universal GUI means moving from a 2-tier to a 3-tier architecture. This chapter describes the required knowledge to work with a 3-tier architecture, and it helps you get up to speed in applying it within the Thinkwise Platform.
What is Indicium
Moving from a 2-tier to a 3-tier architecture disconnects the front end from the databases. For Thinkwise, Indicium is the secure spider in the web between the front end and the database.
Indicium is Thinkwise's Web API that handles requests from external applications. It facilitates all connections to a variety of data sources and exposes them to clients on location.
What is a Web API
Web APIs can be called by clients using HTTP requests. These requests are used to retrieve information from a web page while browsing on the internet. Many companies develop their own APIs. A well-known example is, retrieving an address belonging to a postal code.
A Web API, in general, does not come with a front end. Its main function is to securely provide data for executing "heavy" work, to support the client.
Your application can make Indicium call external Web APIs, too. You can do this by using an HTTP Connector in a system flow or a process flow.
The Universal GUI communicates with Indicium through HTTP requests. For the Windows GUI, communication with Indicium is not possible.
Migrate user preferences
The user preferences are saved differently in previous generation UIs than in the Universal GUI. For information on how to migrate your user preferences to the Universal GUI's format, see Re-migrate classic user preferences.
Model enrichments to support the transition
The following model enrichments can be used to support the transition from a previous generation UI to the Universal GUI. For more information about model enrichments, see Model enrichments.
| Name | Description |
|---|---|
| Create breakpoint screen types | Facilitates the transformation to the Universal GUI by creating breakpoints for specific situations. |
| Decolorize all SVG icons that contain a black fill color | Facilitates the transformation to the Universal GUI by removing the fill color of icons, making them suitable for dark and light modes. |
| Turn on 'Include the label width' setting | Facilitates the transformation to the Universal GUI by enabling the Include the label width setting, making forms look more like Windows GUI forms. |
| Field height limitation | The Universal GUI uses vertically scrollable forms that dynamically adapt to the configured value for the setting Field height in positions. This enrichment limits any extreme values for this setting to a more suitable value for the scrollable form. |
| Keep ungrouped form fields vertically aligned | The Universal GUI keeps form fields in form groups together vertically when repositioning fields in the form columns. This is based on the available horizontal space. However, ungrouped fields or fields not marked to be allowed in a new form column spread across the available form columns. While this optimizes vertical space usage, it can be less familiar for users accustomed to tabbed forms, where fields typically fill horizontal space. This enrichment updates the first ungrouped field to be allowed in a new form column. This ensures subsequent fields stay together as a virtual group. |
| Update tree page size | Automatically adjusts the page size of all hierarchical trees to an acceptable value for showing the tree in the Universal GUI. |
| Add the Universal platform | Creates the platform Universal. It also adds a default theme for the Universal GUI, similar to the Windows GUI theme. |
| Remove obsolete platforms | Removes the two platforms that are no longer supported: Web and Mobile. Additionally, it removes themes, menus, configurations, and process flows that were only used for the removed platforms. You can also choose to remove the Windows platform. Note that the Windows platform is still supported. Use this enrichment only to remove platforms other than Universal. |
| Show default cube view | In previous GUI generations, default cube views were always shown, even if the setting Show cube view was off. However, the Universal GUI respects the setting Show cube view and does not show the default cube view. This enrichment adjusts the setting to show the cube view. If this is not desirable, you can also change the default cube view for this cube. |
| Set up a card list configuration | Configures a basic card list for tables with more than three visible columns. This configuration uses the following columns:
Any additional columns in the table are hidden in the card list. The enrichment does not change existing card list configurations for variants. |
| Update message options | When configuring messages and their corresponding options for the Windows GUI, it is common practice to place the affirmative message option (like "Yes") on the left side and the negative option (like "No") on the right side of a screen. However, in the Universal GUI, the order is reversed. This enrichment updates the message options so that the negative option appears on the left and the affirmative option on the right. Any other options will be placed in between. You can choose which updates to execute. |
| Set the display type to hidden for drag drop tasks | When drag-drop tasks are used in your application, there is usually no need for visible buttons in the user interface. This enrichment sets the display type for drag-drop tasks to Hidden. |
| Turn off auto-introduced search | In the Universal GUI, every screen automatically includes a search bar in its action bars if search settings are configured for the table. A number of screen types provided by Thinkwise, like chart, cube, and pivot grid, automatically exclude the search bar. This enrichment excludes the search bar for custom screen types in cases where you might not want one. |
| Set the keybinding schema to Classic | The Universal GUI uses web-oriented hotkeys for navigation, allowing you to move between fields with the Tab key. This enrichment adds the extended property keybindings, enabling you to switch to a classic schema. With the classic schema, you can use Enter to navigate between form fields. |
| Set the default page size for pagination | Enables pagination in the Universal GUI by setting a default page size. Without configuring a page size, there will be no pagination if you move to the Universal GUI |
| Show tab icons | The Classic theme used in the Windows GUI has an option to show or hide tab icons. However, this setting is not available in the Universal theme, where tab icons are hidden by default. This enrichment adds the extended property ShowTabIcons if tab icons are set to be shown in the Classic theme linked to the platform Windows. This ensures consistent behavior between the Universal GUI and the Windows GUI. |
| Set the display type to Icon only for tasks and reports | In the Universal GUI, new tasks and reports default to Icon + text for their display type, while the Windows GUI shows only icons. To maintain consistency during the transition to the Universal GUI, this enrichment automatically sets the display type to Icon only for tasks and reports currently configured as Icon + text or Text only. |
| Move tasks and reports to the overflow menu | The Windows GUI hides tasks and reports unless their respective bars are included in the screen type, requiring extra end user navigation. In the Universal GUI, tasks and reports are shown by default in the action bar, alongside the CRUD actions. This enrichment places tasks and reports in the Universal GUI's overflow menu if the assigned screen type for the subject does not contain a task bar or a report bar. |
Solving problems
Indicium offers DB logging and error logging where you can investigate unexpected behavior. To resolve a problem in Indicium, you have to be able to read HTTP requests. This is an essential skill for Thinkwise Platform developers working with web-based applications and Web APIs, such as Indicium.
To address a request to Indicium, the client builds a URL. It consists of two elements:
- Host - Indicium's address on the Internet. The host part is static and configured once at the clients' end.
- Path and query - What Indicium should do and additional required parameters. Indicium uses the OData standard to receive instructions from clients, defined in the path and query. An OData URL syntax is a bit similar to the SQL syntax, specifying the subject, ordering, filtering or an endpoint to execute some logic.
A URL syntax diagram
An HTTP request can contain different types of methods, like GET, or POST. You can easily execute a GET request URL in the browser's address bar.
To execute more complex requests like POST requests manually, you can use a tool like Postman.
A response from Indicium comes in a JSON format, a standardized way to package data.
Communication between Universal GUI and Indicium
To get an overview of the communication between the Universal GUI and Indicium, you can use your browser's DevTools > Network tab. This tab only records requests from the moment it is opened. If you trigger a user interaction in the GUI, the requests will come into view.
To get an overview of the interaction of processes in the GUI, you can add the Redux extension to the DevTools.