How to...

The Glue42 Dash library offers components based on React that enable you to use Glue42 features in your apps built with the Dash framework for Python.

Note that all Glue42 Dash components aren't represented visually and will be invisible in your apps. Their only purpose is to provide access to Glue42 functionalities.

The Glue42 Dash library is available as a package on the Python Package Index. To install it, execute the following command:

pip install dash_glue42

To reference the Glue42 Dash library in your Dash app:

import dash_glue42

When the JavaScript of the library has been loaded, a glue42dash object is attached to the global window object with the following properties:

The glue42dash object allows access to the JavaScript Glue42 instance initialized internally by the Glue42 Dash library.

Note that your the HTML template of your app should respect the fact that libraries must be loaded before external scripts. Consider this when structuring the loading sequence of your scripts to avoid cases of failed library initialization.

To initialize the Glue42 Dash library, use the Glue42 component and pass an id for it:

import dash
import dash_glue42

app = dash.Dash(__name__)

app.layout = dash_glue42.Glue42(id="glue42")

The Glue42 component has the following properties:

Library Configuration

The underlying Glue42 JavaScript library accepts an optional configuration object. The example below demonstrates how to enable the Glue42 Channels API by using the settings property of the Glue42 component when the app is meant to run in Glue42 Enterprise:

import dash
import dash_glue42

glue_settings = {
    # Enabling Channels in Glue42 Enterprise.
    "desktop": {
        "config": {
            "channels": True
        }
    }
}

app = dash.Dash(__name__)

# Initializing the Glue42 library with custom settings.
app.layout = dash_glue42.Glue42(id="glue42", settings=glue_settings, children=[
    # Instantiating the Channels component.
    dash_glue42.Channels(id="glue42-channels")
])

The table below describes the properties of the optional settings object:

Note that in Python it isn't possible to pass a function as a value, therefore the properties of the config objects which accept a function as a value can't be set.

Configuration from JavaScript Code

You can also supply configuration settings for the initialization of the Glue42 Dash library from JavaScript code by using the libSettings property of the glue42dash object attached to the global window object. The libSettings object allows you to override the Glue42 factory functions and provide a list of Glue42 factory functions that will be initialized internally to provide access to specific functionalities.

The following example demonstrates how to enable the Glue42 Search API and override the factory function:

import Glue from "@glue42/desktop";
import GlueSearch from "@glue42/search-api";

const settings = {
    desktop: {
        // You may need a specific version.
        factory: Glue,
        libraries: [GlueSearch]
    }
};

window.glue42dash.libsettings = settings;

Preventing Glue42 Initialization

Since the libSettings object enables you to override the Glue42 factory functions, it's possible to entirely skip the initialization of the Glue42 library. This may be useful if your app is meant to run both within and outside of Glue42 Enterprise. To prevent the initialization of the Glue42 library when running outside of Glue42 Enterprise, your factory function override must return an object with a skipInit property set to true.

Note that if the initialization of the Glue42 library has been prevented, the children of the Glue42 component won't have access to Glue42 functionalities. Consider this if you expect Input from a Glue42 Dash component or update a prop from a callback.

Note that the skipInit property is an additional implementation only for Glue42 Dash apps. This property isn't part of the Glue42 JavaScript API.

The following example demonstrates how to determine whether the app is running in Glue42 Enterprise by checking for the glue42gd object attached to the global window object only when the app is running in Glue42 Enterprise. If the app is running outside of Glue42 Enterprise, an override function is provided to prevent the Glue42 initialization:

// Checking for the `glue42gd` object to determine whether the app is running in Glue42 Enterprise.
const inGlue42Enterprise = !!window.glue42gd;

if (inGlue42Enterprise === false) {
    const settings = {
        desktop: {
            // Preventing the Glue42 initialization if not running in Glue42 Enterprise.
            factory: () => Promise.resolve({ skipInit: true })
        }
    };

    window.glue42dash.libSettings = settings;
};

To add your Dash app to the Glue42 Toolbar, you must create a JSON file with app configuration. Place this file in the %LocalAppData%\Tick42\UserData\<ENV>-<REG>\apps folder, where <ENV>-<REG> must be replaced with the environment and region of your Glue42 Enterprise copy (e.g., T42-DEMO).

Note that this step isn't necessary if your app is running in a Glue42 Core project. For more details, see the App Management > App Definitions section in the Glue42 Core documentation.

The following is an example configuration for a Dash app:

{
    "title": "Dash App",
    "type": "window",
    "name": "dash-app",
    "details": {
        "url": "http://127.0.0.1:5000/dash-app",
        "top": 25,
        "left": 800,
        "height": 400,
        "width": 400
    }
}

For more details, see the Developers > Configuration > Application section.

See also the Glue42 Dash examples on GitHub, demonstrating the various Glue42 Enterprise features.

For more detailed information on the different Glue42 concepts and APIs, see:

• Shared Contexts
• Channels
• Interop
• Window Management
• Notifications