I think the easiest way to create a dialog box is to use the “modal” component in one of the templates (Templates — Panel v0.14.2). See my example below. I didn’t really understand what you were asking for in number 4.
import panel as pn
import numpy as np
import holoviews as hv
pn.extension(sizing_mode='stretch_width')
bootstrap = pn.template.BootstrapTemplate(title='Bootstrap Template')
status = pn.pane.Markdown('status')
btn = pn.widgets.Button(name="Open Modal")
# Callback that will be called when buttons are clicked
def open_dialog(event):
bootstrap.open_modal()
def okay_click(event):
status.object = 'True'
print('True')
bootstrap.close_modal()
def cancel_click(event):
bootstrap.close_modal()
# Create buttons and link to code
btn.on_click(open_dialog)
okay_btn = pn.widgets.Button(name="Okay")
cancel_btn = pn.widgets.Button(name="Cancel")
okay_btn.on_click(okay_click)
cancel_btn.on_click(cancel_click)
# Add to template
bootstrap.main.append(
pn.Column(
pn.Card(status, title='Status'),
btn
)
)
bootstrap.modal.append(pn.Column("Are you sure?", pn.Row(okay_btn, cancel_btn)))
bootstrap.show()
Thanks @riziles for the code and explanation.
Please ignore #4. It was meant to be an alternative to #3.
When I try to run this in Jupyter Notebook(after removing the .show() from the last line, since bootstrap.show() launches a separate server), I get the following output:
Clicking on ‘Open Modal’ or ‘Cancel’ does nothing. Clicking on ‘Okay’ prints True to the console.
I think the modal should open after clicking ‘Open Modal’ button. But here, it’s open from the beginning itself.
Thanks a lot @riziles. Here, the ‘Open Dialog’ is a Card. I am looking for a pop-up dialog box that gives the option. Is there any native way to convert this Card to DialogBox? Rest of the code is neat
What you want to do is theoretically possible, but I think you’d have to write some Javascript if you want to do it inside a notebook. It’s outside of my wheelhouse, but you start here: JavaScript Popup Boxes
You can get a modal that works in the notebook if you try out awesome-panel/panel-modal and provide some feedback. I just created it. There might be some issues I’ve overlooked.
Released panel-modal v. 0.2.0. The Modal now accepts multiple positional objects similar to Column and Row. v. 0.1.0 accepted a single positional object only.