Button must be clicked to display the new report

Dash Python
1

Hi,

How to restrict the user must click the “search” button to display the new data in the report?


For example,
there has year-dropdown, month-dropdown and date-dropdown. All the value is immediately show the latest value according to the list.

The report to be shown based on the selected value, the user will need to click the search button.

However, when the user change the dropdown value, the report will immediately reflect based on the new selected value.

Expect the search button must be clicked every time when new value selected.



code.py

@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



# #date dropdown based on filtered month
@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('-search-button', 'n_clicks'),
    State('date_dd', 'value'),
    State('year_dd', 'value'),
    State('month_dd', 'value'),

    
    )


def stored_selected_value (n_clicks, date, year, month):
    ctx = callback_context
    
    if not ctx.triggered_id or 'search-button' not in ctx.triggered_id:
        raise dash.exceptions.PreventUpdate
        
    return {'date': date, 'year': year, 'month': month}



‘content.py’

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



def update_analysis_table(n_clicks):
        
    if n_clicks > 0:

        return combine
    
    else:
        return []
2

Hello @beginof,

It looks like you have this portion setup correctly.

I’m not sure why the report is showing up without pushing the button. Is something setup to trigger it?

Does the button disappear and then get readded? If so, you should try using prevent_initial_call=True on that callback.

3

Hi @jinnyzor ,

Yes, I had use prevent_initial_call=True on my content’s callback.
But don’t know why the function is not working as expected :rofl: :rofl:


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

It’s hard to diagnose without more code.

5

Here you go:

dropdown.py

import dash
from dash import dcc, html, callback,callback_context
from dash.dependencies import Output,Input, State
import dash_bootstrap_components as dbc
import pandas as pd
from utils.conn import cursor



def get_date_mtd():
    cursor.execute('EXEC dbo.MYCP_GET_fullmtd')
    results = cursor.fetchall()
    df= pd.DataFrame.from_records(results)
    
    
    df= pd.DataFrame.from_records(results, columns = [column[0] for column in cursor.description])
      
    
    return df


df = get_date_mtd()

year_cat = list(df['year'].unique()) 



dropdown = dbc.Container([
    dbc.Row([
        dbc.Col([
            html.H6('Year:',
                    className = 'dropdown-h'),
            
            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 ...', 
                        className = 'dropdown-list',
                        
                        ),
            html.Br(),
            
            ], className = 'dropdown-col'),
        
        
        dbc.Col([
            html.H6('Month:',
                    className = 'dropdown-h'),
            
            dcc.Dropdown(id='month_dd',
                         value= '',                         
                         searchable = True, 
                         search_value='',
                         placeholder= 'Please select ...',
                         className = 'dropdown-list',
                         ),
            
            html.Br(),
            
            ], className = 'dropdown-col'),
        
        
        dbc.Col([
            html.H6('Date:',
                    className = 'dropdown-h'),
            
            dcc.Dropdown(id='date_dd', 
                         value='',
                         searchable = True, 
                         search_value='',
                         placeholder= 'Please select ...',
                         className = 'dropdown-list',
                         ),
            
            html.Br(),
            
            ], className = 'dropdown-col'),
        
        ]),
    
    
    ], className = 'dropdown-con')




# DROPDOWN
# #month dropdown based on filtered year
@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



# #date dropdown based on filtered month
@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('search-button', 'n_clicks'),
    State('date_dd', 'value'),
    State('year_dd', 'value'),
    State('month_dd', 'value'),
    
    
    )


def stored_selected_value (n_clicks, date, year, month):
    ctx = callback_context
    
    if not ctx.triggered_id or 'search-button' not in ctx.triggered_id:
        raise dash.exceptions.PreventUpdate
        
    return {'date': date, 'year': year, 'month': month}

content.py

import dash
from dash import dcc, html, callback_context
import dash_bootstrap_components as dbc
from flask_login import current_user
from dash import callback, Input, Output

from utils.login_handler import require_login

from .pages.mycp.drr_dropdown import drr_dropdown
from .pages.drr_store import drr_store
from .pages.mycp.visualization_line import line
from .pages.mycp.visualization_sunburst import sunburst
from .pages.mycp.visualization_horizontalbar import horizontal
from .pages.mycp.visualization_bar import bar
from .pages.mycp.visualization_barproduct import bar_product
from .pages.mycp.visualization_table import table




dash.register_page(__name__,
                   path='/analysis/',  
                   name=' Analysis', 

)


require_login(__name__, 
              access_level= [role_id]
              )


combine = [
    
    dbc.Row(line, className= 'chart-row'),
    
    dbc.Row(sunburst, className= 'chart-row'),
    
    dbc.Row(horizontal, className= 'chart-row'),
    
    dbc.Row(bar, className= 'chart-row'),
    
    dbc.Row(bar_product, className= 'chart-row'),

    dbc.Row(table, className= 'chart-row'),

    
    ]


def layout():
    if not current_user.is_authenticated:
        return html.Div(["Please ", dcc.Link("login", href="/login"), " to continue"])

    return dbc.Container([
        dbc.Row([
            dbc.Col(
                html.H2("Malaysia - Analysis"),
                width=12, 
                ),
            ]),
        
        drr_store,
        
        dbc.Row(drr_dropdown, className= 'chart-row'),
        

        
        dbc.Row([
            html.Button('Search', id='search-button', n_clicks=0, className = 'btn'), 
            ],className = 'btn-row'),
                          
            
            
        html.Hr(className = 'common-hr'),
            

        html.Div(id = 'content_drr'),

        
        html.Br(),
        html.Br(),
        
        
        ])




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



def update_analysis_table(n_clicks):
    # ctx = callback_context
    
    # if not ctx.triggered_id or 'mchtanly-search-button' not in ctx.triggered_id:
    #     raise dash.exceptions.PreventUpdate
        
    if n_clicks > 0:

        return combine
    
    else:
        return []