Changelog

io.Connect Browser 4.0

Release date: 24.06.2025

Versions of all main and additional libraries of io.Connect Browser for the current release:

Library Version
@interopio/browser 4.0
@interopio/browser-platform 4.0
@interopio/browser-worker 4.0
@interopio/cli 4.0
@interopio/fdc3 2.6
@interopio/home-ui-react 2.0
@interopio/intent-resolver-ui 1.0
@interopio/modals-api 1.0
@interopio/modals-ui 1.0
@interopio/ng 5.5
@interopio/react-hooks 4.0
@interopio/search-api 3.0
@interopio/theme 3.0
@interopio/widget 3.0
@interopio/workspaces-api 4.0
@interopio/workspaces-ui-react 4.0
@interopio/workspaces-ui-web-components 2.0

Breaking Changes

⚠️ Note that each breaking change is listed under all libraries it affects.

  • The process of generating license keys for io.Connect Browser has been altered and licenses generated before 8 November 2024 are no longer supported. To update your existing license key, contact us at sales@interop.io.

  • The io.Connect Home App and the system apps of io.Connect Browser (Workspaces App, Intent Resolver, and widget) have been redesigned with the goal of improving the UI and providing smoother user experience, which necessitated introducing breaking changes in the following libraries.

⚠️ Note that the legacy implementations of the system apps of io.Connect Browser (Workspaces App, Intent Resolver, and widget) are still supported and will work in the latest version of io.Connect Browser.

@interopio/browser

  • The publish() method of the Channels API now won't throw an error when the current window is joined to multiple Channels, but it's restricted from publishing data to one or more of the joined Channels. The data is now populated in each Channel where possible.
  • Deprecated the intents property of the configuration object for initializing the @interopio/browser library that was previously used for configuring the legacy Intent Resolver.

@interopio/home-ui-react

The Home App has been redesigned in order to enhance the user experience and improve the UI:

Using Home

Home App Config

The function passed to the getIOConnectConfig property of the config object for the <IOConnectHome /> component now accepts as an argument an object with type and user properties instead of an object describing the logged in user. The type property holds a string value indicating the type of the authentication process used for the Home App (i.e., the value of the type property of the login object in the Home App configuration) and the user property is an object describing the logged in user.

The user object can be used to extract the necessary authentication details for initializing the Main app (e.g., if your Main app is connected to io.Manager) and also to provide user details to be displayed in the Profile panel of the Home App:

import { IOConnectHome } from "@interopio/home-ui-react";
import IOWorkspaces from "@interopio/workspaces-api";
import IOModals from "@interopio/modals-api";
import "@interopio/workspaces-ui-react/dist/styles/workspaces.css";
import "@interopio/home-ui-react/src/index.css";

const getConfig = ({ type, user }) => {
    // Extracting the user details.
    const { id, username, password, firstName, lastName, email } = user;

    // Platform configuration.
    const platformConfig = {
        browserPlatform: {
            factory: IOBrowserPlatform,
            config: {
                // Required license key.
                licenseKey: "my-license-key",
                // Workspaces App configuration.
                workspaces: {
                    src: "/",
                    isFrame: true
                },
                // Modal windows are required for the Launchpad.
                modals: {
                    sources: {
                        bundle: "https://my-modals/modals-bundle.js",
                        styles: ["https://my-modals/styles.css", "https://example.com/custom-styles.css"],
                        fonts: ["https://my-modals/fonts.css"]
                    }
                },
                browser: {
                    // Enabling the Workspaces and Modals APIs.
                    libraries: [IOWorkspaces, IOModals],
                    // Enabling the Main app to use modal windows.
                    modals: {
                        alerts: {
                            enabled: true
                        },
                        dialogs: {
                            enabled: true
                        }
                    }
                },
                // Connection to io.Manager using Basic authentication.
                manager: {
                    url: "https://my-io-manager.com:4242/api",
                    auth: {
                        basic: {
                            // Extracted user details from the `user` object.
                            username,
                            password
                        }
                    },
                    critical: true
                },
                // User details that will be displayed in the Profile panel.
                user: {
                    id,
                    username,
                    firstName,
                    lastName,
                    email
                }
            }
        }
    };

    return platformConfig;
};

