How to...

io.Connect Desktop has a built-in splash screen, but also supports showing a custom splash screen. The splash screen can be loaded from a local file or from a remote location.

To replace the splash screen HTML file, go to %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/splash and add your own custom file. You can also use the existing splash files and modify them directly.

To specify the splash screen location, bounds and other options, use the "splash" top-level key in the system.json file of io.Connect Desktop.

The "splash" object has the following properties:

The following example demonstrates how to provide a custom splash screen and settings for it:

{
    "splash": {
        "disabled": false,
        "url": "file://%GDDIR%/assets/custom/splash.html",
        "width": 350,
        "height": 233,
        "blockStartup": true
    }
}

You can also use the %GDDIR% environment variable, which points to the io.Connect Desktop installation folder.

The "disabled" property is set to false by default. Use the "blockStartup" property to specify whether io.Connect Desktop should wait for the splash screen to load before proceeding with the startup.

For the splash screen setup to work, you must handle the following events:

// `updateStatus` event
ipcRenderer.on("updateStatus", (event, arg) => {
    console.log(`updating status to ${arg.text}`);
    var status = document.getElementById("status");
    status.innerHTML = arg.text + "...";
});

// `setVersion` event
ipcRenderer.on("setVersion", (event, arg) => {
    var status = document.getElementById("version");
    status.innerHTML = arg.text;
});

// `setEdition` event
ipcRenderer.on("setEdition", (event, arg) => {
    var edition = document.getElementById("version");
    edition.innerHTML += ` (${arg.text})`;
});

// `setEnvRegion` event
ipcRenderer.on("setEnvRegion", (event, arg) => {
    var edition = document.getElementById("version");
    edition.innerHTML += ` -${arg.text}`;
});

The io.Connect frameless window type allows you to customize the splash screen of io.Connect Desktop with transparent areas or use irregular shapes for it.

io.Connect Desktop comes with built-in loaders that can be replaced with custom ones.

Windows

The loader for io.Connect Windows can be set in the themes.json configuration file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config.

Use the "loadingAnimation" property of each respective theme in the themes.json file and specify a path to your custom XAML file. The path can be either absolute or relative to the %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config folder:

// Custom loading animation for the "Dark" theme.
[
    {
        "name": "dark",
        "properties": {
            "loadingAnimation": "../custom/spinner.xaml",
        }
    }
]

Use the "loadingText", "loadingTextFont", "loadingTextFontSize" and "loadingTextColor" properties to add custom text to the io.Connect Window loader:

[
    {
        "name": "dark",
        "properties": {
            "loadingAnimation": "../custom/spinner.xaml",
            "loadingText": "My custom loader text.",
            "loadingTextFont": "Calibri",
            "loadingTextFontSize": 20,
            "loadingTextColor": "#eeeeee"
        }
    }
]

Layouts

The default loader for Layouts is an HTML file located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/loader which you can replace with your own custom one or edit it directly.

You can also provide custom configuration for it in the system.json file of io.Connect Desktop by using the "splash" property of the "layouts" top-level key.

The "splash" object has the following properties:

The following example demonstrates how to provide a custom loader and settings for it:

{
    "layouts": {
        "splash": {
            "url": "https://example.com/my-custom-loader/index.html",
            "title": "My Custom Loader",
            "width": 500,
            "height": 300
        }
    }
}

Workspaces

For the default Workspaces App, the loader is the same as the one for the io.Connect Windows and can be set in the themes.json configuration file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config (see Loaders > Windows).

If you have a custom Workspaces App, you can provide your own loading animation for a Workspace in the <Workspaces /> component.

⚠️ Note that a Workspace, a window in a Workspace, and the Workspaces App itself have different loading animations. Currently, the @interopio/workspaces-ui-react library provides means only for customizing the loading animation for a Workspace.

You can specify a custom product name that matches your internal deployment branding. It will be displayed in the:

• io.Connect Tray Icon

To change the product name displayed on hover over the io.Connect tray icon and in the tray icon menu, modify the "build" top-level key in the system.json configuration file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config:

{
    "build": "My Custom Build"
}

• io.Connect Executable Description

Since this information is compiled into the executable file at build time, the recommended approach is to send the name and description strings to the io.Connect team and they will be modified according to your requirements. Otherwise, use a tool for updating Windows executable resources.

⚠️ Note that this description is displayed in the Windows Task Manager by default.

• Installer UI

The product name displayed in the installer can be changed only through the extensibility features of the installer app. For more details, see the Installer section.

• Splash Screen and Toolbars

To change the product name in the splash screen or the toolbar apps, you must modify the respective apps. For more details on how to customize the splash screen and the io.Connect launchers, see the Splash Screen and Toolbar sections.

To change the product version, modify the version.json file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Installer. This file contains the names and the respective versions of all io.Connect Artifacts:

{
    "product": "Desktop",
    "version": "9.0-custom-version"
}

The built-in io.Connect Desktop icons are replaceable. You can change:

• the icon displayed when io.Connect Desktop is pinned to the taskbar;
• the io.Connect Desktop tray icon;
• the default taskbar icon for apps;
• the taskbar icon for io.Connect Window groups;
• the taskbar icon for tab groups;
• the taskbar icon for the Workspaces App;
• the icon for the io.Connect Desktop executable file;

