Adding Back to Top Button to templates?

Panel
1

I’m using panel to implement apps in which users can upload files and then post-process/visualize the data.
There are several kind of operations that can be performed by the user
and I’m using tabs to organize the content.

Panel templates with tabs work great but, in some cases, I have to show several plots or tables in the same tab.
In a typical scenario, the user has to scroll down to the end of the page in order to look at the different results and then he/she has to go back to top to select another tab.

I’m wondering if it’s possible to add a Back to Top Button button to the jinja templates
and an option to activate this feature when creating the Template from python.

What I have in mind is something similar to this codepen

2

Hi @gmatteo

Welcome to the community.

I think the button is really nice and also the example linked to. What I am considering is whether its enough to provide an example on creating a widget like this using HTML or ReactiveHTML pane, adding a ScrollToTop button to Panel or whether it should be added to all templates. The argument against adding it to the template is that it could really end up having a lot of parameters. But on the other hand it is really nice functionality.

What do you think @gmatteo

3

Hi @Marc

The argument against adding it to the template is that it could really end up having a lot of parameters.

I understand your concern as it’s not possible to support and maintain
all the features requested by users.

I think that having an example that shows how to customize
a template instance with extra CSS/HTML/JS is already great.

My initial idea was to use pn.config to add the CSS and
then use an HTML pane to include the button and the JS part in the page.
The problem is that I have a multi page app and I may want to customize
the template depending on the page.

It seems that BasicTemplate already provides some infrastructure
to specify custom CSS/JS.

class BasicTemplate(BaseTemplate):
    """
    BasicTemplate provides a baseclass for templates with a basic
    organization including a header, sidebar and main area. Unlike the
    more generic Template class these default templates make it easy
    for a user to generate an application with a polished look and
    feel without having to write any Jinja2 template themselves.
    """

    config = param.ClassSelector(default=_base_config(), class_=_base_config,
                                 constant=True, doc="""
        Configuration object declaring custom CSS and JS files to load
        specifically for this template.""")
1 Like