Url bookmarking when UI is not in ui.R but in index.html

shiny
1

Hello Everyone,

I am trying to create a url bookmarking for my application. I am following the article at
https://shiny.rstudio.com/articles/bookmarking-state.html.

This article says that the the ui function (in ui.R) should be a function taking one argument (request).

ui <- function(request) {

However, in my application the ui is specified using www/index.html. Therefore I am not sure how to specify this parameter in index.html.

Thanks for your help.

regards
-Chinmay

2

Have the UI function return an HTML template:

ui <- function(request) {
  htmlTemplate("www/index.html")
}
3

Hi Greg,
I tried the UI function as you suggested, but bookmarking does not seem to work in that case.
As a test case I deployed the basic histogram visualization with bookmarking at https://mohitkharb.shinyapps.io/bookmarktest/.
I created index.html file for a same ui and fetched it in the ui function here, but bookmarking does not seem to work in the later case.
The app.R for bookmarktest1 is as follows:

library(shiny)

Define server logic required to draw a histogram

shinyServer <- function(input, output) {

output$distPlot <- renderPlot({

# generate bins based on input$bins from ui.R
x    <- faithful[, 2] 
bins <- seq(min(x), max(x), length.out = input$bins + 1)

# draw the histogram with the specified number of bins
hist(x, breaks = bins, col = 'darkgray', border = 'white')

})

}
ui1 <- function(request){
htmlTemplate("www/index.html")
}
shinyApp(ui = ui1, server=shinyServer, enableBookmarking = "url")

Can you please help.

Regards,
Mohit

4

Can you share your HTML template? From a quick glance, I see two instances of jQuery on the page which I bet is causing issues. When I open up a JavaScript console and click Bookmark, there are a couple errors that look like Uncaught TypeError: $(...).modal is not a function.

5

please find my html template here

6

Hi Greg,
I removed the other instance of JQuery, and the bookmark button functions as expected. But the visualization remains the same and does not correspond to variable given in the url.
eg,
https://mohitkharb.shinyapps.io/bookmarktest1/?inputs&bins=22 gives 30 bins in the visualization instead of 22 bins.

7

Ooh, I see now. I think typically, bookmarked state is restored by the UI input functions that generate HTML. If you create UI with HTML directly, you'd have to manually restore bookmarked state. Something like this could work (in the server function):

onRestore(function(state) {
  updateSliderInput(session, "bins", value = state$input$bins)
})

But easier would be to just create the UI inputs in R, and pass them into the template. Any web dependencies would automatically be included as well. Here's an example I made for the Old Faithful app. I'd also recommend checking out the article on HTML templates: https://shiny.rstudio.com/articles/templates.html.

# app.R
library(shiny)

ui <- function(request) {
  htmlTemplate("www/index.html",
    binsInput = sliderInput("bins", "Number of bins:", min = 1, max = 50, value = 30),
    bookmarkBtn = bookmarkButton(),
    distPlot = plotOutput("distPlot")
  )
}

server <- function(input, output, session) {
  output$distPlot <- renderPlot({
    x <- faithful[, 2]
    bins <- seq(min(x), max(x), length.out = input$bins + 1)
    hist(x, breaks = bins, col = 'darkgray', border = 'white')
  })
}

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

<!DOCTYPE html>
<!-- www/index.html -->
<html>
<head>
  {{ headContent() }}
  {{ bootstrapLib() }}
</head>
<body>
  <div class="container-fluid">
      <h2>Old Faithful Geyser Data</h2>
      <div class="row">
        <div class="col-sm-4">
          <div class="well">
            {{ binsInput }}
            {{ bookmarkBtn }}
          </div>
        </div>
        <div class="col-sm-8">
          {{ distPlot }}
        </div>
      </div>
</body>
</html>