`shiny.express.ui.modal()` should include an example with a modal with inputs/outputs

[gadenbuie]

https://shiny.posit.co/py/api/express/express.ui.modal.html

from shiny import reactive
from shiny.express import input, ui

ui.input_action_button("show", "Show modal dialog")


@reactive.effect
@reactive.event(input.show)
def _():
    m = ui.modal(
        "This is a somewhat important message.",
        title="Somewhat important message",
        easy_close=True,
        footer=None,
    )
    ui.modal_show(m)

The current example includes very basic UI. How would someone include inputs or outputs in the modal?

[cpsievert]

Like this?

from shiny import reactive
from shiny.express import input, render, ui

ui.input_action_button("show", "Show modal dialog")

@reactive.effect
@reactive.event(input.show)
def _():
    m = ui.modal(
        [
            "This is a somewhat important message.",
            ui.input_action_button("click", "Click me")
        ],
        title="Somewhat important message",
        easy_close=True,
        footer=None,
    )
    ui.modal_show(m)


@render.code
@reactive.event(input.click)
def _():
    return input.click()

Outputs would be tricker, but you'd probably want to with ui.hold() as foo:?

[schloerke]

With ui.hold(): shinylive.io app

from shiny import reactive, ui as ui_core
from shiny.express import input, ui, render

m = ui.modal(
    "This is a somewhat important message.",
    ui_core.input_slider("n", "Slider", 0, 100, 50),
    ui_core.output_code("n_out"),
    title="Somewhat important message",
    easy_close=True,
    footer=None,
)
ui.modal_show(m)


with ui.hold():
    
    @render.code
    def n_out():
        return input.n()

[schloerke]

Would be cool if this worked...

from shiny import reactive
from shiny.express import input, ui, render

ui.input_action_button("btn", "Show modal")

with ui.modal(title="Somewhat important message", easy_close=True, footer=None) as m:
    
    "This is a somewhat important message."

    ui.input_slider("n", "Slider", 0, 100, 50)

    @render.code
    def _():
        return input.n()

    @reactive.effect
    @reactive.event(input.btn)
    def _():
        ui.modal_show(m)

[gadenbuie]

Would be cool if this worked...

Yeah, that's what I wanted really. You can get closish:

from shiny import reactive, ui as ui_core
from shiny.express import input, ui, render

with ui.hold() as the_modal_ui:
    "This is a somewhat important message."

    ui.input_slider("n", "Slider", 0, 100, 50)

    @render.code
    def n_out():
        return input.n()


m = ui.modal(the_modal_ui, title="Somewhat important message")


ui.modal_show(m)

[gadenbuie]

Or another variation, but the need for @expressify was surprising to me

from shiny import reactive, ui as ui_core
from shiny.express import input, ui, render, expressify

@expressify
def my_modal():
    with ui.hold() as the_modal_ui:
        "This is a somewhat important message."
    
        ui.input_slider("n", "Slider", 0, 100, 50)
    
        @render.code
        def n_out():
            return input.n()

    return ui.modal(the_modal_ui, title="Somewhat important")

ui.modal_show(my_modal())