Skip to main content

Changelog

New Features

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

@interopio/browser

Retrieving Layout Contents

The Layouts API has been extended with a new getLayoutContents() method that allows you to retrieve the contents of Global Layouts and Workspace Layouts. The method receives a GetContentsOptions object as a required argument.

When used for retrieving the contents of a Global Layout, the returned LayoutContents object will contain all components participating in the Global Layout: individual app instances (including all Workspaces App instances), all Workspace instances hosted in all Workspaces App instances, and all windows participating in all Workspaces.

When used for retrieving the contents of a Workspace Layout, the returned LayoutContents object will contain only the windows participating in the Workspace.

The following example demonstrates how to retrieve the contents of a Global Layout:

const options = { name: "My Layout", type: "Global" };

const {
   appComponents,
   workspaceComponents,
   workspaceWindows
} = await io.layouts.getLayoutContents(options);

// List all apps in the Layout.
console.log("Apps:", appComponents);

// List all Workspaces App instances in the Layout.
console.log("Workspaces App instances:", workspaceComponents);

// List all windows participating in all Workspaces.
console.log("Workspace windows:", workspaceWindows);

Leaving Channels

The leave() method of the Channels API now accepts a string argument specifying the ID of the window to remove from the currently joined Channel (in single Channel mode) or from all currently joined Channels (in multi Channel mode):

const windowId = win.id;

await io.channels.leave(windowId);

Filtering Channels by FDC3 Context Type

The getMyChannels() method of the Channels API now accepts an optional FDC3Options argument, allowing you to filter the retrieved Channel contexts by FDC3 context type:

// Retrieve only Channel contexts containing FDC3 data of type `"fdc3.instrument"`.
const options = { contextType: "fdc3.instrument" };

const channels = await io.channels.getMyChannels(options);

Configuring IFrame Attributes

Related to the release of the new io.Connect IFrames API, the DefinitionDetails object describing the details object in an app definition has been extended with an iframeSandbox property for configuring the sandbox attribute of the <iframe> element.

You can also use the iframePermissionsPolicy property introduced in io.Connect Browser 3.4 to configure the allow attribute of the <iframe> element.

⚠️ Note that the workspacesSandbox property will be deprecated in io.Connect Browser 5.0 and it's strongly recommended to migrate to the iframeSandbox property instead.

@interopio/browser-platform

Retrieving Layout Contents

Added support for the getLayoutContents() method in the Layouts API that allows you to retrieve the contents of Global Layouts and Workspace Layouts.

IFrames API

  • Added support for the new @interopio/iframes-api library, enabling Browser Clients to start apps in <iframe> elements.
  • Added support for the iframeSandbox property of the details object in the app definition for configuring the sandbox attribute of the <iframe> element.

Leaving Channels

Added support for passing a string argument to the leave() method of the Channels API that specifies the ID of the window to remove from a single or from multiple Channels.

Filtering Channels by FDC3 Context Type

Added support for the optional FDC3Options argument in the getMyChannels() method, enabling filtering of Channel contexts by FDC3 context type.

@interopio/home-ui-react

Launchpad Redesign

The Launchpad has been redesigned - the Global Layouts are now listed in a Layouts section similarly to apps and Workspaces instead of in a separate panel in the Launchpad:

Launchpad Sections

Favorites are now added and removed via the context menu for each section item instead of via a dedicated button in the item list.

Library Features

  • Added sectionIconSrc to the default section components: <ApplicationsSection />, <FavoritesSection />, and <WorkspacesSection />.
  • Extended the config object of the <Section /> component with an optional HeaderButton property that accepts a custom section header action component.
  • Added item-level isSelected and statusPill support for items rendered in the <Section /> component.
  • Changed the return shape of the getIcon() function passed to the <Section /> component from a string value to structured icon data ({ variant: IconVariant } for predefined icons or { src: string } for custom icons).

@interopio/iframes-api

Opening Apps in IFrames

The new @interopio/iframes-api library provides a convenient IFrames API that allows you to start apps in <iframe> elements within the current app instance.

To use the IFrames API, add it to the libraries array when initializing the @interopio/browser-platform or the @interopio/browser library.

The following example demonstrates how to include the @interopio/iframes-api library when initializing the @interopio/browser-platform library in your Main app:

import IOBrowserPlatform from "@interopio/browser-platform";
import IOIFrames from "@interopio/iframes-api";

const config = {
    licenseKey: "my-license-key",
    browser: {
        libraries: [IOIFrames]
    }
};

const { io } = await IOBrowserPlatform(config);

To open an app in an <iframe> element, use the openApp() method and provide the app name and a container element in which to render the <iframe>:

const container = document.getElementById("my-iframe-container");

const config = {
    appName: "my-app",
    container,
    context: { ticker: "MSFT" }
}

const { id, iframe } = await io.iframes.openApp();

To handle close requests for the app opened in an <iframe> element, use the onCloseRequested() method and invoke the provided confirmClose() callback to confirm to the platform that the <iframe> can be closed. You can then remove the <iframe> container with your custom logic:

io.iframes.onCloseRequested(async (instance, confirmClose) => {
    // Confirm to the platform that the `<iframe>` can be closed.
    await confirmClose();

    // Remove the `<iframe>` container with your custom logic.
});

@interopio/workspaces-ui-react

Workspace Splitter Size

It's now possible to customize the size of the Workspace splitters (the draggable dividers between the windows in a Workspace).

To specify a splitter size in pixels, use the splitterSize property of the settings object within the components prop of the <Workspaces /> component:

import Workspaces from "@interopio/workspaces-ui-react";

const App = () => {
    return (
        <Workspaces
            components={{
                settings: {
                    splitterSize: 10
                }
            }}
        />
    );
};

export default App;

Improvements & Bug Fixes

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

@interopio/browser

  • Fixed the configure() method of the Notifications API to resolve with the updated notification configuration instead of undefined.
  • Fixed an issue where the restrictAll() method of the Channels API resolved with an empty object instead of undefined.
  • Enforced stricter URL validation for app definitions and when opening windows dynamically. URLs with unsafe protocols (data:, javascript:, vbscript:) are now rejected.

@interopio/browser-platform

  • Fixed the configure() method of the Notifications API to resolve with the updated notification configuration instead of undefined.
  • Fixed an issue where the restrictAll() method of the Channels API resolved with an empty object instead of undefined.
  • Enforced stricter URL validation for app definitions and when opening windows dynamically. URLs with unsafe protocols (data:, javascript:, vbscript:) are now rejected.
  • Improved the performance of fetching remote configuration from io.Manager.

@interopio/fdc3

  • Updated the underlying @finos/fdc3 dependency to version 2.2.3.
  • Updated the app Channel definition decoder to accept id without requiring name, aligning with the FDC3 2.2 specification.

@interopio/home-ui-react

  • Improved the text and order of the Platform Preferences panel components.
  • Improved the Notification Settings panel styling for consistency between panels.

@interopio/modals-ui

  • Fixed dialog visual rendering issues related to theme class management when switching themes.

@interopio/theme

  • Fixed form placeholder color and removed the "Clear" button for form inputs.

@interopio/workspaces-ui-react

  • Added support for the iframeSandbox property of the details object in the app definition for configuring the sandbox attribute of the <iframe> element.