✊🏿 Black Lives Matter. Please consider donating to Black Girls Code today.
⚡️ Concerned about the grid? Kyle Baranko teaches how to predicting peak loads using XGBoost. Register for the August webinar!

Multioutput for ClientSide callbacks

Hi Everyone,

One question: is it possible to create a clientside callback with multiple outputs?
In Dash I have something like this:

app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="createTable"),
    [Output('table', 'columns'), Output('table', 'data')],
    [Input('button', 'n_clicks')],
)

But what should then my JS function return? Array?

Yes you would return an array with the outputs the same way you would return a list of outputs in Python.

Thanks @RenaudLN,

It looks fine with array. The only problem, that I’ve got an error (JS):

Cannot read property 'length' of undefined

dash_renderer.v1_4_1m1588706252.dev.js:38461 TypeError: Cannot read property 'length' of undefined
    at zip (dash_renderer.v1_4_1m1588706252.dev.js:26802)
    at f2 (dash_renderer.v1_4_1m1588706252.dev.js:16063)
    at zipIfArray (dash_renderer.v1_4_1m1588706252.dev.js:35047)
    at handleClientside (dash_renderer.v1_4_1m1588706252.dev.js:35098)
    at dash_renderer.v1_4_1m1588706252.dev.js:34918
    at Array.map (<anonymous>)
    at _callee3$ (dash_renderer.v1_4_1m1588706252.dev.js:34745)
    at tryCatch (polyfill@7.v1_4_1m1588706252.8.7.min.js:1)
    at Generator.invoke [as _invoke] (polyfill@7.v1_4_1m1588706252.8.7.min.js:1)
    at Generator.t.<computed> [as next] (polyfill@7.v1_4_1m1588706252.8.7.min.js:1)

My code:
run.py

app = dash.Dash(external_stylesheets=[dbc.themes.DARKLY])

app.layout = app.layout = html.Div([
        html.H1("Test:"),
        dbc.Button(id='click', children='Click here'),
        html.Hr(),
        html.H3("Result:"),
        html.Div(id="output"),
        html.Div(id="output1"),
])

app.clientside_callback(
    ClientsideFunction(namespace="clientside", function_name="click"),
    [Output('output', 'children'), Output('output1', 'children')],
    [Input('click', 'n_clicks')],
)

if __name__ == "__main__":
    app.run_server(debug=True, port=8052, dev_tools_ui=True)

assets/script.js

window.dash_clientside = Object.assign({}, window.dash_clientside, {
    clientside: {

        click: function(n_clicks) {
            if (n_clicks != null) {
                var empty = "test1";
                var empty1 = "test2";
                return [empty, empty1]
            }
        }

    }
});

Try

if (n_clicks !== undefined) {
  return ["test1", "test2"];
} else {
  throw window.dash_clientside.PreventUpdate;
}
2 Likes

Great! Thanks @RenaudLN