Windows

The Workspaces API offers advanced window management functionalities. Workspaces allow you to arrange multiple apps within the same visual window called a Workspaces App (or Frame). This is performed either programmatically or by dragging and dropping windows to rearrange them within the Workspace. Each app is treated as an individual building block that can be added, removed, moved, or resized within the unifying Workspaces App instance. Workspace Layouts can be saved and restored within the same or in different Workspaces App instances. When a Workspace Layout is restored, the arrangement of the apps participating in it is preserved and you can also save their context data, allowing you to resume working right from where you left off.

Workspaces App

The Workspaces App is a web app. It's the shell that can hold multiple Workspaces as tabs in a single or in multiple Workspaces App instances. The Workspaces App is a vital element in the Workspaces functionality as it handles opening and closing Workspaces, arranging windows in a Workspace, adding or removing Workspaces and Workspace windows.

A fully functional Workspaces App is available in io.Connect Desktop. For io.Connect Browser projects, you have the following options:

• Use the Home App as a starting point. The Home App is the recommended approach for building custom io.Connect Browser projects, as it already contains most of the necessary setup flows, configuration, and io.Connect functionalities (Main app that's also a Workspaces App, Launchpad, Global Layouts, Notifications, user profile, platform preferences, and more) that you would otherwise need to implement and integrate separately.

• Create a custom Workspaces App by using the @interopio/workspaces-ui-react library. Use this approach only if the Home App doesn't meet your business requirements and you want to build an entirely custom io.Connect Browser project starting from the ground up. A custom Workspaces App can be set up either as a dedicated app (separate from the Main app), or it can also act as the Main app of your project (see Enabling Workspaces).

Workspace

A Workspace contains one or more app instances (Workspace windows) arranged in columns, rows or groups of tabbed windows. Each Workspace window acts as a building block of the Workspace and can be resized, maximized and restored within the Workspace. App instances can be added to the Workspace manually (via the UI of the Workspaces App) or programmatically, and can also be ejected from a Workspace as floating windows. The arrangement of each Workspace can be uniquely modified to enhance the user experience and enable users to perform specific tasks quickly and intuitively. Instead of wasting time and effort in finding, opening, and arranging numerous apps, you can restore an already saved Workspace with a single click.

Workspace Layout

A Workspace Layout is a type of io.Connect Layout represented as a JSON object describing a Workspace. It contains the name of the Workspace, the structure of its children and how they are arranged, the names of each app present in the Workspace, context, and other settings. The Workspace Layout is the blueprint used by the Workspaces API to build the Workspace and its components.

Workspace Layouts can be created programmatically, defined in the Workspaces App definition, or fetched from a Layout store (e.g., if your io.Connect Browser project is using io.Manager).

The following example demonstrates the shape of a simple Workspace Layout containing two apps:

const layout = {
    // Workspace name.
    name: "My Workspace",
    // Type of the io.Connect Layout. Set to `"Workspace"` for Workspace Layouts.
    type: "Workspace",
    // List of Layout components. A Workspace Layout consists of a single component of type `"Workspace"`.
    components: [
        {
            type: "Workspace",
            state: {
                // Workspace structure.
                children: [
                    {
                        type: "row",
                        children: [
                            {
                                type: "group",
                                children: [
                                    {
                                        type: "window",
                                        config: {
                                            appName: "clientlist"
                                        }
                                    }
                                ]
                            },
                            {
                                type: "group",
                                children: [
                                    {
                                        type: "window",
                                        config: {
                                            appName: "clientportfolio"
                                        }
                                    }
                                ],
                                config: {}
                            }
                        ],
                        config: {}
                    }
                ],
                // Workspace settings.
                config: {},
                // Workspace context.
                context: {}
            }
        }
    ]
};