Dynamic modal content (FastGridTemplate)

Panel
,
1

Hi. I’m trying to pop up a modal dialog with content that changes dynamically. I am using the FastGridTemplate. However, I can’t seem to register my changes to the modal content from a callback. I’ve read the docs which suggest the content areas are fixed once rendered, they suggest one wraps the content using a panel layout component (eg Row or Column) but I can’t seem to get this to work either. Below are three different attempts; all of which produce an empty modal. I’d expect a modal with a random number displayed in each case. Any one have any ideas? Perhaps I need to trigger a UI refresh or similar. An additional observation is if, after pressing the button for the modal popup and the modal appearing empty, I force refresh the browser page (f5) and press button again, then the dialog is populated (hence my trigger UI refresh suspicion).

import panel as pn
import random

# attempt 1
# template = pn.template.FastGridTemplate(title='Modal Test 1')

# def show_modal(event):
#     template.modal.clear()
#     template.modal.append(f"Randint {random.randint(0, 100)}")
#     template.open_modal()


# attempt 2
# template = pn.template.FastGridTemplate(title='Modal Test 2', modal=pn.Row())

# def show_modal(event):
#     template.modal.objects.clear()
#     template.modal.objects.append(f"Randint {random.randint(0, 100)}")
#     template.open_modal()


# attempt 3
def create_modal():
    return pn.Row()

template = pn.template.FastGridTemplate(title='Modal Test 3', modal=create_modal())

def show_modal(event):
    template.modal.objects.clear()
    template.modal.objects.append(f"Randint {random.randint(0, 100)}")
    template.open_modal()


# common
modal_btn = pn.widgets.Button(name="Click for modal")
modal_btn.on_click(show_modal)
template.sidebar.append(modal_btn)

template.show()
2

I found the solution. The clue was in question #5382. The following now works.

template = pn.template.FastGridTemplate(title='Modal Test 4')
template.modal.append(pn.Row())

def show_modal(event):
    template.modal[0].clear()
    template.modal[0].append(f"Randint {random.randint(0, 100)}")
    template.open_modal()
1 Like
3

Is this still working for you? This simple example works fine, but whenever I try to do something more involved, with parametrized classes or Viewer classes, it crashes.

Did you ever go beyond this simple example?

4

I’ve not been so actively using my Panel apps although I recently upgraded to v1.6. I do have a couple of “widgets” that pop up in models as above. Two of those widgets are wrapped in Row and Col. They mostly contain static information. One contains a terminal widget - I haven’t tested that part recently. Have you tried wrapping in Col or Row?

5

By making sure that I enabled the “modal” extension, wrapping my components in Row/Col and making sure the components were children of pn.viewable.Viewer (and not PyComponent or param); I got it to work!

Thanks!

1 Like