Windows

The Windows component enables you to open new io.Connect Windows. Instantiate the component and assign an ID to it:

import dash
import dash_glue42

​app = dash.Dash(__name__)
​
​app.layout = dash_glue42.Glue42(id="io-connect", children=[
    dash_glue42.Windows(id="io-connect-windows")
])

To open an io.Connect Window, define a callback and pass the ID of the Windows component and its open property in the Output. For Input pass the ID and the property of the component that you want to trigger opening the window. When opening a new io.Connect Window, it's required to specify a unique name and a URL. Pass an options object if you want to specify window bounds, mode, and more. The JavaScript equivalent of the options object is the WindowCreateOptions object.

For more details on the available window settings, see Window Settings.

The following example demonstrates how to open a new window with specific bounds and a title when the user clicks a button:

@app.callback(
    Output("io-connect-windows", "open"),
    Input("open-window", "n_clicks"),
    prevent_initial_call=True
)
def open_window(_):

    return {
        # Each io.Connect Window must have a unique name.
        "name": "io-connect-docs",
        "url": "https://docs.interop.io",
        "options": {
            "title": "io.Connect Docs",
            "width": 400,
            "height": 500,
        }
    }

See the Dash Window Management example on GitHub.

You can specify settings per io.Connect Window by passing an options object when opening a new window:

@app.callback(
    Output("io-connect-windows", "open"),
    Input("open-window", "n_clicks"),
    prevent_initial_call=True
)
def open_window(_):

    options = {
            "height": 640,
            "width": 560,
            "left": 100,
            "top": 100,
            "mode": "flat",
            "title": "io.Connect Documentation",
            "backgroundColor": "#1a2b30",
            "focus": False
    }

    return {
        "name": "io-connect-docs",
        "url": "https://docs.interop.io",
        "options": options
    }

For all available window settings, see the WindowCreateOptions object, which is the JavaScript equivalent of the options object.