Report displayed when click the search button

Dash Python
1

There has multiple report layout in the dropdown list.
User will choose which report they want to review and then click the button, the report only show.
If user want to change another report to review, they will re-select the report name from the dropdown list.
However, the report will directly display without clicking the button.

So, how can force the user MUST click the button if change value in dropdown list to display the new reort?



code

@callback(
    Output('table_content_analysis', 'children'),
    Input('search-button', 'n_clicks'),
    Input('report_name_dd', 'value'),

    
    prevent_initial_call=True
)



def update_analysis_table( n_clicks, value):
    if n_clicks is None:
        return dash.no_update
    
   
    if n_clicks > 0:
    
        if value == 'report1':
            return layout_1()
        
        elif value == 'report2':
            return layout_2()
        
        elif value == 'report3':
            return layout_3()
        
        elif value == 'report4':
            return layout_4()
        
        elif value == 'report5':
            return layout_5()
        
    
        else:
            return None

        
    return None
2

Change this to State()

3

Awesome! Thanks @AIMPED :grinning:

1 Like
4

How about something like this which is a bit different with the previous:

@callback(
    Output('content', 'children'),
    Input('search-button', 'n_clicks'),    
    prevent_initial_call=True
)



def update_analysis_table(n_clicks):
    if n_clicks is None:
        return dash.no_update
    
    if n_clicks > 0:

        return combine
    
    else:
        return None

It will has few dropdown list (year, month, day) and it will store in a dcc.store. All the dropdown value will auto select the latest data.

If user change the value, how can the change reflected when user click the button?


`dropdown` 
drr_dropdown = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H6('Year:'),
            
            dcc.Dropdown(id='year_dd',
                         value= df['year'].max(),
                        options = [{'label':x, 'value':x} for x in year_cat],
                        searchable = True, 
                        search_value='',
                        placeholder= 'Please select ...', 

                        ),
            html.Br(),
            
            ]),
        
        
        dbc.Col([
            html.H6('Month:'),
            
            dcc.Dropdown(id='month_dd',
                         value= '',                         
                         searchable = True, 
                         search_value='',
                         placeholder= 'Please select ...',
                         ),
            
            html.Br(),
            
            ]),
        
        
        dbc.Col([
            html.H6('Date:''),
            
            dcc.Dropdown(id='date_dd', 
                         value='',
                         searchable = True, 
                         search_value='',
                         placeholder= 'Please select ...',
                         ),
            
            html.Br(),
            
            ]),
        
        ]),
    
    
    ])





@callback(
    Output('month_dd','options'),
    Input('year_dd', 'value')
    )


def update_dd (year_dd):
       
    year_month= df.drop_duplicates(['mthyr'], inplace= False)
    
    relevant_month= year_month[ df['year'] == year_dd]['monthname'].values.tolist()

    month_option= [dict(label=x,value=x)for x in relevant_month]
    
    
    return month_option



@callback(
    Output('month_dd','value'),
    Input('month_dd', 'options')
    )


def default_value(latest_month):
    month_value = latest_month[-1]['value']
    
    return month_value




@callback(
    Output('date_dd','options'),
    Input('month_dd', 'value'),
    State('year_dd', 'value')
    )


def update_dd (month_dd, year_dd):
       
    month_date= df.drop_duplicates(['Date'], inplace= False)
       
    relevant_date= month_date[ (df['monthname'] == month_dd) & (df['year'] == year_dd) ]['Date'].values.tolist()
    date_option= [dict(label=x,value=x)for x in relevant_date]
    
    
    return date_option



@callback(
    Output('date_dd','value'),
    Input('date_dd', 'options')
    )


def default_value(latest_date):
    date_value = latest_date[-1]['value']
    
    return date_value




@callback(
    Output('storedate','data'),
    Input('year_dd', 'value'),
    State('month_dd', 'value'),
    State('ddate_dd', 'value'),

    )


def stored_selected_value ( year, month,date):
    return {'year': year, 'month': month, 'date': date}
5

I didn’t understand the second case, sorry

6

:rofl: :rofl: Is Ok.

The page is look like:

image
image1068Ă—483 6.2 KB


As per the screenshot, the value of the “Year”, “Month” and “Date” is automatically show the latest value in the list (refer to the code attached previously).

It will has a search button. And below the search button, it is a div to store all the content (bar chart, line chart, pie chart, etc).
When user clicked the button, then all the content will show at the bottom part based on the value selected in the dropdown list.

However, facing an issue where the content will automatically reflect the new selected value without click the button (means when user change the dropdown value, such as from 2023-11-01 to 2023-10-01, the content will directly reflect the new selected value without the button clicked).

Therefore, how to let the content reflect when the button is clicked?

7

I think in this case you should do something as below:

@callback(
    Output('storedate','data'),
    Input('search-button', 'n_clicks')
    State('year_dd', 'value'),
    State('month_dd', 'value'),
    State('ddate_dd', 'value'),    
    prevent_initial_call=True )

And then:

@callback(
    Output('content', 'children'),
    Input('search-button', 'n_clicks'),     
    State('storedate','data')
    prevent_initial_call=True)