Modals

Overview

io.Connect Desktop supports a set of predefined modal windows (alerts and dialogs), which you can use in your interop-enabled apps via the @interopio/modals-api library. The Modals API also enables you to display your own custom alerts and dialogs.

⚠️ Note that this feature is still experimental in io.Connect Desktop.

⚠️ Note that you can also use the showDialog() method of an IOConnectWindow instance to show dialogs from your apps. This method is still supported and you can use it to show the already existing set of predefined dialogs, as well as custom ones, but it doesn't support the set of predefined dialogs available via the new @interopio/modals-api library. Respectively, the @interopio/modals-api library doesn't support the predefined dialogs available via the showDialog() method.

Configuration

The following sections describe the available configuration settings for the io.Connect alerts and dialogs.

Alerts

Available since io.Connect Desktop 9.9

To provide settings for alert windows, use the "alerts" top-level key in the system.json system configuration file of io.Connect Desktop:

{
    "alerts": {
        "enabled": true,
        "width": 450,
        "height": 100,
        "ttl": 7000,
        "roundedCorners": true
    }
}

The "alerts" object has the following properties:

Property	Type	Description
`"enabled"`	`boolean`	If `true` (default), will enable the io.Connect alerts.
`"height"`	`number`	Height in pixels for the io.Connect alerts. Defaults to `82`.
`"roundedCorners"`	`boolean`	If `true`, the io.Connect Window containing the alerts will have rounded corners. Defaults to `false`.
`"transparent"`	`boolean`	If `true` (default), the io.Connect Window containing the alerts will be transparent.
`"ttl"`	`number`	Interval in milliseconds that defines how long the alert is displayed to the user before it automatically disappears. Defaults to `5000`.
`"url"`	`string`	URL pointing to the location of the io.Connect alerts app. You can use this to provide a URL pointing to your custom alerts app.
`"width"`	`number`	Width in pixels for the io.Connect alerts. Defaults to `400`.

Dialogs

To provide settings for alert windows, use the "dialogs" top-level key in the system.json system configuration file of io.Connect Desktop:

{
    "dialogs": {
        "url": "https://my-custom-dialog.com",
        "width": 380,
        "height": 150,
        "enableDefaultDialogs": {
            "preventShutdown": false,
            "preventWindowClose": false
        }
    }
}

The "dialogs" object has the following properties:

Property	Type	Description
`"enableDefaultDialogs"`	`object`	Enable or disable the default io.Connect dialog messages.
`"height"`	`number`	Height in pixels for the io.Connect dialogs.
`"transparent"`	`boolean`	If `true`, the io.Connect Window containing the dialog will be transparent.
`"url"`	`string`	URL pointing to the location of the io.Connect dialog app.
`"width"`	`number`	Width in pixels for the io.Connect dialogs.

The "enableDefaultDialogs" object has the following properties:

Property	Type	Description
`"preventShutdown"`	`boolean`	If `true` (default), will enable the dialog message that appears when io.Connect Desktop is about to shutdown.
`"preventWindowClose"`	`boolean`	If `true` (default), will enable the dialog message that appears when the user tries to close an io.Connect Window that is programmatically prevented from closing. This dialog will appear also when such window participates in a Layout that is being closed.
`"unsavedLayoutChanges"`	`boolean`	If `true` (default), will enable the dialog message that appears when the user modifies the current Global Layout and tries to restore another Global Layout. Available since io.Connect Desktop 9.2.

Custom Modals

To customize the styles of the io.Connect modal windows, use the dedicated CSS variables provided by the io.Connect themes.