Skip to main content

Custom screens

Introduction to custom screens​

For some applications, the integration of highly specific graphic solutions is required. These are not by default available in the Software Factory's screens, but can be achieved by building custom screens that can be seamlessly integrated into your application's user interface.

Examples are an advanced Gantt Chart to graphically display a schedule, an interactive exploded CAD component and advanced dashboards.

caution

When introducing custom screens or custom components into your application, you will also introduce a piece of traditional programming. Thinkwise cannot provide any support or maintenance for custom built screens or components. Consider the business value of every custom screen or component versus the risks and drawbacks described below. The consequences are:

  • The screens or components will not automatically adapt to model changes.
  • After every GUI update, adjustments to the screens or components may be required.
  • Remember to set up the communication with Indicium, to enable reading and writing data from and to the application.

Third-party integrations for custom screens​

Many libraries are available that offer advanced components that can be used in custom screens. For example:

  • MUI - also used by the Thinkwise Universal GUI
  • ToastUI - provides a calendar component, among others

Custom screens for Universal GUI​

Universal GUI currently supports a number of default screen components, like grids, forms and charts. Custom screens for more advanced graphic applications are not supported. Applying more advanced graphic applications is possible, though, by using custom components.

Custom components make use of the HTML preview component. All API features offered by Indicium can be used by these HTML pages. The HTML itself can be made context-sensitive, for instance by using information from the current row. All available features of the Thinkwise platform are inherited.

Using custom components is possible in two ways:

Loading a website into your screen​

It is possible to add a website to the same subdomain as Universal and load it via a preview component. This allows you to communicate with Indicium via a custom page that is loaded into Universal.

  1. On the webserver, create and host the website as a subdomain in the same domain as the Universal GUI.

  2. Create a data domain for using URLs (menu Data > Domains).

    • In field Control, select 'Url'.

  3. Create or select a table or view with a screen type that contains a preview component (menu User interface > Screen types).

  4. The table or view should have at least one column that contains the URL to the website as data (menu Data > Data model > tab Tables > tab Columns).

  • In field Domain, select a domain with a URL control.
  • In field Calculation type, select 'Expression'.
  • In field Query, add the URL.

Example 1 - Custom website with a chart currently not available in the Software Factory:

Example 2 - Website with an integrated CAD viewer:

Loading a smaller piece of software into your screen​

If loading an entire website into your application is undesirable, a smaller piece of software can be introduced by applying an HTML control in a form or card list. Use this for example to show read only data.

Make sure you use a domain with an HTML control:

menu Data > Domains > tab Form > tab Domain

  1. In field Data type, select 'NVARCHAR_MAX'.
  2. In field Control, select 'Html'.
  3. In field Show action button, select 'Never'. This prevents opening the text editor in the screen.

Add the HTML to the column:

menu Data > Data model > tab Tables > tab Columns

  1. In field Domain, select a domain with an HTML control.
  2. In field Calculation type, select 'Expression'.
  3. In field Query, add the HTML as a string.

Custom columns Add the HTML to the column

Example 1 - Custom card list:

Custom card list

Example 2 - Custom form and columns:

Custom screens kpi

Start a process flow from a custom component​

You can start process flows directly from custom components within the application. For example, you can send the following instruction from a custom component to the Universal GUI to refresh the document details:

window.parent.postMessage({
    type: 'startProcessFlow',
    processFlowId: 'refresh_document_detail_from_component',
    dataParams: {}
}, '*');
  • Ensure the option Deep linking allowed is enabled for the target process flow, see Enable deep linking.
  • The Universal GUI allows origins from the same master domain, for example, *.thinkwise.app.
Was this article helpful?