NotificationArea component in custom template

Panel
1

Hi !

I am trying to use the notification component in a custom template, but it is not working. If someone is using it it would be of great help some idea how to incorporate it. I tried to add like a normal component and like a root but I could notget it.


import panel as pn
import holoviews as hv
pn.extension(notifications=True)

template = """
{% extends base %}

<!-- goes in body -->
{% block postamble %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock %}

<!-- goes in body -->
{% block contents %}
{{ app_title }}
<p>This is a Panel app with a custom template allowing us to compose multiple Panel objects into a single HTML document.</p>
<br>
<div class="container">
  <div class="row">
    <div class="col-sm">
      {{ embed(roots.A) }}
    </div>
    <div class="col-sm">
      {{ embed(roots.B) }}
    </div>
  </div>
</div>
{% endblock %}
"""




tmpl = pn.Template(template)

tmpl.add_variable('app_title', '<h1>Custom Template App</h1>')

tmpl.add_panel('A', hv.Curve([1, 2, 3]))
tmpl.add_panel('B', hv.Curve([1, 2, 3]))


pn.state.notifications.error('This is an error notification.', duration=0)


tmpl.servable()

thanks,
N.

2

Hi @nghenzi

Hope you are well?

I also needed to enable notifications inside a custom template and found this post.

As far as I can see you just need to add the pn.state.notifications widget to the template.

import panel as pn
import holoviews as hv
pn.extension(notifications=True)

template = """
{% extends base %}

<!-- goes in body -->
{% block postamble %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock %}

<!-- goes in body -->
{% block contents %}
{{ app_title }}
<p>This is a Panel app with a custom template allowing us to compose multiple Panel objects into a single HTML document.</p>
<br>
<div class="container">
  <div class="row">
    <div class="col-sm">
      {{ embed(roots.A) }}
    </div>
    <div class="col-sm">
      {{ embed(roots.B) }}
      {{ embed(roots.notifications) }}
    </div>
  </div>
</div>
{% endblock %}
"""




tmpl = pn.Template(template)

tmpl.add_variable('app_title', '<h1>Custom Template App</h1>')

button = pn.widgets.Button(name="Notify")
tmpl.add_panel('A', button)
tmpl.add_panel('B', hv.Curve([1, 2, 3]))
tmpl.add_panel('notifications', pn.state.notifications)

def handle_click(_):
    pn.state.notifications.error('This is an error notification.', duration=0)
    print("notify")
button.on_click(handle_click)


tmpl.servable()
1 Like
3

I am ok, hope you are ok too !!

Great @Marc ! thanks for the answer :slight_smile: .

1 Like
4

Hi @Marc, I tried out the example that you provided and it worked as expected when I serve it with panel serve. However, when trying to serve it with pn.serve(), the notification did not show up. Is there any additional setting that is also necessary to enable notifications when serving apps via pn.serve()?

Steps to reproduce:

import panel as pn
import holoviews as hv

pn.extension(notifications=True)

template = """
{% extends base %}

<!-- goes in body -->
{% block postamble %}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
{% endblock %}

<!-- goes in body -->
{% block contents %}
{{ app_title }}
<p>This is a Panel app with a custom template allowing us to compose multiple Panel objects into a single HTML document.</p>
<br>
<div class="container">
  <div class="row">
    <div class="col-sm">
      {{ embed(roots.A) }}
    </div>
    <div class="col-sm">
      {{ embed(roots.B) }}
      {{ embed(roots.notifications) }}
    </div>
  </div>
</div>
{% endblock %}
"""


tmpl = pn.Template(template)

tmpl.add_variable("app_title", "<h1>Custom Template App</h1>")

button = pn.widgets.Button(name="Notify")
tmpl.add_panel("A", button)
tmpl.add_panel("B", hv.Curve([1, 2, 3]))
tmpl.add_panel("notifications", pn.state.notifications)


def handle_click(_):
    pn.state.notifications.error("This is an error notification.", duration=0)
    print("notify")


button.on_click(handle_click)


tmpl.servable()

# python test_notification.py
if __name__ == "__main__":
    pn.serve(
        {
            "": tmpl,
        },
        port=12000,
        websocket_origin="*",
    )

Any help is much appreciated, thanks! - Faiz