UI

#| standalone: true
#| components: [viewer]
#| viewerHeight: 300

from shiny import App, reactive, render, ui

app_ui = ui.page_fluid(
    ui.input_switch("show_slider", "Show slider", True),
    ui.output_ui("ui_slider"),  
)

def server(input, output, session):
    @render.ui  
    @reactive.event(input.show_slider)  
    def ui_slider():  
        if input.show_slider():
            value = input.slider() if "slider" in input else 5
            return ui.input_slider(
                "slider", "Choose a number", min=1, max=10, value=value
            )

app = App(app_ui, server)
from shiny import render
from shiny.express import input, ui

ui.input_switch("show_slider", "Show slider", True)

@render.express  
def ui_slider():  
    if input.show_slider():
        value = input.slider() if "slider" in input else 5
        ui.input_slider("slider", "Choose a number", min=1, max=10, value=value)
from shiny import App, reactive, render, ui

app_ui = ui.page_fluid(
    ui.input_switch("show_slider", "Show slider", True),
    ui.output_ui("ui_slider"),  
)

def server(input, output, session):
    @render.ui  
    @reactive.event(input.show_slider)  
    def ui_slider():  
        if input.show_slider():
            value = input.slider() if "slider" in input else 5
            return ui.input_slider(
                "slider", "Choose a number", min=1, max=10, value=value
            )

app = App(app_ui, server)
No matching items

Relevant Functions

  • ui.output_ui
    ui.output_ui(id, inline=False, container=None, fill=False, fillable=False, **kwargs)

  • @render.ui
    render.ui(_fn=None)

  • @render.express
    express.render.express(self, _fn=None, *, inline=False, container=None, fill=False, fillable=False, **kwargs)

No matching items

Details

A UI output creates an output container for a UI (i.e., HTML) element, such as a set of additional controls. Adding a UI output allows you to show, hide, or update input controls within your app.

To add a UI output, follow three steps:

  1. Call ui.output_ui() in the UI of your app to create a div in which to display the UI element. Where you call this function within the UI functions will determine where the table will appear within the layout of the app. Set the id argument of ui.output_ui() to a unique value.

  2. Within the server function, define a new function whose name matches the id used above. The function should return a UI element, like an input control.

  3. Decorate the function with @render.ui. If you’re using an action button or link to show the UI element, you’ll also need to decorate with @reactive.event.

See also: Dynamic UI and UI and HTML.

Variations

Create dependent controls

You can use @render.ui or @render.express and ui.output_ui() to create a set of controls that are dependent on a setting in your app. In this example, we show a different set of options when the app is in “plot” or “table” mode. Note that we use the current input values or a default value when creating the dependent controls. Without this, the values are re-initialized every time and forget previous user input.

#| standalone: true
#| components: [viewer]
#| viewerHeight: 225

from shiny import App, render, ui

app_ui = ui.page_fluid(
    ui.layout_columns(
        ui.input_radio_buttons(
            "mode", "Display mode", ["Table", "Plot"], selected="Table"
        ),
        ui.output_ui("mode_controls"),
    )
)

def server(input, output, session):
    @render.ui
    def mode_controls():
        if input.mode() == "Table":
            rows = input.rows() if "rows" in input else 10
            cols = input.cols() if "cols" in input else 4
            return ui.TagList(
                ui.input_slider("rows", "Rows:", value=rows, min=1, max=10),
                ui.input_slider("cols", "Columns:", value=cols, min=1, max=10),
            )
        else:
            height = input.height() if "height" in input else 500
            width = input.width() if "width" in input else 500
            return ui.TagList(
                ui.input_slider("height", "Height:", value=height, min=100, max=1000),
                ui.input_slider("width", "Width:", value=width, min=100, max=1000),
            )

app = App(app_ui, server)
from shiny import render
from shiny.express import input, ui

with ui.layout_columns():
    ui.input_radio_buttons("mode", "Display mode", ["Table", "Plot"], selected="Table")

    @render.express
    def mode_controls():
        if input.mode() == "Table":
            rows = input.rows() if "rows" in input else 10
            cols = input.cols() if "cols" in input else 4
            ui.input_slider("rows", "Rows:", value=rows, min=1, max=10)
            ui.input_slider("cols", "Columns:", value=cols, min=1, max=10)
        else:
            height = input.height() if "height" in input else 500
            width = input.width() if "width" in input else 500
            ui.input_slider("height", "Height:", value=height, min=100, max=1000)
            ui.input_slider("width", "Width:", value=width, min=100, max=1000)
from shiny import App, render, ui

app_ui = ui.page_fluid(
    ui.layout_columns(
        ui.input_radio_buttons(
            "mode", "Display mode", ["Table", "Plot"], selected="Table"
        ),
        ui.output_ui("mode_controls"),
    )
)

def server(input, output, session):
    @render.ui
    def mode_controls():
        if input.mode() == "Table":
            rows = input.rows() if "rows" in input else 10
            cols = input.cols() if "cols" in input else 4
            return ui.TagList(
                ui.input_slider("rows", "Rows:", value=rows, min=1, max=10),
                ui.input_slider("cols", "Columns:", value=cols, min=1, max=10),
            )
        else:
            height = input.height() if "height" in input else 500
            width = input.width() if "width" in input else 500
            return ui.TagList(
                ui.input_slider("height", "Height:", value=height, min=100, max=1000),
                ui.input_slider("width", "Width:", value=width, min=100, max=1000),
            )

app = App(app_ui, server)
No matching items