Creation and deletion of dynamic boxes in R Shiny using shinydashboardplus package (boxDropdownItem)

Question

I'm trying to create a page to include and exclude boxes dynamically using boxDropdownItem from shinydashboardplus package, but the application is crashing, could someone help me please?

*Solutions using javascript are also welcome :)

Here my code:

shinyApp(
        ui = dashboardPage(
        dashboardHeader(),  
        dashboardSidebar(),
        dashboardBody(
        uiOutput("boxes")
        )
),

server = function(input, output) {

        rvs = reactiveValues(boxDropdownItem = list(), observers = list())

        output$boxes <- renderUI({
        for(i in 1:5) {
                rvs$boxDropdownItem[[i]] =
                column(width = 12,
                        box(    id = paste("box",i),
                                title = paste("box",i),
                                width = 4,
                                status = NULL,
                                dropdownMenu = boxDropdown(
                                        icon = icon("ellipsis-v"),
                                        boxDropdownItem(id = paste0("del",i), "Delete")
                                )
                        )
                )
        }

        rvs$observers = lapply(1:(length(rvs$boxDropdownItem)),function(i) {
  
        observeEvent(input[[paste0("del",i)]],{ 
                rvs$observers <- rvs$observers[-i]
                rvs$boxDropdownItem <- rvs$boxDropdownItem[-i]
        })
        }) 

        do.call(fluidRow, rvs$boxDropdownItem) 
})

}
)

Answer 1

You need to first create the boxes as a reactiveValues object. Then you can control what you display in renderUI. I have shown here for 3 boxes. You can modify it to dynamic number. Try this

library(shinydashboardPlus)

shinyApp(
  ui = shinydashboard::dashboardPage(title = "My Box Dropdown",
    dashboardHeader(),  
    dashboardSidebar(),
    dashboardBody(
      uiOutput("boxes")
    )
  ),
  
  server = function(input, output) {
    
    rvs = reactiveValues(boxDropdownItem = list(), observers = list(), tmp=list())
    
    observe({
      for(i in 1:3) {
        rvs$boxDropdownItem[[i]] <-
          box(id = paste0("box",i),
              title = paste("box",i),
              width = 12,
              status = "warning",
              solidHeader = TRUE,
              collapsible = TRUE,
              dropdownMenu = boxDropdown(
                icon = icon("ellipsis-v"),
                boxDropdownItem("Click me", id = paste0("dropdownItem",i), icon = icon("heart")),
                dropdownDivider(),
                boxDropdownItem(id = paste0("del",i), "Delete")
              ),
              paste("My Box",i)
          )
        
      }
      
    })
    
    output$boxes <- renderUI({
      if (length(rvs$tmp)>0){
        rvs$boxDropdownItem[!(rvs$boxDropdownItem %in% rvs$tmp)]
      } else rvs$boxDropdownItem
    })
    
    lapply(1:3, function(i) {
      observeEvent(input[[paste0("del",i)]],{
        rvs$tmp[[i]] <<- rvs$boxDropdownItem[[i]]
      }, ignoreInit = TRUE)
      
      
      observeEvent(input[[paste0("dropdownItem",i)]], {
        showNotification("Hello", duration = i, type = "error")
      })

    })
    
  }
)

The picture below shows box 2 deleted.