Reset to Initial state without reloading page

Dash Python
1

I was wondering how to go about having a ‘Reset’ button which when clicked will reset the app state to the initial state without having to reload the webpage.

Any ideas?.

2

Have you noticed these two buttons here for doing Undo and Redo?
Is that something similar to what you are after?
Otherwise I can imagine you can manipulate the value of your input widgets with a button that sets them to a default.

3

I have a similar use case. I have about four groups of radio buttons, and ensure each group’s default is “Any” or “All”. In the callback, I just make sure to check for this:

if rad and rad != 'Any':
   #manipulate data here
1 Like
4

Similar to Undo/Redo buttons but all the way to initial state instead of just one state back or forward.

I have no idea how to reset the values of my input widgets to default. If you have done this, can you share an example.

5

I hope this explains what I meant before

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

app = dash.Dash()

app.css.append_css({
    "external_url": "https://codepen.io/chriddyp/pen/bWLwgP.css"
})


app.layout = html.Div(children=[
    html.Div(children=[
    html.H4(children='Example Dash'),
    
    
    html.Div(id='div_row1',children=[
    
        # Div Retention
        html.Div(id='div', children=[
            html.P("Retention"),
            html.Button('Default Values', id='default_values'),
            dcc.Dropdown(
            id="sel_01",
            options=[
                {'label': 'True', 'value': True},
                {'label': 'False', 'value': False}

            ],
            value=False,
            multi=False
            ),
            dcc.Dropdown(
            id="sel_02",
            options=[
                {'label': 'True', 'value': True},
                {'label': 'False', 'value': False}

            ],
            value=False,
            multi=False
            ),
            html.P(id="p1",children=["placeholder"])
        ], className='six columns')

    ]),
    dcc.Interval(
        id='interval-component',
        interval=5*60*1000 # in milliseconds
    )
    ]),
    ])


@app.callback(
    Output(component_id='sel_01', component_property='value'),
    events=[Event('default_values', 'click')])
def update():
    return False

@app.callback(
    Output(component_id='sel_02', component_property='value'),
    events=[Event('default_values', 'click')])
def update():
    return False


@app.callback(
    Output(component_id='p1', component_property='children'),
    [Input(component_id='sel_01', component_property='value'),
    Input(component_id='sel_02', component_property='value')])
def update(val_1, val_2):
    return "text: "+str(val_1)+str(val_2)

if __name__ == '__main__':
    app.run_server(debug=True, host='0.0.0.0', port=5091)
2 Likes
6

Excellent. That’s exactly what I’m looking for. Thanks a lot.

7

Great example @Sherm4nLC, thank you!

I like these kind of solutions that use the dash interface itself.

I could imagine that we include a (customizable) “Dash Toolbar” by default that includes these types of features: Undo, Redo, Reset. If anyone would like to see Reset as a native, default-on feature, please speak up!

11 Likes
8

Absolutely, would love to have this feature. I can envision many situations where ‘Reset’ button could be useful to reset individual components of the app or all the components of the app.

4 Likes
9

Absolutely, I’m fetching input data from Bars to manipulate a scatter plot but after doing that I want it to reset itself and get back to initial theme of manipulating scatter graph from input of the dropdown menu when changed value.

11

Just as @raghunath mentioned, I am in a situation where I have to reset all the app components without having to refresh the page.

12

dash.dependencies no longer supports ‘Event,’ but it’s possible to solve this using html.Button (or dbc.Button if you use dash_bootstrap_comopnents) by using a button’s ‘n_clicks’ in lieu of an Event click, then sticking with the same workflow otherwise (in @Sherm4nLC’s example above, returning False as the output of the Button click’s callback and feeding that output to component_id=‘sel_01’ and ‘sel_02’).