Hi @ItamarShDev.
I’ve created an example based on a custom Panel Template.
Check it out live at https://awesome-panel.org/dialog_template
You can find the most recent code here https://github.com/MarcSkovMadsen/awesome-panel/tree/master/application/pages/dialog_template.
I include the current code below for completeness
template.html
{% extends base %}
{% block postamble %}
<!-- https://shoelace.style/ -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.19/dist/shoelace/shoelace.css">
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.19/dist/shoelace/shoelace.esm.js"></script>
<style>
body, .bk-root .bk, .bk-root .bk:before, .bk-root .bk:after {
font-family: var(--sl-input-font-family);
}
</style>
{% endblock %}
<!-- goes in body -->
{% block contents %}
{{ embed(roots.header) }}
<div id="main" style="margin: 25px">
{{ embed(roots.main) }}
<br/>
<!-- https://shoelace.style/components/dialog -->
<sl-dialog label="{{ dialog_label }}" class="dialog-overview" style="--width: 550px;--height: 500px;">
{{ embed(roots.dialog) }}
<sl-button slot="footer" type="primary">Close</sl-button>
</sl-dialog>
<sl-button>Open Dialog</sl-button>
</div>
<script>
(() => {
const dialog = document.querySelector('.dialog-overview');
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector('sl-button[slot="footer"]');
openButton.addEventListener('click', () => dialog.show());
closeButton.addEventListener('click', () => dialog.hide());
})();
</script>
{% endblock %}
template.py
"""Custom Panel Template With a Dialog"""
import pathlib
import panel as pn
import param
TEMPLATE = (pathlib.Path(__file__).parent / "template.html").read_text()
class TemplateWithDialog(pn.template.Template):
"""Custom Panel Template With a Dialog"""
dialog_open = param.Action()
dialog_close = param.Action()
TEMPLATE = (pathlib.Path(__file__).parent / "template.html").read_text()
def __init__(self, header, main, dialog, dialog_label: str):
super().__init__(
template=TEMPLATE,
)
self.add_panel("header", header)
self.add_panel("main", main)
self.add_panel("dialog", dialog)
self.add_variable("dialog_label", dialog_label)
app.py
"""Panel application show casing a Custom Panel Template With a Dialog"""
import hvplot.pandas # pylint: disable=unused-import
import panel as pn
from bokeh.sampledata import sea_surface_temperature as sst
from .template import TemplateWithDialog
def _get_sea_surface_temperature_plot():
if "dialog_template_plot" not in pn.state.cache:
pn.state.cache["dialog_template_plot"] = sst.sea_surface_temperature.hvplot.kde().opts(
height=300, width=500
)
return pn.state.cache["dialog_template_plot"]
def view():
"""Returns a Panel application show casing a Custom Panel Template With a Dialog"""
top_panel = pn.Row(
pn.pane.PNG(
"https://panel.holoviz.org/_static/logo_horizontal.png",
height=50,
margin=10,
link_url="https://panel.holoviz.org",
sizing_mode="stretch_width",
),
background="black",
sizing_mode="stretch_width",
)
main_panel = pn.Column(
"This is a Panel application with a dialog",
"Provided by awesome-panel.org",
sizing_mode="stretch_width",
)
dialog_panel = pn.Column(_get_sea_surface_temperature_plot(), sizing_mode="fixed")
template = TemplateWithDialog(
header=top_panel,
main=main_panel,
dialog=dialog_panel,
dialog_label="HvPlot - Sea surface temperature kde",
)
return template