Retrieve value from Input field in Dash Framework

Question

I am new in Dash Framework. Please help me out. I have input field in place but I don't know how to retrieve it's value as entered by user. When the value is retrieved then I have to search that value in my SQL table then if present then show all rows having that value in tabular format. I also don't know how to use SQL for such things.

Please help.

Here is my code snippet:

import dash
import dash_core_components as dcc
import dash_html_components as html
import pandas as pd
import mysql.connector

db_connection = mysql.connector.connect(
  host="localhost",
  user="root",
  passwd="",
  db="trial"
)

cursor = db_connection.cursor()

df = pd.read_sql("select * from merge where ProductName=%s", db_connection,'Wine')

def generate_table(dataframe):
   return html.Table(className='hellob',
      # Header
      children=[html.Tr([html.Th(col) for col in dataframe.columns])] +
      # Body
      [html.Tr([
         html.Td(dataframe.iloc[i][col]) for col in dataframe.columns
      ]) for i in range(len(dataframe))]
   )
    
app = dash.Dash()
app.layout = html.Div(children=[
   html.H4(children='Sales Of February 2020 by MHD'),

   html.Label('Product Name: '),
   dcc.Input(
       id='tfield',
       placeholder='Input the product name',
       type='text'
       ),
   generate_table(df)
])

if __name__ == '__main__':
   app.run_server(debug=False)

Now the code is running but giving whole table from my database I need only those rows whose ProductName matches the users input.

   app.layout = html.Div(children=[
   html.H4(children='Sales Of February 2020 by MHD'),

   html.Label('Product Name: '),
   dcc.Input(
       id='tfield',
       placeholder='Input the product name',
       type='text'
       ),
   generate_table(df)
])

@app.callback(Input('tfield', 'value'))
def callback(input_value):
    return input_value

This is also not working for the input text value I also want to store and use the inputted value.

Help me out in this problem.

Answer 1

I have solved my problem on my own Here is the solution:

app = dash.Dash()
app.layout = html.Div(children=[
   html.H4(children='Sales Of February 2020 by MHD'),
   html.Label('Product Name: '),
   dcc.Input(
       id='tfield',
       placeholder='Input the product name',
       type='text'
       ),
   html.Br(),html.Br(),
   html.Div(id='my-output'),
])

@app.callback(Output('my-output','children'),[Input('tfield', 'value')])
def callback(input_value):
   df = pd.read_sql("select * from merge where ProductName=%s", db_connection,params= 
        (input_value,))
    return generate_table(df)

Answer 2

the syntax to send parameters is in your case

df = pd.read_sql("select * from merge where ProductName=%s", db_connection, params=("Wine",))

you have to filter the Datafrane to select olny with user input

df.filter(like='Chardonnay', axis=0)

And instead of 'Chardonnay' you enter your dash input.

every element must have its unique id, so you should add it also to your dcc.Input