What's the distinction between layout and app.layout?

Dash Python
1

I am working on transforming my app into a multi-page add based on the recent video and information retrieved from the corresponding git repositories. When I attempt to integrate my code into the templates, however, I receive this error message:

 dash.page_registry[f"pages.{page_filename}"]["layout"] = getattr(
AttributeError: module 'pages.heatmaps' has no attribute 'layout'

If I change “app.layout” to just “layout” (delete “app”), the page registry will accept the page and the error message goes away. However, my code will not function unless I use app.layout to frame the Html components.

I am confused as to what this means, and I don’t see the issue addressed in the docs and videos. Is this just a bug or can I use both layout and app.layout on the same page? I did try, it did not work. But perhaps I am not using the right format.

Any clue, anyone? Any other secrets or shortcuts to turning your app into a multi-page app using the recently released plugin? At this point, I have watched the video several times and reviewed all the repositories.

But there are reasons why my memory could be failing me.

Thanks for reviewing my question.

2

Hi @robertpfaff,

Take my answer with a grain of salt, as I used the pages plugin just once for testing… But I believe your confusion relates to the difference between the actual app layout from the “main” module (app.py) and the layout object defined at each submodule in /pages.

If I understand how the plugin works correctly, it will inspect each submodule under /pages and create an object with the definitions from it. One attribute of this object is the page layout, which is read from the variable layout. If you have app.layout instead of layout, then the page registry won’t find the layout for the specific page and throw the error you showed.

Now, in app.py you must define app.layout, since app is initialized there (it is an object of class Dash). This is where the page_container should be in order to make the multi-page plugin work.

So, in summary:

  • layout for pages
  • app.layout in the main application (where app = Dash() is called)

@AnnMarieW @adamschroeder Please jump in if I said something wrong about the /pages feature…

3 Likes
3

Yes, that’s a good summary! Thanks @jlfsjunior

One thing to keep in mind is that a multi-page app is really just one big Dash app. It displays a different layout for each page based on the URL.

The pages plug-in handles all this navigation for you. If you want to learn more about what’s going on behind the scenes then you can find lots of good information here: URL Routing and Multiple Apps | Dash for Python Documentation | Plotly

2 Likes