// Configuration for the `<IOConnectHome />` component.
const config = {
    // Retrieve the platform configuration.
    getIOConnectConfig: getConfig,
    // Login settings.
    login: {
        type: "simple",
        onLogin: async (username, password) => {
            // Custom validation logic.
            const { firstName, lastName, email } = await validateUser(username, password);
            const user = {
                id: username,
                username,
                password,
                firstName,
                lastName,
                email
            };

            return user;
        }
    }
};

const App = () => <IOConnectHome config={config} />;

export default App;

⚠️ Note that enabling the Modals API and configuring the modal windows is mandatory for using the Launchpad.

Home App UI

  • The Notification Panel is now located in the Home App header area instead of inside the Launchpad. The notification badge was removed from the Launchpad.
  • The User panel that used to be in the Launchpad was deprecated and is now replaced by the Profile panel located in the system dropdown menu in the Home App header area.
  • Removed the "More" button from the Launchpad sections.

Home App Components

  • Deprecated the HeaderLogoArea property of the workspaces object inside the config object for the <IOConnectHome /> component. To customize the Launchpad button, use the LogoComponent property of the components object inside the workspaces object instead.
  • Deprecated the NotificationsPanel and UserPanel properties of the launchpad object inside the config object for the <IOConnectHome /> component.
  • Deprecated the Sections property of the launchpad object inside the config object for the <IOConnectHome /> component. You can now use the sections property which accepts an array of objects describing the components for the default and any custom sections to be displayed in the Launchpad.
  • Deprecated the iconName, iconSource, displayCount, and showAllItems properties of the config object for the <Section /> component for creating custom sections in the Launchpad.
  • The isCollapsible property of the config object for the <Section /> component now defaults to true.
  • The following components are no longer exported by the library: <HomeAppWorkspace />, <LaunchpadSlidePanel />, <LayoutsPanel />, <Logo />, <NotificationsIcon />, <SearchBar />, <SearchResults />, <SlidePanel />, <UserPanel />, <UserPanelIcon />.

@interopio/intents-resolver-api

The @interopio/intents-resolver-api library has been deprecated in io.Connect Browser in favor of the @interopio/intent-resolver-ui library.

@interopio/intents-resolver-ui-react

The @interopio/intents-resolver-ui-react library has been deprecated in io.Connect Browser in favor of the @interopio/intent-resolver-ui library.

@interopio/widget

The io.Connect widget is now embedded in the client DOM instead of a standalone app.

Due to the implications from using the shadow DOM for the embedded io.Connect widget, it's now required to provide the widget fonts in the Main app configuration. Otherwise, the widget icons won't be displayed. The widget fonts are distributed with the @interopio/widget library.

To supply the fonts, use the fonts property of the sources object under the widget top-level key in the configuration object for initializing the @interopio/browser-platform library:

import IOBrowserPlatform from "@interopio/browser-platform";

const config = {
    licenseKey: "my-license-key",
    widget: {
        // It's required to specify the locations of the widget bundle, styles, and fonts.
        sources: {
            bundle: "https://my-widget/widget-bundle.js",
            styles: ["https://my-widget/styles.css", "https://example.com/custom-styles.css"],
            fonts: ["https://my-widget/fonts.css"]
        }
    }
};

const { io } = await IOBrowserPlatform(config);

@interopio/workspaces-ui-react

⚠️ Note that the following changes will be breaking for you only if you upgrade to version 4.0 or later of the @interopio/workspaces-ui-react library and:

  • You have a custom Workspaces App in which you are using any of the affected default components provided by the @interopio/workspaces-ui-react library. In this case, your app won't build when you upgrade to the latest version of the library.
  • You are using the default build of the Workspaces App and you have only customized it with CSS. In this case, your styles won't be applied when you upgrade to the latest version of the @interopio/workspaces-ui-react library.

This is due to the fact that some legacy components have been deprecated, the HTML structure of others has been modified, and a new system with CSS variables has been introduced for styling the Workspaces App. If you have completely customized your Workspaces App (entirely replaced the affected default components with your own custom components), you shouldn't experience any issues when migrating to the latest version of the @interopio/workspaces-ui-react library.

If you don't upgrade the @interopio/workspaces-ui-react library, your Workspaces App will still work in newer versions of io.Connect Browser.

