I have create a multipage app and I want to do mathematical calculation on 2nd page so how should I do that

Dash Python
1

@app.callback(
Output(‘result’, ‘Final value’),
[Input(‘my-input’,‘value’),
Input(‘my-input1’, ‘value’),
Input (‘my-input2’,‘value’)]

)

def update_result(input,input1,input2):
sum=input+input1+input2;
return sum;

num1=int(input(“input”))
num2=int(input(“input1”))
num3=int(input(“input2”))

print(“the sum is”,update_result(num1,num2,num3))

2

hi @shrad
:wave: welcome to the community.

Can you please share a little more about the error you’re getting or where you’re getting stuck.

One way to work with multipage app, is to use dcc.Store to store your main data on the main page. And then use the Callback Input on the second page to retrieve the data and do your mathmatical calculation. But I’m just spitballing here. More information might help us come up with a better solution.

3

In multipage app not understanding how to autopopulated the numbers to next page .I create two pages
in first page I am giving the input that is input1,input2 and input3 and now I want to do addition of this inputs and display on next page

4

Can you please share a sample of your code?

5

from dash import Dash, dcc, html, Input, Output, callback,State,callback_context

app = Dash(name, suppress_callback_exceptions=True)

app.layout = html.Div([
dcc.Location(id=‘url’, refresh=False),
html.Div(id=‘page-content’),

])

index_page = html.Div([
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=’/page-2’),

])

page_1_layout = html.Div([
html.H1(‘Page 1’),
html.Label(“First”),
dcc.Input(id=‘my-input’, value=‘0’, type=‘number’),
html.Label(“Second”),
dcc.Input(id=‘my-input1’,value=‘0’,type=‘number’),
html.Label(“Third”),
dcc.Input(id=‘my-input2’,value=‘0’,type=‘number’),
html.Button(‘Next’, id=‘btn-nclicks-1’, n_clicks=0),
html.Div(id=‘container-button-basic’),
html.Div(id=‘page-1-content’),
html.Br(),
dcc.Link(‘Go to Page 2’, href=’/page-2’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’),
html.Br(),
html.Div(id=‘my-output’),
dcc.Store(id=‘data-store’, data=0, storage_type=‘memory’),

])

@callback(Output(‘page-1-content’, ‘children’),
[Input(‘page-1-Input’, ‘value’)])
def page_1_Input(value):
return f’You have selected {value}’

page_2_layout = html.Div([
html.H1(‘Page 2’),
html.Label(‘Sum’),
dcc.Input(id=‘Input1’, value=‘0’, type=‘number’),
html.Label(‘Final Value’),
dcc.Input(id=‘Input2’, value=‘0’, type=‘number’),
html.Button(‘Calculate’, id=‘btn-nclicks-1’, n_clicks=0,disabled=True),
html.Div(id=‘container-button-basic’),
html.Div(id=‘page-2-content’),
html.Br(),
dcc.Link(‘Go to Page 1’, href=’/page-1’),
html.Br(),
dcc.Link(‘Go back to home’, href=’/’),

])

@callback(Output(‘page-2-content’, ‘children’),
Output(‘Calculate’,‘disabled’),
[Input(‘page-2-Input’, ‘value’)])
def page_2_Input(value):
return f’You have selected {value}’

@callback(Output(‘page-content’, ‘children’),
[Input(‘url’, ‘pathname’)])
def display_page(pathname):
if pathname == ‘/page-1’:
return page_1_layout
elif pathname == ‘/page-2’:
return page_2_layout
else:
return index_page
# You could also return a 404 “URL not found” page here

@app.callback(
[
Output(‘my-output’, ‘children’),
Output(‘data-store’, ‘data’),

],
[
    Input('my-input', 'value'),
    Input('my-input1','value'),
    Input('my-input2','value'),

],
[
    State('data-store', 'value'),






]

)
def update_output_div(input_value1,input_value2,input_value3,data_store):
print(‘input_value1’, input_value1)
print(‘input_value2’,input_value2)
print(‘input_value3’,input_value3)

# return f'Output: {input_value}', input_value
   return input_value1,input_value2,input_value3

@app.callback(
Output(‘container-button-basic’, ‘children’),
Input(‘btn-nclicks-1’, ‘n_clicks’),

)
def displayClick(btn1):
changed_id = [p[‘prop_id’] for p in callback_context.triggered][0]
if ‘btn-nclicks-1’ in changed_id:
msg = ‘Button 1 was most recently clicked’

else:
    msg = 'None of the buttons have been clicked yet'
return html.Div(msg)

@app.callback(
Output(‘Final value’, ‘children’),
[Input(‘my-input’,‘value’),
Input(‘my-input1’,‘value’),
Input (‘my-input2’,‘value’)]

)

def add_number(input,input1,input2):
sum=input+input1+input2;
return sum;

if name == ‘main’:
app.run_server(debug=True)

6

If you are trying to share data across pages of your application, I suggest you create a dcc.Store() component at the top of your app.

app.layout = html.Div(
    [
        dcc.Location(id='url', refresh=False),
        html.Div(id='page-content'),
        dcc.Store(id='app-storage')
    ]
)

Check out the documentation for more help:
Dash Core Component - Store

7

I made changes in the code but not able to get the output.