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 |
3.0 |
@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 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:
Home App Config
The function passed to the
getIOConnectConfig
property of theconfig
object for the<IOConnectHome />
component now accepts as an argument an object withtype
anduser
properties instead of an object describing the logged in user. Thetype
property holds a string value indicating the type of the authentication process used for the Home App (i.e., the value of thetype
property of thelogin
object in the Home App configuration) and theuser
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 theworkspaces
object inside theconfig
object for the<IOConnectHome />
component. To customize the Launchpad button, use theLogoComponent
property of thecomponents
object inside theworkspaces
object instead.- Deprecated the
NotificationsPanel
andUserPanel
properties of thelaunchpad
object inside theconfig
object for the<IOConnectHome />
component.- Deprecated the
Sections
property of thelaunchpad
object inside theconfig
object for the<IOConnectHome />
component. You can now use thesections
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
, andshowAllItems
properties of theconfig
object for the<Section />
component for creating custom sections in the Launchpad.- The
isCollapsible
property of theconfig
object for the<Section />
component now defaults totrue
.- 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 thesources
object under thewidget
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. "Save Workspace" is now a dialog.
- 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 theintentResolver
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 theChannelContext
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()
andsetPaths()
methods for updating specific properties in a Channel context. They accept aPathValue
object or an array ofPathValue
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 thefdc3
property of themeta
object in theChannelDefinition
object passed as an argument to theadd()
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 aname
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 beundefined
:
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 aname
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 theConfiguration
object passed as an argument to theconfigure()
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 theonActiveCountChanged()
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 theintentResolver
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()
andsetPaths()
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 aname
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 theConfiguration
object passed as an argument to theconfigure()
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 theonActiveCountChanged()
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 aDesktopAgent
instance.
@interopio/home-ui-react
- The Layouts Panel has been redesigned.
- A system dropdown menu was added to the Home app header containing a Profile Panel and "Notification Settings" and "Platform Preferences" sections.
- 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 theconfig
object for the<IOConnectHome />
component which can be used to provide general platform settings for the Home App.- Added an
IOInitErrorScreen
property in thecomponents
object inside theconfig
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 thelaunchpad
object inside theconfig
object for the<IOConnectHome />
component which can be used to provide settings for the Launchpad.- Added
header
andsections
properties in thecomponents
object under thelaunchpad
property of theconfig
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
, andclassName
properties in the object describing a custom section item in the Launchpad.- Added
icon
,iconSrc
, andseparatorAfter
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.
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 theIOModals()
factory function to thelibraries
array of thebrowser
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 therequest()
method and provide anAlertRequestConfig
object as a required argument:
const alertOptions = { variant: "success", text: "Successfully initialized the Modals API!" }; // Displaying an alert. await io.modals.alerts.request(alertOptions);
The Dialogs API is accessible via the
io.modals.dialogs
object. To display a dialog window, use therequest()
method and provide anDialogRequestConfig
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);
@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:
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.