Modal
#| standalone: true
#| components: [viewer]
#| viewerHeight: 400
## file: app.R
library(shiny)
library(bslib)
ui <- page_fixed(
actionButton("show", "Show modal dialog")
)
server <- function(input, output, session) {
observe({
showModal(
modalDialog(
title = "Somewhat important message",
easy_close = TRUE,
"This is your important message."
)
)
}) |>
bindEvent(input$show)
}
shinyApp(ui, server)## file: app.R
library(shiny)
library(bslib)
ui <- page_fixed(
actionButton("show", "Show modal dialog")
)
server <- function(input, output, session) {
observe({
showModal(
modalDialog(
title = "Somewhat important message",
easy_close = TRUE,
"This is your important message."
)
)
}) |>
bindEvent(input$show)
}
shinyApp(ui, server)Relevant Functions
-
modalDialog
modalDialog(..., title = NULL, footer = modalButton("Dismiss"), size = c("m", "s", "l", "xl"), easyClose = FALSE, fade = TRUE) -
showModal
showModal(ui, session = getDefaultReactiveDomain()) -
removeModal
removeModal(session = getDefaultReactiveDomain()) -
modalButton
modalButton(label, icon = NULL) -
observe
observe(x, env = parent.frame(), quoted = FALSE, ..., label = NULL, suspended = FALSE, priority = 0, domain = getDefaultReactiveDomain(), autoDestroy = TRUE, ..stacktraceon = TRUE) -
bindEvent
bindEvent(x, ..., ignoreNULL = TRUE, ignoreInit = FALSE, once = FALSE, label = NULL)
Details
A modal is a dialog box that appears in front of the app. You can use modals to display messages, curate the user experience, or collect user input, like passwords and usernames.
To create a modal, first assemble the components of the modal with modalDialog() and save them to an object. Then call showModal() on the object to display the modal.
Typically, you will want to create an observer and bind it to an event to call showModal() whenever a particular event occurs. For example, the observer below will open a modal whenever the value of input$show changes.
observe({
showModal(
modalDialog(
title = "Somewhat important message",
easy_close = TRUE,
"This is your important message."
)
)
}) |>
bindEvent(input$show) Modal contents
To add elements to a modal, pass them as unnamed arguments to modalDialog(). Modals can contain any UI elements recognized by Shiny.
Modals come in four sizes: small ('s'), medium ('m') (the default), large ('l'), and extra-large ('xl'). Set the size of a modal with the size argument of modalDialog().
See also
- Notifications provide a similar, but alternative way to display information to the user.
Variations
Modal for authentication
Place inputs inside a modal to collect, and then login with, database credentials.
#| standalone: true
#| components: [viewer]
#| viewerHeight: 500
library(shiny)
library(bslib)
ui <- page_fluid(
actionButton("login", "Login to database")
)
server <- function(input, output, session) {
observe({
showModal(
modalDialog(
textInput("name", "Username:"),
passwordInput("password", "Password:"),
actionButton("connect", "Connect"),
title = "Database Credentials",
easyClose = TRUE,
footer = NULL
)
)
}) |>
bindEvent(input$login)
observe({
# Code to connect with input$name and input$password
removeModal()
}) |>
bindEvent(input$connect)
}
shinyApp(ui, server)
library(shiny)
library(bslib)
ui <- page_fluid(
actionButton("login", "Login to database")
)
server <- function(input, output, session) {
observe({
showModal(
modalDialog(
textInput("name", "Username:"),
passwordInput("password", "Password:"),
actionButton("connect", "Connect"),
title = "Database Credentials",
easyClose = TRUE,
footer = NULL
)
)
}) |>
bindEvent(input$login)
observe({
# Code to connect with input$name and input$password
removeModal()
}) |>
bindEvent(input$connect)
}
shinyApp(ui, server)