In this article, we will discuss how to hide and show UI elements in a Shiny app, specifically reusing sub-modules as needed. Shiny is an R package that makes it easy to build interactive web applications straight from R.
To hide and show UI elements, Shiny provides the `tags$visibility()` function, which can be used to set the CSS visibility and display properties of an HTML element. By default, an element is set to visible, but it can be changed to hidden to hide the element.
Reusing Sub-Modules in Shiny
Shiny allows us to break down our apps into smaller modules, making it easier to reuse and maintain them. Modules can be created using the callModule() function, which takes a module UI and server function as arguments.
Creating a Sub-Module
Let's create a sub-module that displays a text input and a button. We will use this module later to demonstrate hiding and showing elements.
# Define the UI for a sub-module
subModuleUI <- function(id) {
ns <- NS(id)
tagList(
textInput(ns("textInput"), "Enter text:"),
actionButton(ns("button"), "Show/Hide")
)
}
# Define the server function for the sub-module
subModuleServer <- function(input, output, session) {
observeEvent(input$button, {
toggleVisibility(session, "textInput")
})
}
In the module UI, we defined a text input and a button using the textInput() and actionButton() functions, respectively. In the module server, we used the observeEvent() function to toggle the visibility of the text input using the toggleVisibility() function from the shinyjs package.
Reusing the Sub-Module
Now that we have defined our sub-module, we can reuse it in our main app UI and server functions.
# Define the UI for the main app
ui <- fluidPage(
useShinyjs(),
subModuleUI("subModule1"),
subModuleUI("subModule2")
)
# Define the server function for the main app
server <- function(input, output, session) {
callModule(subModuleServer, "subModule1")
callModule(subModuleServer, "subModule2")
}
In the main app UI, we included two instances of the sub-module UI using the subModuleUI() function. In the main app server, we included two instances of the sub-module server using the callModule() function.
Showing and Hiding Elements
Now that we have reused the sub-module in our main app, let's demonstrate hiding and showing elements using the tags$visibility() function.
# Modify the sub-module server function
subModuleServer <- function(input, output, session) {
observeEvent(input$button, {
toggleVisibility(session, "textInput")
toggle(session, "textInput", animated = TRUE)
})
}
We modified the sub-module server function to include the toggle() function from the shinyjs package. This function sets the CSS display property of an element, either showing it (with display: block;) or hiding it (with display: none;). We also set the animated argument to TRUE to animate the transition.
- Shiny provides the
tags$visibility()function to hide and show HTML elements. - Modules in Shiny make it easy to reuse and maintain UI and server functions.
- The
toggleVisibility()function from theshinyj