Dynamically adding modules in shiny

user_962523 0
Viewed 2514

This isn't about creating modules using renderUI. With renderUI as i understand it you put a placeholder inside the UI function and then you write your controls/widget inside the server function.

Modules come in two parts. One part you have to add to the UI function and another part to the server function using callModule().

I have a slider module. I want to add it to a wellpanel when an "add" action button is clicked. If it helps you can think of duplicating the module as many times i want when a button is clicked. The duplicate modules should all be independent.

Visually

dynamically loading modules

I want to know how can an action button add the UI part of the module inside the UI function and server part inside the server function. 

#Dynamically adding modules
library(shiny)

#slider module ------------------------
sliderUI <- function(id) {
  ns <- NS(id)
  sliderInput(ns("bins"), "Number of Bins:", min = 1, max = 5, value = 3)
}

slider <- function(input, output, session) {}


#shiny app ------------------------
ui <- fixedPage(
  fixedRow(
    column(width = 4, wellPanel(
      h4("Slider Module"),
      sliderUI("slider"),
      actionButton("addSliderModule", "Add Slider Module"))
    ),
    column(width = 4, wellPanel(
      h4("Dynamic Loading Modules"),
      p("Clicking on the 'Add' button on the left should add the module here. You should be able to duplicate that slider module as many times as the button is clicked"),
  hr())
    )
  )
)

server <- function(input, output, session) {
   observeEvent(input$addSliderModule, {
      #what goes here
   })
}

shinyApp(ui, server)

cross posted on shiny-group

shiny r
4 Answers

I think you'll find this solution more generic. First, it uses InsertUI instead of JavaScript (InsertUI has been introduced since the last response). However, I haven't found anyone presenting how to use the corresponding object produced by callModule in later reactive code elsewhere. Note that the bit inside renderText is the part that may need to be done quite differently depending on your goal (maybe using a for statement for example)

# user interface module----
numberInput = function(id, label = "Numeric input"){
  ns = NS(id)

  numericInput(ns("term"), label, value = 0)
}

#Module server logic
number = function(input, output, session){
  #just returns the expression for a reactive containing whatever you want (the relevant numericInput in this case)
  num_out = reactive({input$term})
  return(num_out)
}

# User interface ----
ui = fluidPage(
  titlePanel("Inserting UI and Callable Reactive using Modules"),
  actionButton('insertBtn', 'Insert module'),
  textOutput("total")
)

# Server logic
server = function(input, output, session) {
  num_values = reactiveValues()# this is basically a list that can store reactive expressions
  observeEvent(ignoreNULL = FALSE, #simple way of running module initially by allowing to run when button is at 0
               input$insertBtn, {
    btn = as.character(input$insertBtn + 1)#so first module will be labeled #1
    insertUI(
      selector = "#insertBtn",
      where = "afterEnd",
      ui = numberInput(btn,paste0('term #', btn))
    )
    num_values[[btn]] = callModule(number, btn)#stores the reactive expression from the call of the module related to the input inserted in a corresponding element of num_Values
  })
  output$total = renderText({
    num_vector = sapply(num_values, function(num_out){num_out()}) #calls each reactive expression in num_values (defined in the module) to get each input$term
    sum(num_vector) #sums all the numericInputs
  })
}

# Run the app
shinyApp(ui, server)
user_109032520
Related