Here is a fairly minimal example that is not working as intended. I am trying to show a new box in a previously empty area on the click of a button. The button is generated via a function call.
(I think components.text_field illustrates why it is necessary to wrap frequently used parts of the layout into a function: Typing this out for every field of a form would quickly amount to unreadable code)
When clicked, the button just doesn’t do anything, and there is no error message.
Content of main.py:
import flask
import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output, State
import components
# linked resources
## stylesheets
stylesheets = [
"https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css", # Bulma
]
# app
## flask server
server = flask.Flask(__name__)
## create app
app = dash.Dash(
__name__,
server=server,
external_stylesheets=stylesheets
)
# layout
## navigation
navbar = html.Nav(
className="navbar",
children=[
html.Div(
className="navbar-brand",
children=[
html.Div(
className="navbar-item",
children=[
]
)
]
),
html.Div(
className="navbar-menu is-active",
children=[
html.Div(
className="navbar-start",
children=[]
)
]
),
html.Div(
className="navbar-end",
children=[
dcc.Link("Support", className="navbar-item"),
]
)
]
)
## boxes
sim_param_box = html.Div(
id="sim-param-area",
className="box",
children=[
components.text_field(
field_id="start-time-field",
label="Start",
placeholder="YYYY/MM/DD hh:mm"
),
components.text_field(
field_id="stop-field",
label="Stop",
placeholder="YYYY/MM/DD hh:mm"
),
components.text_field(
field_id="tick-field",
label="1 Tick =",
placeholder="[s]"
),
components.enter_button(
button_id="sim-param-enter-button",
text=None,
tooltip="Simulation initialisieren"
)
]
)
sim_param_area = html.Div(
children=sim_param_box,
className="section",
)
sim_results_box = html.Div(
id="sim-results-box",
className="box",
children=[
"Test"
]
)
sim_results_area = html.Div(
id="sim-results-area",
className="section",
children=[],
)
## main layout
main_area = html.Div(
className="content",
id="main-area",
children=[
sim_param_area,
sim_results_area
]
)
app.layout = html.Div(
className="container",
children=[
navbar,
main_area
]
)
# callbacks
@app.callback(
Output("sim-results-area", "children"),
[
Input("sim-param-enter-button", "n_clicks")
]
)
def enter_sim_params(n_clicks):
if n_clicks:
return sim_results_box
if __name__ == '__main__':
app.run_server(debug=True)
Content of components.py:
import dash
import dash_core_components as dcc
import dash_html_components as html
def text_field(field_id, label=None, placeholder=None):
field = html.Div(
children=[
html.Label(label, className="label"),
html.Div(
dcc.Input(
className="input",
type="text",
placeholder=placeholder,
),
id=field_id,
className="control"
)
],
className="field",
)
return field
def enter_button(button_id, text=None, tooltip=""):
button_label = html.I("⏎")
if text:
button_label = text
return html.Button(
id=button_id,
title=tooltip,
className="button is-large is-primary is-outlined",
style={"width": "250px"},
children=[
button_label
]
)