The following breaking changes have been made to the @interopio/workspaces-ui-react library:

  • The <WorkspaceTabV2 /> component has been renamed to <WorkspaceTab /> and the legacy <WorkspaceTab /> (version 1) has been removed.
  • The "Add Apps" button ("+" button) in the Workspace window group header has been moved to the left of the header, after the window tabs.
  • The legacy Glue42 CSS files have been removed.
  • The legacy <GlueLogo /> component has been removed.
  • The legacy "Save Workspace" system popup has been removed. The "Save Workspace" popup has been replaced by a dialog that's part of the <WorkspaceTab /> component and can be customized by customizing that component.
  • Changed the CSS classes for the <Logo /> component, for the background of an empty Workspace, and for the <WorkspaceTab /> component.
  • Changed the tab sizing strategy.
  • Completely restructured the HTML and CSS of the "Add Apps" popup.
  • Completely restructured the HTML and CSS of the "Add Workspace" popup.

Deprecated Platform Apps

Intent Resolver UI

The legacy Intent Resolver UI app that operates as a standalone window has been deprecated in io.Connect Browser in favor of a new Intent Resolver UI app that uses the new @interopio/intent-resolver-ui library and that operates embedded in the client DOM.

New Features

⚠️ Note that each new feature is listed under all libraries it affects.

@interopio/browser

The following features are now available in the @interopio/browser library:

Intent Resolver Configuration

To enable the new Intent Resolver introduced with the @interopio/intent-resolver-ui library, use the intentResolver property of the optional configuration object for initializing the @interopio/browser library:

import IOBrowser from "@interopio/browser";

const options = {
    intentResolver: {
        // Enabling the Intent Resolver for the current Browser Client app.
        // It's required to specify this to be able to use the Intent Resolver.
        enable: true
    }
};

const io = await IOBrowser(options);

⚠️ Note that the intents property of the configuration object for initializing the @interopio/browser library that was previously used for configuring the legacy Intent Resolver has been deprecated.

Modals API

Introduced a new Modals API which you can use to display modal windows (alerts and dialogs) in io.Connect Browser.

Clearing Channel Context Data

To clear the context data of the current Channel, use the clearChannelData() method:

await io.channels.clearChannelData();

The data property of the ChannelContext object will be set to an empty object.

To clear the context data of a specific Channel, pass the Channel name as an argument:

await io.channels.clearChannelData("Red");

Updating Specific Properties in Channel Contexts

The Channels API now offers the setPath() and setPaths() methods for updating specific properties in a Channel context. They accept a PathValue object or an array of PathValue objects respectively as a first required argument. As a second optional argument, you can pass the name of a Channel whose context to update. If a Channel name isn't specified, the context of the current Channel will be updated. The paths to update must be specified as dot-separated strings (e.g., "prop1.prop2"). If the path doesn't exist, it will be created.

The following example demonstrates updating a property in the context of the current Channel:

const update = {
    path: "text.color",
    value: "grey"
};

await io.channels.setPath(update);

// Assuming the Channel context data has this shape:
// { backgroundColor: "red" }, it will be updated as follows:
// { backgroundColor: "red", text: { color: "grey" } }

The following example demonstrates updating two properties in the context of a specified Channel:

const channelName = "Red";
const updates = [
    { path: "table.cells", value: { width: 50, height: 30 } },
    { path: "text.color", value: "white" }
];

await io.channels.setPaths(updates, channelName);

// Assuming the Channel context data has this shape:
// { backgroundColor: "red", text: { color: "grey" } }, it will be updated as follows:
//
// {
//     backgroundColor: "red",
//     text: {
//         color: "white"
//     },
//     table: {
//         cells: {
//             width: 50,
//             height: 30
//         }
//     }
// }

Adding FDC3 User Channels via the io.Connect API

The add() method of the Channels API has been extended to be able to add FDC3 User Channels dynamically. To add an FDC3 User Channel, use the fdc3 property of the meta object in the ChannelDefinition object passed as an argument to the add() method:

// io.Connect Channel definition.
const channelDefinition = {
    // It's required to specify a name and color for the Channel
    // when adding Channels via the io.Connect API.
    name: "Black",
    meta: {
        color: "black",
        // FDC3 User Channel definition.
        fdc3: {
            // It's required to provide an ID for the FDC3 User Channel.
            id: "fdc3.channel.9"
        }
    }
};

