hi, I have an html.Div layout as an array created in a different file and am wondering how i would import this to be used inside an ‘index.py’ file for example??
content_layout:
content_layout = [ html.Div([ dcc.Graph … etc ]) ]
how do i use content_layout in the index file?
thank you
Assuming they are both in the same directory
#content_layout.py
content_layout = [ html.Div([ dcc.Graph … etc ]) ]
# index.py
from content_layout import content_layout
app.layout = content_layout
Let me know if that helps.
thanks this helps but I dont want to completely replace what’s inside app.layout in my ‘index.py’ file.
here is what i’d like to do:
app.layout = html.Div([
html.Div([]) ,
############ content_layout imported stuff goes here,
html.Link(styles...),
])
if __name__ == '__main__':
app.run_server()
`
i’d still like to have an html.Div sort of like container inside index.py file and then inject content from another file into it
thank u
That is totally doable, and probably good practice, IMHO, as it seperate components for reusability. Only thing to keep in mind is that you can only add a dash component (i.e dash_html_component or dash_core_component) or a function that returns a dash component.
Modifying my first example, here is perhaps a more realistic use case. Try running it and see if it make sense.
# content_layout.py
import dash_html_components as html
import dash_core_components as dcc
# create an encapsulated layout component
control_panel = html.Div([
html.H1('Control panel'),
dcc.Dropdown(
id='my-dropdown',
options=[{'label': i, 'value': i} for i in range(1, 10)],
value=1
)
])
# index.py
import dash
import dash_html_components as html
import dash_core_components as dcc
from content_layout import control_panel
app = dash.Dash(__name__)
app.layout = html.Div(children=[
html.Div([
html.H1('I am built using Dash!')
]),
control_panel, # this is the component we imported.
html.P('I am a component of the layout as well'),
dcc.Input(id='my=input', placeholder='Enter a value')
])
if __name__ == '__main__':
app.run_server(debug=True)
your example worked great, i think this is exactly what I need. Will go home and try it out on my own project. The last thing im wondering is if callbacks that we create in ‘content_layout.py’ will work when we interact with the control_panel while it is inside the index.py file… everything should work fine yeah??
and yes my goal was to separate concerns and make the project more organize so thank you for helping me accomplish that
thanks again
No problem, glad to help!
The last thing im wondering is if callbacks that we create in ‘content_layout.py’ will work when we interact with the control_panel while it is inside the index.py file… everything should work fine yeah??
Yes it will be fine. As you can see in the inspector, the element has the id that we gave it so. Also remember that in python, when we import a module the whole thing gets read so everything in that module that was imported becomes available to the main file.
As a proof of concept, using the callback below will work just fine.
@app.callback(Output('my-input', 'value'),
[Input('my-dropdown', 'value')])
def test_callback_with_imported_component(value):
return value
Note
If you are going to be reusing the component that you imported, then you will run into issues since you must have unique id for all components. If this becomes an issue, then one way around this is to create a function that takes an id as a keyword arg and returns a component. For example:
def control_panel(id):
return html.Div([
html.H1('Control panel'),
dcc.Dropdown(
id=id,
options=[{'label': i, 'value': i} for i in range(1, 10)],
value=1
)
])
Hi,
What if I want to reuse a component in multiple apps and I want a different ‘id’ in each app?
html.H3('Project1')
html.H3('Project2')
Is there a way that Dash natively supports that reuse?
Regards,
Karthik