Notifications

Notifications Component

To be able to raise notifications from your Dash app, instantiate the Notifications 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.Notifications(id="io-connect-notifications")
])

See the Dash Notifications example on GitHub.

⚠️ Note that to be able to raise notifications in an io.Connect Browser project and use notification actions, you have to properly setup your Main app. For more details, see the Notifications section of the io.Connect Browser documentation.

Raising Notifications

To raise a notification, define an app callback handler and for Output pass the ID and the raise property of the Notifications component. For Input use the component that you want to trigger raising the notification. The callback must return an object with notification options - title, body, actions, and more. The JavaScript equivalent of this object is the IOConnectNotificationOptions object.

The following example demonstrates raising a notification with a title, body and an action button. The action is handled by an already registered Interop method:

@app.callback(
    Output("io-connect-notifications", "raise"),
    Input("raise-notification", "n_clicks"),
    prevent_initial_call=True
)
def raise_notification(_):
    interop_settings = { "method": "HandleNotificationClick" }

    return {
        "title": "New Trade",
        "body": "VOD.L: 23 shares sold @ $212.03",
        "actions": [
            {
                "action": "openClientPortfolio",
                "title": "Open Portfolio"
                "interop": interop_settings
            }
        ]
    }

Raising Notifications

Notification Options

The IOConnectNotificationOptions object extends the standard web NotificationOptions object with several additional properties:

Property Description
actions An array of NotificationAction objects.
title The title of the notification.
clickInterop Accepts an InteropActionSettings object as a value. Use this property to invoke an Interop method when the user clicks on the notification. You can specify arguments for the method and an Interop target.
severity Defines the urgency of the notification which is represented visually by different colors in the notification UI. Can be "Low", "Medium", "High", "Critical" or "None".
source Overrides the source of the notification. Provide the name of the io.Connect app which you want to be displayed as a source of the notification.
type Accepts "Notification" or "Alert" as a value. This property is meant to be used only as a way to distinguish between notification types in case you want to create different visual representations for them - e.g., the "Notification" type may be considered a general notification, while the "Alert" type may be considered a more important or urgent notification.

Notification Click

To handle notification clicks, use the clickInterop property of the IOConnectNotificationOptions object and specify an Interop method that will be invoked when the user clicks on the notification:

@app.callback(
    Output("io-connect-notifications", "raise"),
    Input("raise-notification", "n_clicks"),
    prevent_initial_call=True
)
def raise_notification(_):

    interop_settings = {
        "method": "HandleNotificationClick",
        "arguments": {
            "name": "Vernon Mullen",
            "id": "1"
        }
    }

    notification_options = {
        "title": "New Trade",
        "body": "VOD.L: 23 shares sold @ $212.03",
        "clickInterop": interop_settings
    }

    return notification_options

Notification Actions

You can create action buttons for the notification. When the user clicks on an action button, the specified callbacks will be invoked.

Actions

⚠️ Note that the action buttons in an io.Connect Notification are limited to two, as the web browsers currently support a maximum of two actions.

To handle action button clicks, use the interop property of the action object and specify an Interop method that will be invoked when the user clicks the action button in the notification:

@app.callback(
    Output("io-connect-notifications", "raise"),
    Input("raise-notification", "n_clicks"),
    prevent_initial_call=True
)
def raise_notification(_):

    call_client_interop = {
        "method": "CallClient",
        "arguments": {
            "name": "Vernon Mullen"
        }
    }

    open_portfolio_interop = {
        "method": "OpenPortfolio",
        "arguments": {
            "name": "Vernon Mullen",
            "id": "1"
        }
    }

    notification_options = {
        "title": "New Trade",
        "body": "VOD.L: 23 shares sold @ $212.03",
        "actions": [
            {
                "action": "callClient",
                "title": "Call Client",
                "interop": call_client_interop
            },
            {
                "action": "openClientPortfolio",
                "title": "Open Portfolio"
                "interop": open_portfolio_interop
            }
        ]
    }

    return notification_options