Advice on creating a custom template for multiple collated pages

So I have been working on a project for a bit involving multiple pages containing different apps (no problem here, the docs cover this decently).

However I need to essentially take some of these pages and collate them into sections of a single scrollable “SPA”, where each “section” has its own header/nav-bar and its own sidebar.

The docs only lightly touch upon custom templating but I started there and tried to adapt the default Bootstrap template. For this I just went to the Github and pulled out the Bootstrap template and tried to recreate the template by adding variables.

However when deploying the server I am getting Server errors in that I haven’t supplied roots.js_area and possibly roots.actions as well as roots.location (which admittedly I haven’t because I don’t know what I am supposed to supply for these).

My immediate priority question is if anyone knows what those 3 roots related variables are and should be and how to add them to my custom template accordingly.

My broader question is if creating an iterable of pages and having the Jinja2 template generate these using a {% for ... %} loop has been done and if anyone has some guidance here. Any help can be appreciated, as I think being able to extend a Panel app to have multiple headers/sidebars in the same page could be a game changer for some people.

Any help is appreciated!

EDIT: After checking the Template files on Github I resolved the missing variables above, it turns out it is largely template dependent so you have to check out their respective __init__.py files. However even after correcting those I do not get my template rendering correctly. This may be because I didn’t specify the appropriate styling/CSS files in template_resources when passing my variables into the template, but at this point I am quite tired from having to hunt through numerous code snippets to make sense of how to extend the default Panel template.

Moral of the story: I was unable to extend the existing Panel templates to have repeated headers and sidebars for each “section”.

Hopefully this is an aspect of Panel that will be addressed later. I don’t imagine it should be too difficult to add the multi-section single page functionality I expressed since the Panel code on Github has done incredible heavy lifting already. But as of right now, I don’t know enough and don’t have the necessary time to contribute. Best of luck folks.

2 Likes