Windows

The Workspaces API offers advanced window management functionalities. Using Workspaces, users are able to arrange multiple apps within the same visual window (called Frame). This arrangement can be performed programmatically or by dragging and dropping apps within the Frame. Users can also save Workspace Layouts and restore them within the same Frame or even in different Frames.

Workspaces enable the users to compose a custom arrangement of apps by treating each app as an individual building block that can be added, removed, moved or resized within a Workspace. The Frame can hold multiple Workspaces as tabs and can also be maximized, minimized or resized.

Frame

The Frame is a web app (also called Workspaces App). This app is the shell that can hold multiple Workspaces as tabs in a single or multiple windows (frames). The Frame 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 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 apps (windows) arranged in columns, rows or groups of tabbed windows. Each app acts as a building block of a Workspace and can be resized, maximized and restored within a Workspace. Apps can be added to a Workspace (by drag and drop or programmatically) and can also be ejected from a Workspace as floating windows. The arrangement of each Workspace can be uniquely suited to provide the necessary layout and functionalities for performing tasks quickly and intuitively. Instead of wasting time and effort in finding, opening and arranging the relevant apps, restore the respective Workspace with a single click.

Workspace Layout

A Workspace Layout is a JSON object which describes the model of 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. This Layout is the blueprint used by the API to build the Workspace and its components.

Through the Workspaces App the users can create, modify, save and delete a Workspace Layout. The Workspace Layouts are saved locally through the IndexedDB API of the user's browser.

The example below shows 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: {}
};