const channel = await io.channels.add(channelDefinition);

Current Global Layout

To retrieve the currently restored Global Layout, use the getCurrentLayout() method:

const currentLayout = await io.layouts.getCurrentLayout();

Default Global Layout Changed

To get notified when the default Global Layout has been changed, use the onDefaultGlobalChanged() method and provide a callback for handling the event. The callback will receive as an argument an object with a name property holding the name of the newly selected default Global Layout. If the event was fired because the default Global Layout was cleared, the argument will be undefined:

const handler = (layout) => {
    if (layout) {
        console.log(`The default Global Layout was changed to "${layout.name}".`);
    } else {
        console.log ("The default Global Layout was cleared.");
    };
};

const unsubscribe = io.layouts.onDefaultGlobalChanged(handler);

Layout Renamed Event

The callback passed to the onRenamed() method now accepts as a second argument an object with a name property holding the previous name of the renamed Layout:

const handler = (currentLayout, previousLayout) => {
    console.log (`Layout "${previousLayout.name}" was renamed to "${currentLayout.name}".`)
};

const unsubscribe = io.layouts.onRenamed(handler);

Layout Restored Event

To get notified when a Layout is restored, use the onRestored() method:

io.layouts.onRestored(console.log);

Notification Badge

To enable or disable showing a notification badge on the Notification Panel icon of the Home App, use the showNotificationBadge property of the Configuration object passed as an argument to the configure() method of the Notifications API:

const config = { showNotificationBadge: false };

await io.notifications.configure(config);

Active Notifications Changed Event

Added an onCounterChanged() method to the Notifications API as an alias for the onActiveCountChanged() method to achieve compatibility with io.Connect Desktop.

@interopio/browser-platform

The following features are now available in the @interopio/browser-platform library:

Intent Resolver Configuration

To configure the new Intent Resolver introduced with the @interopio/intent-resolver-ui library, use the intentResolver property in the configuration object for initializing the Main app:

import IOBrowserPlatform from "@interopio/browser-platform"

const config = {
    licenseKey: "my-license-key",
    // Settings for the Intent Resolver.
    intentResolver: {
        sources: {
            // It's required to specify the locations of the bundle and styles for the Intent Resolver.
            bundle: "https://my-intent-resolver/modals-bundle.js",
            styles: ["https://my-intent-resolver/styles.css", "https://example.com/custom-styles.css"],
            // It's required to specify the locations of the fonts when using the default Intent Resolver.
            fonts: ["https://my-intent-resolver/fonts.css"]
        }
    },
    browser: {
        // Enabling the Main app to use the Intent Resolver.
        intentResolver: {
            enable: true
        }
    }
};

const { io } = await IOBrowserPlatform(config);

Remote Stores for Layouts & App Preferences

You can now configure your Main app to manage Layouts by using a REST store or io.Manager, and to manage App Preferences by using a REST store.

The following example demonstrates how to instruct the platform to use a remote store for Layouts:

import IOBrowserPlatform from "@interopio/browser-platform";

const config = {
    licenseKey: "my-license-key",
    layouts: {
        mode: "rest",
        // Settings for the REST store.
        rest: {
            url: "https://my-remote-store/layouts"
        }
    }
};

const { io } = await IOBrowserPlatform(config);

The following example demonstrates how to instruct the platform to use a remote store for App Preferences:

import IOBrowserPlatform from "@interopio/browser-platform";

const config = {
    licenseKey: "my-license-key",
    applicationPreferences: {
        store: {
            type: "rest",
            // Settings for the REST store.
            rest: {
                url: "https://my-remote-store/app-preferences"
            }
        }
    }
};

const { io } = await IOBrowserPlatform(config);

Modals API

Introduced a new Modals API which you can use to display modal windows (alerts and dialogs) in io.Connect Browser.

Clearing Channel Context Data

Added the clearChannelData() method to the Channels API for clearing the context data of a Channel.

Updating Specific Properties in Channel Contexts

Added the setPath() and setPaths() methods to the Channels API for updating specific properties in a Channel context.

Current Global Layout

