Create a simple dialog/prompt box in panel which outputs a boolean value(upon clicking Ok/Cancel)

Please help me with the creation of a basic dialog/prompt box. All I got so far are complicated examples. Here’s the flow

  1. The dialog box is displayed on clicking a button. The message displayed inside the prompt can be “Are you sure?”
  2. If the User clicks on ‘Okay’, another function is called which prints True
  3. If the User clicks on ‘Cancel’, nothing happens
  4. Alternatively, if the user clicks on ‘Cancel’, another function call is made which prints False

@argcv ,

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()
1 Like

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.

@argcv ,
I don’t think templates will work right inside of the notebook. You can just do something simpler like this:

import panel as pn
import numpy as np
import holoviews as hv
pn.extension()

status = pn.pane.Markdown('status')

# create buttons
okay_btn = pn.widgets.Button(name="Okay")
cancel_btn = pn.widgets.Button(name="Cancel")

# define actions 
def okay_click(event):
    status.object = 'True'
    print('True')
    dialog.collapsed = True
    
def cancel_click(event):
    dialog.collapsed = True


# link buttons to code
okay_btn.on_click(okay_click)
cancel_btn.on_click(cancel_click)

dialog = pn.Card(
    pn.Column(
        "Are you sure?", 
        pn.Row(okay_btn, cancel_btn)), collapsed = True, 
    header = 'Open Dialog', 
    active_header_background = '#ADD8E6'
)

container= pn.Column(
        dialog,
        pn.Card(status, title='Status', collapsible = False)
    )


container
1 Like

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

1 Like

Thanks. I have been testing the code inside Notebook only so far. Any other suggestions?

I don’t see a way to do it without Javascript.

1 Like

Maybe have a read of this on top @riziles link, also never tried
https://www.stefaanlippens.net/jupyter-notebook-dialog.html

2 Likes

Javascriptlicious!

Hi @argcv and others

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.

panel-modal-intro.

3 Likes

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.

2 Likes