For details on how to change the icons of the automatically created shortcuts when using the io.Connect Desktop installer app for deployment, see the Installer > Shortcuts section. For details on how to change the installer screen icons, see the Installer > Installer UI section.

io.Connect Desktop

To change the default icon displayed when io.Connect Desktop is pinned to the taskbar, go to %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/images and replace the logo.ico file with your own custom icon, keeping the name logo.ico.

Tray

To change the icon displayed in the system tray, go to %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/images, add you custom icon and name it tray.ico. If a tray.ico file isn't available, the logo.ico file will be used as a default.

App Default

The logo.ico file located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/images is used as a default taskbar icon for interop-enabled apps. To change it, replace the logo.ico file with your own custom icon, keeping the name logo.ico.

⚠️ Note that the Floating Toolbar app also uses this icon by default as its taskbar icon.

Window Groups

To change the taskbar icon for io.Connect Window groups, go to %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/images and replace the groups.ico file with your own custom icon, keeping the name groups.ico.

Alternatively, change the icon from the themes.json configuration file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config. The io.Connect Window groups theme properties are located under the "groups" key for each respective theme. Use the "icon" property and specify the name of your custom icon:

// Custom group icon for the "Dark" theme.
{
    "name": "dark",
    "properties": {
        "group": {
            "icon": "custom-group-icon.ico"
        }
    }
}

⚠️ Note that the specified group icon file must be an ICO file and must be placed in the %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/images folder.

Tab Groups

To change the default icon for tab groups, go to the themes.json configuration file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config. The io.Connect Window groups theme properties are located under the "groups" key for each respective theme. Use the "tabGroupIcon" property and specify the name of your custom icon:

// Custom tab group icon for the "Dark" theme.
{
    "name": "dark",
    "properties": {
        "groups": {
            "tabGroupIcon": "tab-groups.ico"
        }
    }
}

⚠️ Note that the specified tab group icon file must be an ICO file and must be placed in the %LocalAppData%/interop.io/io.Connect Desktop/Desktop/assets/images folder.

Workspaces

The taskbar icon for the Workspaces App can be set from the workspaces.json file located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config/apps. Specify an absolute or a relative path to your custom icon:

{
    "title": "Workspaces UI",
    "type": "workspaces",
    "name": "workspaces-demo",
    "icon": "../../resources/icons/workspaces.ico",
    "details": {}
}

The io.Connect icon in the Workspaces App can be changed from the app itself. For more details on how to customize the Workspaces UI or build an entirely new custom Workspaces App, see the Extending Workspaces section.

Executable File

The icon for the io.Connect Desktop executable file (io-connect-desktop.exe) is compiled into the app at build time and can't be changed without invalidating its Authenticode signature. For this reason, the recommended approach is to send your custom icon to the io.Connect team to include it in your customized build step. If that isn't possible, you can replace the icon using a tool for updating Windows executable resources. Keep in mind that if you update the executable file, you'll need to Authenticode sign it yourself, otherwise it won't have a valid signature, which might trigger warnings from Windows or antivirus software. For a general example on signing the executable file when using a bundle as a deployment option, see the Signing section.

If you make any changes to the io.Connect Desktop executable file (e.g., change the icon or metadata), you must sign it with an Authenticode signing certificate. This is necessary to prevent Windows or antivirus software warnings. The signing procedure is highly specific and depends on your certificate vendor and existing infrastructure. The following example outlines only the basic steps you must follow to sign the io.Connect Desktop executable file after applying your customizations. The example assumes that you would like to change the icon of the io.Connect Desktop executable file and that you are using a bundle as a deployment option:

1. Extract the bundled io.Connect Desktop installation at a preferred location and get the io.Connect Desktop executable file.

2. Change the icon of the executable file using your preferred tool.

3. Sign the executable file using your signing tool.

4. Follow your standard deployment procedures.

For an example of the general steps you must follow to sign the executable file and the installer app when using an installer as a deployment option, see the Installer > Signing section.

The default app for handling io.Connect notifications can be customized visually or altogether replaced with your own custom Notifications App. For more details on how to customize or replace the default notification apps, see the Notifications section.

io.Connect Desktop has a built-in Feedback Form that allows users to send feedback with improvement suggestions or bug reports.

The Feedback Form can be entirely customized by using the @interopio/components-react library. For more details, see the More > Features > Issue Reporting > Extending the Feedback Form section.

io.Connect Desktop offers default confirmation dialogs that will be shown on system shutdown or restart and when a window that prevents closing is about to be closed. These default dialogs can be customized or entirely replaced with your own custom dialogs. For more details, see the More > APIs > Dialogs section.

See also the io.Connect Templates repo that contains a template with React components and hooks that allow you to easily build your own custom Dialogs.

Use the themes.json configuration file of io.Connect Desktop located in %LocalAppData%/interop.io/io.Connect Desktop/Desktop/config to customize the look and feel of io.Connect Windows. For details and examples on how to customize io.Connect Windows, window and tab groups, see the Developers > Configuration > Themes section.

Workspaces are entirely customizable too. For more details on how to customize the Workspaces UI or build an entirely new custom Workspaces App, see the Extending Workspaces section.