Modularizing Reactive Expressions in a Shiny Application

Question

I'm currently working on refactoring my Shiny application to make use of modules for better structure and maintainability. The application involves a series of numeric input fields, the values of which are summed and displayed in a field labeled "ABC".

While the app functions as expected in its initial non-modularized state, after attempting to refactor it into modules, I'm encountering an issue with reactivity. Specifically, the "ABC" field, which should display the updated sum of all input fields, is not reflecting the changes reactively.

I suspect that I may not be passing arguments correctly between the UI and server modules, but I'm not sure how to resolve this issue. I would appreciate any assistance to help improve and correct my code. Thank you!"

library(shiny)

# Function to generate numericInputs
createNumericInput <- function(region) {
  numericInput(region$id, region$label, min = 0, max = 3, step = 1, value = 0)
}

# List of inputs
input_details <- list(
  list(id = "A1", label = "0 A"),
  list(id = "B2", label = "1 B"),
  list(id = "C3", label = "2 C")
)

# ui module
name_UI <- function(id, numeric_inputs) {
  ns <- NS(id)
  tagList(
    tags$div(
      id = "inline",
      fluidRow(
        h4("ABC"),
        column(width = 6,
               numeric_inputs,
               numericInput(ns("ABC"), "ABC", min = 0, max = 39, step = 1, value = 0)
        )
      )
    )
  )
}

# server module
name_server <- function(id, input_details) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns
    
    sum_reactive <- reactive({
      sum_values <- 0
      for(region in input_details) {
        input_id <- ns(region$id)
        val <- input[[input_id]]
        if (!is.null(val)) {
          sum_values <- sum_values + as.numeric(val)
        }
      }
      sum_values
    })
    
    # Update the value of ABC when the inputs change
    observe({
      updateNumericInput(session, ns("ABC"), value = sum_reactive())
    })
  })
}

# UI
ui <- fluidPage(
  name_UI("mod_1", lapply(input_details, createNumericInput)) # Apply createNumericInput to input_details here
)

# Server logic
server <- function(input, output, session) {
  name_server("mod_1", input_details)
}

# Run the app
shinyApp(ui = ui, server = server)

Answer 1

There are two issues with your code:

1. When creating your numeric inputs via lapply you did not take care of the module's namespace, i.e. you did not create the inputs in the module namespace. To fix that I added a ns argument to createNumericInput. And of course could we then simply use e.g. input[[region$id]] to access the value of the input in the server. Using ns(...) will have no effect as just said you have not created the inputs in the module's namespace.

2. In the server part, in updateNumericInput you don't have to wrap the input id in ns() or as Hadley has put it in Mastering Shiny

   Note that moduleServer() takes care of the namespacing automatically.

Note: I moved the creation of the numeric inputs via lapply inside the module UI and only pass the input_details list to the UI.

library(shiny)

# Function to generate numericInputs
createNumericInput <- function(region, ns = NULL) {
  id <- if (!is.null(ns)) ns(region$id) else region$id
  numericInput(id, region$label, min = 0, max = 3, step = 1, value = 0)
}

# List of inputs
input_details <- list(
  list(id = "A1", label = "0 A"),
  list(id = "B2", label = "1 B"),
  list(id = "C3", label = "2 C")
)

# ui module
name_UI <- function(id, numeric_inputs) {
  ns <- NS(id)
  tagList(
    tags$div(
      id = "inline",
      fluidRow(
        h4("ABC"),
        column(
          width = 6,
          lapply(input_details, createNumericInput, ns = ns),
          numericInput(ns("ABC"), "ABC", min = 0, max = 39, step = 1, value = 0)
        )
      )
    )
  )
}

# server module
name_server <- function(id, input_details) {
  moduleServer(id, function(input, output, session) {
    ns <- session$ns

    sum_reactive <- reactive({
      sum_values <- 0
      for (region in input_details) {
        val <- input[[region$id]]
        
        if (!is.null(val)) {
          sum_values <- sum_values + as.numeric(val)
        }
      }
      sum_values
    })

    observe({
      updateNumericInput(session, "ABC", value = sum_reactive())
    })
  })
}

# UI
ui <- fluidPage(
  name_UI("mod_1", input_details) # Apply createNumericInput to input_details here
)

# Server logic
server <- function(input, output, session) {
  name_server("mod_1", input_details)
}

# Run the app
shinyApp(ui = ui, server = server)