CODEWITHSUNDEEP
pythonplotly-dash
Kali Hinder
Kali Hinder

Reputation: 41

Python Plotly Dash - How do I access updated component value without using callback?

When you enter something other than "test" in the input box, and press enter, the label should change to reflect that input.

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output


markerNameInp = dbc.Input(id='markerNameInp',placeholder='Enter name..',
                     style={'min-width':'150px','width':'15%',
                            'margin-right':'20px','display':'inline-block',
                            'margin-bottom':'10px'}, value = 'test')
app = dash.Dash()

app.layout = html.Div(style={'font':'Frutiger Linotype, sans-serif',
                             'margin-left':'50px','margin-right':'50px'},
    children=[
        html.Div([markerNameInp]),
        dbc.Button('Enter',id='enter',
                            color = 'primary',
                            className='mr-1',
                            style={'height':'40px'}),
        html.Div(id="output")
        ])

@app.callback(
    Output(component_id='output', component_property='children'),
    [Input(component_id='enter', component_property='n_clicks')]
)

def func(enter_clicks):
    return dbc.Label(markerNameInp.value)

if __name__ == "__main__":
    app.run_server(debug=True)

Thanks in advance.

Upvotes: 4

Views: 4625

Answers (1)

xhluca
xhluca

Reputation: 1046

It is not possible to access an updated component value by accessing the Python object defined in the layout (markerNameInp.value). This is because each user accessing the Dash app will interact with it differently, and the state is stored on the client-side (the user's browser) rather than server-side (where the app is running, and where the Python object markerNameInp is located).

In your use case, it is possible to access the value property of markerNameInp by using dash.dependencies.State, which does not trigger the callback when the component is updated, but the value can still be captured.

Here's the updated code:

import dash
import dash_html_components as html
import dash_core_components as dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State


markerNameInp = dbc.Input(
    id="markerNameInp",
    placeholder="Enter name..",
    style={
        "min-width": "150px",
        "width": "15%",
        "margin-right": "20px",
        "display": "inline-block",
        "margin-bottom": "10px",
    },
    value="test",
)

app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])

app.layout = dbc.Container(
    children=[
        html.Div([markerNameInp]),
        dbc.Button("Enter", id="enter", color="primary", className="mr-1"),
        html.Div(id="output"),
    ],
)


@app.callback(
    Output("output", "children"),
    [Input("enter", "n_clicks")],
    [State("markerNameInp", "value")]
)
def func(n_clicks, marker_value):
    return dbc.Label(marker_value)


if __name__ == "__main__":
    app.run_server(debug=True)

(the bootstrap code was changed in order to reflect best practice, and some styling was removed for simplicity).

Upvotes: 4

Related Questions