Windows

The Workspaces API offers advanced window management functionalities. Workspaces allow you to arrange multiple apps within the same visual window called "Workspaces App" or "Frame". This arrangement can be performed programmatically or by dragging and dropping apps within the Frame. Workspace Layouts can be saved and restore them within the same or in different Frames. 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 (or the Frame) is a web app. It's the shell that can hold multiple Workspaces as tabs in a single or in multiple Frame 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 functioning Workspaces App is available in io.Connect Desktop. For io.Connect Browser projects, however, you have to create your own Workspaces App. This is extremely simple, as all Workspaces App functionalities are provided as a single React component by the @interopio/workspaces-ui-react library.

For more details on how to create and customize your own Workspaces App, see the Workspaces App section.

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 JSON object which describes 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 configuration of the Workspaces app, or fetched from a remote Layout store (e.g., if your Main app is connected to io.Manager).

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

const layout = {
    children: [
        {
            type: "row",
            children: [
                {
                    type: "group",
                    children: [
                        {
                            type: "window",
                            config: {
                                appName: "clientlist"
                            }
                        }
                    ],
                    config: {}
                },
                {
                    type: "group",
                    children: [
                        {
                            type: "window",
                            config: {
                                appName: "clientportfolio"
                            }
                        }
                    ],
                    config: {}
                }
            ],
            config: {}
        }
    ],
    config: {}
};