Updates on page load in multi page app

Dash Python
1

this is my run file:

import dash
import dash_html_components as html
import dash_core_components as dcc

from apps import app1, app2


app = dash.Dash()


def update_layout():
	return html.Div([
		dcc.Location(id='url', refresh=False),
		html.Div(id='page-content')
	])


app.layout = update_layout


@app.callback(dash.dependencies.Output('page-content', 'children'),
			  [dash.dependencies.Input('url', 'pathname')])
def display_page(pathname):
	if pathname == '/apps/app1':
		return app1.layout
	elif pathname == '/apps/app2':
		return app2.layout


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

and also i have for example
app1
import dash
import dash_html_components as html
import datetime

def update_layout():
return html.Div('app1 {}'.format(datetime.datetime.now().strftime('%y-%m-%d %H:%M:%S')))


layout = update_layout

and app2
import dash
import dash_html_components as html
import datetime

def update_layout():
	return html.Div('app2 {}'.format(datetime.datetime.now().strftime('%y-%m-%d %H:%M:%S')))


layout = update_layout

Is it possible to somehow to assign a function app1.layout and app2.layout to initiate updates on page load?
With provided approach now i’m getting

File “/usr/lib/python3.5/json/encoder.py”, line 179, in default
raise TypeError(repr(o) + " is not JSON serializable")
TypeError: <function update_layout at 0x7fa46553aa60> is not JSON serializable

2

@zxyzxy - It looks like app1.layout is a function. In this case, you can just call it inside your callback like:

    if pathname == '/apps/app1':
		return app1.layout()
	elif pathname == '/apps/app2':
		return app2.layout()
2 Likes
3

but it seems app1 and app2 lose its own CSS style after being called

4

@BingWong, then perhaps you might want to try using the approach of running your two apps separately alongside each other, rather than switching between different layouts within the one app. You can, fir example, run two different Flask/Dash instances alongside each other underneath a parent Flask instances. If you search the this forum for multi page apps there’s been a few posts where possible ways of doing this has been suggested.

5

Thanks for your reply. I actually did something like that. It works well locally. But it won’t work after Being deployed to heroku. It said no “app” module to import.
Here is the way I do:

image
image.png750×1334 33.3 KB

6

That’s not quite what I meant. Here’s the post I was referring to (it was only a few back in the forum history).

As I say in the post, I haven’t actually tried it myself, however later on in the thread someone else say they get it working with a couple of tweaks that they detail.

8

can you share this code snippet in detail ?