Added the getCurrentLayout() method to the Layouts API for retrieving the currently restored Global Layout.

Default Global Layout Changed

Added the onDefaultGlobalChanged() method to the Layouts API for which you can use to get notified when the default Global Layout has been changed.

Layout Renamed Event

The callback passed to the onRenamed() method now accepts as a second argument an object with a name property holding the previous name of the renamed Layout.

Layout Restored Event

Added the onRestored() method to the Layouts API which you can use to get notified when a Layout is restored.

Adding FDC3 User Channels via the io.Connect API

The add() method of the Channels API has been extended to be able to add FDC3 User Channels dynamically.

Notification Badge

Added a showNotificationBadge property to the Configuration object passed as an argument to the configure() method of the Notifications API. Use this property to enable or disable showing a notification badge on the Notification Panel icon of the Home App.

Active Notifications Changed Event

Added an onCounterChanged() method to the Notifications API as an alias for the onActiveCountChanged() method to achieve compatibility with io.Connect Desktop.

@interopio/fdc3

  • Added support for version 2.2 of the FDC3 standard.

  • Added support for the FDC3 Web Connection Protocol which allows FDC3 client apps to use the getAgent() method to acquire a DesktopAgent instance.

@interopio/home-ui-react

Layouts Panel

Profile Panel

  • Added modal windows which are mandatory for using the Launchpad.
  • Added a "Create Workspace" button in the "Workspaces" section of the Launchpad which creates an empty Workspace in a new browser window.
  • Added a settings property in the config object for the <IOConnectHome /> component which can be used to provide general platform settings for the Home App.
  • Added an IOInitErrorScreen property in the components object inside the config object for the <IOConnectHome /> component which can be used to customize the error screen displayed in case of failure to initialize the Home App.
  • Added a settings property in the launchpad object inside the config object for the <IOConnectHome /> component which can be used to provide settings for the Launchpad.
  • Added header and sections properties in the components object under the launchpad property of the config object for the <IOConnectHome /> component. Use these properties to customize the Launchpad header components and sections.
  • Added an isFolderCollapsible property to the components for the default sections of the Launchpad.
  • Added openInstances, tooltip, and className properties in the object describing a custom section item in the Launchpad.
  • Added icon, iconSrc, and separatorAfter properties in the object describing a custom context menu item in a custom Launchpad section item.
  • The Home App can now run in io.Connect Desktop provided that auto injection of the @interopio/desktop library is disabled. If the Home App is configured to run in io.Connect Desktop, the setup flow for requesting browser permissions will be skipped.

@interopio/intent-resolver-ui

Implemented the @interopio/intent-resolver-ui library that provides support for an Intent Resolver UI app embedded in the client DOM.

Intent Resolver UI

The library also enables you to provide your own custom Intent Resolver as a React component.

⚠️ Note that, as described in the breaking changes section, the @interopio/intents-resolver-api and @interopio/intents-resolver-ui-react libraries have been deprecated in io.Connect Browser. The legacy implementations of the Intent Resolver app are still supported and will work in the latest versions of io.Connect Browser.

@interopio/modals-api

io.Connect Browser now 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 enables you to show alerts and dialogs in io.Connect Browser from your interop-enabled apps.

To be able to use modal windows in your project, you must configure the Main app of your project and each Browser Client in which you want to use the Modals API.

In your Main app, use the modals property of the configuration object for initializing the @interopio/browser-platform library to define the sources of the modal windows to be used by the platform. Enable the Modals API by passing the IOModals() factory function to the libraries array of the browser object used for the internal initialization of the @interopio/browser library:

import IOBrowserPlatform from "@interopio/browser-platform";
import IOModals from "@interopio/modals-api";

const config = {
    licenseKey: "my-license-key",
    // Settings for the modal windows to be used in the platform.
    modals: {
        sources: {
            // It's required to specify the locations of the bundle and styles for the modal windows.
            // You can use the resources provided by the `@interopio/modals-ui` library
            // or provide your own custom library that implements the `@interopio/modals-ui` API.
            bundle: "https://my-modals/modals-bundle.js",
            styles: ["https://my-modals/styles.css", "https://example.com/custom-styles.css"],
            // It's required to specify the fonts when using the default modal windows
            // provided by the `@interopio/modals-ui` library.
            fonts: ["https://my-modals/fonts.css"]
        }
    },
    browser: {
        // Enabling the Modals API.
        libraries: [IOModals],
        // Enabling the Main app to use modal windows.
        modals: {
            alerts: {
                enabled: true
            },
            dialogs: {
                enabled: true
            }
        }
    }
};

