Windows

Opening Windows

The Windows component enables you to open new Glue42 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="glue42", children=[
    dash_glue42.Windows(id="g42-windows")
])

To open a Glue42 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 Glue42 Window, it is required to specify a unique name and a URL. Pass an options object if you want to specify window bounds, mode, etc.

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("g42-windows", "open"),
    Input("open-window", "n_clicks"),
    prevent_initial_call=True
)
def open_window(_):

    return {
        # Each Glue42 Window must have a unique name.
        "name": "glue42-docs",
        "url": "https://docs.glue42.com",
        "title": "Glue42 Docs",
        "options": {
            "width": 400,
            "height": 500,
        }
    }

See the Dash Window Management example on GitHub.

Window Settings

You can specify settings per Glue42 Window either by using its application configuration file, or by passing an options object when opening a new window.

  • using the application configuration settings:
{
    "type": "window",
    "name": "glue42-docs",
    "details": {
        "url": "https://docs.glue42.com",
        "height": 640,
        "width": 560,
        "left": 100,
        "top": 100,
        "mode": "flat",
        "title": "Glue42 Documentation",
        "backgroundColor": "#1a2b30",
        "focus": false
    }
}
  • passing an options object when opening a new window:
@app.callback(
    Output("g42-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": "Glue42 Documentation",
            "backgroundColor": "#1a2b30",
            "focus": False
        }

    return {
        "name": "glue42-docs",
        "url": "https://docs.glue42.com",
        "title": "Glue42 Docs",
        "options": options
    }

The table below shows all available window settings:

Name Type Description Default Supported By Runtime Update Support
allowClose boolean If false, the window won't contain a "Close" button. true All Flat and HTML
allowCollapse boolean If false, the window won't contain a "Collapse" button. true All Flat and HTML
allowForward boolean If false, the window won't contain an activity related "Forward" button. true HTML None
allowLockUnlock boolean If false, the window won't contain a "Lock/Unlock" button. false All Flat and HTML
allowMaximize boolean If false, the window won't contain a "Maximize" button. true All Flat and HTML
allowMinimize boolean If false, the window won't contain a "Minimize" button. true All Flat and HTML
allowTabClose boolean If false, the tab header won't contain a "Close" button. true Tab None
allowUnstick boolean If false, the window won't unstick from other windows. true All None
autoAlign boolean If true, a snapped window will adjust its bounds to the same width/height of the window it has stuck to, and/or will occupy the space between other windows (if any). true All None
autoSnap boolean If true, when moving the window operation ends, the window will snap to one of the approaching edges of another window (if any edges of the other window are within the defined snapping distance). true All None
base64ImageSource string Image as Base64 string that will be used as a taskbar icon for the window. The supported formats are PNG, ICO, JPG, APNG. - All All
borderColor string Can be a color name such as "Red", or a hex-encoded RGB or ARGB value. - Flat None
collapseHeight number Defines the height of the window when collapsed (in pixels). System titlebar height Flat and HTML Flat and HTML
devToolsEnable boolean If true, allows opening a developer console (using F12) for the new window. true All None
downloadSettings Object Object that defines file download behavior in the window. - All None
downloadSettings.autoSave boolean If true, will auto save the file (without asking the user where to save it). If false, a system save dialog will appear. true All None
downloadSettings.autoOpenPath boolean If true, will open the folder that contains the downloaded file after the download is completed. false All None
downloadSettings.autoOpenDownload boolean If true, will open the download file after the download is completed. false All None
downloadSettings.enable boolean If true, enables the window to download files. true All None
downloadSettings.enableDownloadBar boolean If true, a download bar tracking the progress will appear at the bottom of the window when downloading. If false, the download process will be invisible. true All None
downloadSettings.path string Path where the downloaded file will be saved. Due to security reasons, it is only possible to provide two download paths: the Windows "Temp" or "Downloads" folder. - All None
focus boolean If false, the window won't be on focus when created. true All All
hasMoveAreas boolean If false, the window can't be moved. true Flat and HTML Flat
hasSizeAreas boolean If false, the window can't be resized by dragging its borders, maximizing, etc. true Flat and HTML Flat
height number Window height (in pixels). 400 All All
hidden boolean If true, the window will be started as a hidden window. false All All
historyNavigationEnabled boolean If true, this will allow the users to navigate back (CTRL + Left) and forward (CTRL + Right) through the web page history. GLOBAL CONFIG All None
isChild boolean If true, the window will open as a child window, sharing the lifetime and the environment of the opener. false All None
isCollapsed boolean If true, the window will start collapsed. false All None
isSticky boolean If true, the window will stick to other Glue42 Windows forming groups. true All All
left number Distance of the top left window corner from the left edge of the screen (in pixels). 0 All All
maxHeight number Specifies the maximum window height (in pixels). - All All
maxWidth number Specifies the maximum window width (in pixels). - All All
minHeight number Specifies the minimum window height (in pixels). 30 All All
minWidth number Specifies the minimum window width (in pixels). 50 All All
mode string The type of the Glue42 Window. Possible values are "flat", "tab" and "html". "flat" - None
moveAreaThickness string How much of the window area is to be considered as a moving area (meaning you can move the window by grabbing it). The string value corresponds to the left, top, right and bottom borders. "0, 12, 0, 0" HTML None
moveAreaTopMargin string Margin for the top window move area. The string value corresponds to the left, top, right and bottom borders of the move area. Setting moveAreaTopMargin to "10, 0, 0, 10" will take away 10 pixels from the left and the right side of the move area. "0, 0, 0, 0" HTML None
onTop boolean If true, the window will appear on top of the z-order. false All None
relativeDirection string Direction ("bottom", "top", "left", "right") of positioning the window relatively to the relativeTo window. Considered only if relativeTo is supplied. "right" All None
relativeTo string The ID of the window that will be used to relatively position the new window. Can be combined with relativeDirection. - All None
showInTaskbar boolean If false, the window won't appear on the Windows taskbar. true All None
showTitleBar boolean Determines whether the window will have a title bar. true Flat None
sizeAreaThickness string How much of the window area is to be considered as a sizing area (meaning you can resize the window using that area). The string value corresponds to the left, top, right and bottom borders. "5, 5, 5, 5" HTML None
snappingEdges string Specifies the active Glue42 Window snapping edges. Possible values are: "top", "left", "right", "bottom", "all" or any combination of them (e.g., "left, right"). "all" All None
startLocation string Specifies the start window location. Possible options are "Automatic" (The Glue42 Window decides where it will be positioned) and "CenterScreen". "Automatic" All None
stickyFrameColor string Specifies the Glue42 Window frame color. Accepts hex color as a string ("#666666") or named HTML colors ("red"). "#5b8dc9" All All
stickyGroup string If set, the Glue42 Window can only stick to windows that have the same group. "Any" All None
tabGroupId string Specifies the tab group ID. If two or more tab windows are defined with the same ID, they will be hosted in the same tab window. "Automatic" Tab None
tabIndex number Specifies the tab position index. Tab windows in the same tab group are ordered by their position index. Use negative index to make the tab active. - Tab None
tabSelected boolean Whether the tab is selected. false Tab None
tabTitle string Sets the tab title. "" Tab Tab
tabToolTip string Sets the tab tooltip. "" Tab Tab
title string Sets the window title. To work properly, there should be a <title> HTML tag in the page. - All All
top number Distance of the top left window corner from the top edge of the screen (in pixels). 0 All All
url string The URL of the app to be loaded in the new window. - All All
useRandomFrameColor boolean If true, this will set a random (from a predefined list of colors) frame color to the new window. false All None
width number Window width (in pixels). 400 All All
windowName string The name of the window. - All None
windowState string If set, the window will start in the specified state ("maximized", "minimized", "normal"). "normal" All All