# Dash

Source: https://docs.interop.io/desktop/capabilities/windows/window-management/dash/index.html

## Opening Windows

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

```python
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`](https://docs.interop.io/desktop/reference/javascript/windows/windowcreateoptions/index.md) object.

For more details on the available window settings, see [Window Settings](#window_settings).

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

```python
@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](https://github.com/InteropIO/dash-example/tree/master/window-management) on GitHub.*

## Window Settings

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

```python
@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`](https://docs.interop.io/desktop/reference/javascript/windows/windowcreateoptions/index.md) object, which is the JavaScript equivalent of the `options` object.