Shiny Bookmarking is not Working If I Changed the Formatting of Numeric Input

问题

I want to design an app using Shiny that allows users to bookmark the input values. However, I found that if I changed the input format of the numericInput, bookmarking will not work.

Based on this link (https://beta.rstudioconnect.com/barbara/format-numbers/) to format the input of a numericInput. I created a js file called number_format.js and stored the file in the directory www. The code is as follows.

$(document).ready(function() {
  // Helper function to guarantee cross-browser compatibility
  // adapted from: http://stackoverflow.com/a/16157942
  function localeString(x, sep, grp) {
    var sx = (''+x).split('.'), s = '', i, j;
    sep || (sep = ',');            // default separator
    grp || grp === 0 || (grp = 3); // default grouping
    i = sx[0].length;
    while (i > grp) {
      j = i - grp;
      s = sep + sx[0].slice(j, i) + s;
      i = j;
    }
    s = sx[0].slice(0, i) + s;
    sx[0] = s;
    return sx.join('.');
  }

  // To change Number's input field (lose arrows and other functionality)
  $('#Number')[0].type = 'text';

  // To format the number when the app starts up
  $('#Number').val(localeString($('#Number').val()));

  // To format the number whenever the input changes
  $('#Number').keyup(function(event) {
    $(this).val(localeString($(this).val().replace(/,/g, '')));
  });
});

And then here is the shiny code with the numericInput and a bookmark button.

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- function(request) {
  dashboardPage(
    header = dashboardHeader(title = "Bookmark Example"),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "Example",
          tabName = "tab1"
        ),
        bookmarkButton()
      )
    ),
    body = dashboardBody(
      # Change tags
      tags$head(tags$script(src = "number_format.js")),
      tabItems(
        tabItem(
          tabName = "tab1",
          numericInput(inputId = "Number", label = "Number:", value = NA)
          )
        )
      )
  )
}

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

# Run the app
shinyApp(ui, server, enableBookmarking = "url")

By running this code, the input of the numericInput has the right format, but bookmarking is not working. We can compare the results by commenting out the line tags$head(tags$script(src = "number_format.js")), to see that bookmarking will work if the number is not automatically formatted.

Is there a way to let both automatic formatting and bookmarking work in the same time?

回答1:

Here is a workaround:

# Load the packages
library(shiny)
library(shinydashboard)

# User Interface
ui <- function(request) {
  dashboardPage(
    header = dashboardHeader(title = "Bookmark Example"),
    sidebar = dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "Example",
          tabName = "tab1"
        ),
        bookmarkButton()
      )
    ),
    body = dashboardBody(
      # Change tags
      tags$head(tags$script(src = "number_format.js")),
      tabItems(
        tabItem(
          tabName = "tab1",
          numericInput(inputId = "Number", label = "Number:", value = NA)
        )
      )
    )
  )
}

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

  bigMarkInputs <- c("Number")

  setBookmarkExclude(bigMarkInputs)

  onBookmark(function(state){
    for (bigMarkInput in bigMarkInputs){
      state$values[[bigMarkInput]] <- isolate({input[[bigMarkInput]]})
    }
  })

  onRestore(function(state){
    for (bigMarkInput in bigMarkInputs){
      updateNumericInput(session, inputId = bigMarkInput, value = state$values[[bigMarkInput]])
    }
  })

}

# Run the app
shinyApp(ui, server, enableBookmarking = "url")

来源：https://stackoverflow.com/questions/56277242/shiny-bookmarking-is-not-working-if-i-changed-the-formatting-of-numeric-input

标签

javascript

Shiny

format

shinydashboard