NotificationArea component in custom template

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.

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

I am ok, hope you are ok too !!

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

1 Like