R Shiny - bookmarking dynamically created UI

Question

I came across slight problem (bug maybe?) with Shiny's bookmarking - I create dynamically UI - new text and numeric inputs. These inputs are created by clicking on an ActionButton. When saving the bookmark URL - the values of numeric and text inputs are both in this URL. So far so good. However after loading the saved URL I only see the first dynamically created UI. I have to click the actionbutton to add the next numeric and text inputs. The values are saved in the URL and once these inputs are added, they are filled with the correct saved values. But it's slightly inconvinient if you have 20 of these buttons and you have to click 19 times to get them all onto your screen. Here is a short reproducible example.

library(shiny)

ui <- function(request){
  shinyUI(fluidPage(
    bookmarkButton(),
    sidebarLayout(
      actionButton('addElement', 'Add Element', icon("plus"), class="btn-success text-white"),
    mainPanel(
        id ="content"
      )
    )
  ))
}


shinyServer(function(input, output) {
  enableBookmarking("url")
  countvar <<- 0
  observeEvent(input$addElement, {
    countvar <<- countvar + 1
    element <- paste0("var", countvar)
    insertUI(
      selector = "#content",
      where = "beforeEnd",
      ui = tagList(
        wellPanel(
          style = "display:-webkit-inline-box;width:100%",
          id = element,
          column(3,
                 textInput(element, "Element name")
          ),
          column(3,
                 numericInput(paste0(element, "Value"), "Element Value", NULL)
          )
        )
      )
    )
  })

})

I found similar question on SO, unfortunately unanswered - Shiny app bookmarking: dynamic UI input lost

Answer 1

Here's a minimal example adapted from your app. There's no magical way to get dynamic content on the page after bookmarking (unless you use renderUI in a straightforward way -- i.e. without any non-input state). So, for your case, you just have to repeat the work you do in the app again inside the onRestore() callback. The best way of doing this is to refactor your code, so that there's a function that can be called to add the item both in the normal app and inside the onRestore() callback.

library(shiny)

ui <- function(request) {
  fluidPage(
    bookmarkButton(),
    sidebarLayout(
      actionButton("add", "Add Element"),
      mainPanel(id = "content")
    )
  )
}

server <- function(input, output, session) {

  addItem <- function(id, textId, numberId, textVal = "", numberVal = NULL) {
    insertUI(
      selector = "#content",
      where = "beforeEnd",
      ui = tagList(
        wellPanel(style = "display:-webkit-inline-box;width:100%",
          id = id,
          column(3, textInput(textId, "Element name", textVal)),
          column(3, numericInput(numberId, "Element value", numberVal))
        )
      )
    )
  }

  observeEvent(input$add, {
    id <- paste0("var", input$add)
    textId <- paste0(id, "text")
    numberId <- paste0(id, "number")
    addItem(id, textId, numberId)
  }, ignoreInit = TRUE)

  onRestore(function(state) {
    for (i in seq_len(input$add))  {
      id <- paste0("var", i)
      textId <- paste0(id, "text")
      numberId <- paste0(id, "number")
      addItem(id, textId, numberId, input[[textId]], input[[numberId]])
    }
  })
}

enableBookmarking("url")
shinyApp(ui, server)