How to manage objects outside the app layout?

Dear all,

My becomes bigger and bigger and I want to place a number of objects outside the app layout. In order to use them, I will use a callback to select one of them to show in the app. However, it seems like I can’t use this approach as dash doesn’t allow to call a non-existent object. Any ideas to solve it?

Here is an example of using a callback to return one of two options (line and scatter plot settings, pls see two photos below).


"""# Callback function to select plot types"""
    Output("display_plot_select", "children"),
    State("main_fig", "figure"),
    Input("trace_box_display", "selectedRows"),
    prevent_initial_call=False,  ## Must be False as the 'virtual' objects have to be identified first
def show_plot_options(figure, selectedRows):
    callback_monitor_intake("9_show_plot_options", ctx.triggered_id)

    if selectedRows is None:
        return options_scatter_plot.scatter_options
    selected_trace = selectedRows[0]["trace_name"]
    fig_data = figure["data"]
    plot_type = None
    for row in fig_data:
        if row['name'] == selected_trace:
            plot_type = row['mode']
    if plot_type == "markers":
        print("Chosen Scatter")
        return options_scatter_plot.scatter_options
    if plot_type == "lines+markers":
        print("Chosen Line + Symbol")
        return [options_line_plot.lines_options,
        return options_line_plot.lines_options

Hi @addsc6 !

I’m not sure what you mean by “objects outside the app layout”

If I understood correctly, you want to create the figure using parameters coming from all your controls, right?
To do that, you can use them (all of them) in one callback that will output the figure:

  • Either as Inputs, so that your figure is updated each time you’re changing the value on one control
  • Or as States, and use a button like “Display” as Input to trigger the callback.

I meant the objects such as several html.Div containing control parameters using Buttons, Select, etc are called only by a dropdown object. This means that when you can select one item at the beginning and the other html.Div are infact not associated with the layout and can’t be called.
Surely, if you put all of them in a single callback, it will work. But I have a large set of objects to producing a lot of parameters, so it’s not wise to do so.

The above example is abit different that when you select a trace in the figure, you can have its own control parameters and even recall previous parameters that have been set.

Hello @addsc6,

If you want access to all these other variables, without bringing them into the dash eco system.

You could alter this callback to a clientside one, and then you’d be able to pull all of this data.

Or… you could do something similar to what I did here:

Basically, you call the children of your target and get all the info from them. This required loading them into the eco system though in order for the props to work as expected.

1 Like

Many thanks for sharing your scripts!
I will screen through it and hope I can get some ideas.


1 Like

I see! You can also try callbacks with pattern matching:

I didn’t use this callback. The problem I was facing is actually known for quite long:
Perhaps, I could solve it in the next version.
For the current one, I simply places all objects/components in one page (or layout) then just use visibility property to hide/show them.