const { io } = await IOBrowserPlatform(config);

// Now you can access the Modals API via `io.modals`.

In your Browser Client apps, initialize the @interopio/browser library enabling the Modals API:

import IOBrowser from "@interopio/desktop";
import IOModals from "@interopio/modals-api";

// Initializing the Modals API.
const config = {
    libraries: [IOModals],
    // Enabling the Browser Client to use modal windows.
    modals: {
        alerts: {
            enabled: true
        },
        dialogs: {
            enabled: true
        }
    }
};

const io = await IOBrowser(config);

// Now you can access the Modals API via `io.modals`.

The Alerts API is accessible via the io.modals.alerts object. To display an alert window, use the request() method and provide an AlertRequestConfig object as a required argument:

const alertOptions = {
    variant: "success",
    text: "Successfully initialized the Modals API!"
};

// Displaying an alert.
await io.modals.alerts.request(alertOptions);

Alerts

The Dialogs API is accessible via the io.modals.dialogs object. To display a dialog window, use the request() method and provide an DialogRequestConfig object as a required argument:

const dialogOptions = {
    templateName: "noInputsConfirmationDialog",
    variables: {
        title: "New Updates Available",
        heading: "Restart to update",
        text: "New updates are available for the io.Connect platform that require restart. Do you want to restart the platform now?",
        actionButtons: [
            { variant: "primary", text: "Restart", id: "restart" },
            { variant: "outline", text: "Remind me later", id: "remind-later" }
        ]
    }
};

// Displaying a dialog.
const response = await io.modals.dialogs.request(dialogOptions);

Dialogs

@interopio/modals-ui

The @interopio/modals-ui library provides the bundle, styles, and fonts for the set of predefined alerts and dialogs used in io.Connect Browser via the newly introduced Modals API.

You can use the available library resources when configuring the usage of modal windows in your Main app, and you can also decorate the library or create your own modal windows library that implements the @interopio/modals-ui API in order to use your own custom alerts and dialogs.

@interopio/theme

io.Connect Browser and all its default system web apps (Home App, Workspaces App, Launchpad, and more) use the io.Connect styles provided by the @interopio/theme package. You can use the CSS variables provided by the io.Connect themes to customize the system apps of your platform.

The following image demonstrates the available CSS variables for customizing the Workspace tab of the Workspaces App:

Workspace Tab

Improvements & Bug Fixes

⚠️ Note that each improvement or bug fix is listed under all libraries it affects.

@interopio/browser

  • The callback passed to the subscribe() method of the Channels API is now invoked when a new Channel is joined even if there isn't any data in the Channel context.
  • Improved the Intent request internal decoder.
  • Improved the widget types.
  • Removed the @finos/fdc3 dependency.

@interopio/browser-platform

  • The callback passed to the subscribe() method of the Channels API is now invoked when a new Channel is joined even if there isn't any data in the Channel context.
  • Shared contexts are no longer re-announced to apps that have retrieved a context but aren't subscribed for updates to the context on reconnection to the io.Connect Gateway.
  • Improved typing and internal handling of Interop method invocations.
  • Improved the mechanism for handling Layouts.
  • Improvements related to handling plugins.

@interopio/fdc3

  • Improved the Intent request internal decoder.
  • Fixed an issue related to the callback invocation when subscribed to a specific FDC3 context type.

@interopio/home-ui-react

  • Launchpad button is now hidden automatically if the Home App instance isn't a Main app.
  • Improved the behavior for closing the Launchpad.
  • Added a tooltip to the Launchpad button.
  • Improved the mechanism for storing preferences and the app state after user interaction.
  • Improved the search bar functionality and styles.
  • Removed obsolete assets from the library.

@interopio/theme

  • Moved to using CSS variables.
  • CSS improvements for the system apps of the Home App.

@interopio/workspaces-ui-react

  • Improved the dragging behavior of Workspace tabs.
  • Fixed an issue with disappearing Workspace content.