Introduction to shinyglide

Creating a glide

To add a glide component to an app, you must call the glide() function in you application UI declaration :

ui <- fluidPage(
  titlePanel("App title"),
  glide(
    ...
  )
)

Adding screens

Once your glide is created, you have to add screens to it. This is done by calling the screen() function :

ui <- fluidPage(
  titlePanel("App title"),
  glide(
    screen(
      p("This is the first screen of this glide.")
    ),
    screen(
      p("This is the second and final screen.")
    )
  )
)

Of course, screens can contain anything you want, including shiny inputs and outputs. Here is a very basic complete app :

ui <- fluidPage(
  titlePanel("Basic shinyglide app"),
  glide(
    screen(
      p("Please choose a value for n :"),
      numericInput("n", "n :", value = 100)
    ),
    screen(
      p("Here is your plot :"),
      plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(rnorm(input$n), main = paste("n =", input$n))
  })
}

shinyApp(ui, server)

You can see that default controls are added to your glide in the form of a “next” button (which doesn’t appear on last screen) and a “back” button (which doesn’t appear on the first one). There are different ways to customize these controls, which are explained in the custom controls vignette.

Customizing glide

The glide() function accepts several arguments to modify its behavior or appearance :

• id : allows to ass an HTML id to the glide root
• height : height of the glide in any CSS unit
• keyboard : set to FALSE to disable keyboard arrows navigation
• controls_position : wether to place the controls on "top" or "bottom" of the glide.
• next_label, previous_label : allow to specify custom labels for the “Back” and “Next” buttons. You can use text, HTML, icon(), etc.

The loading_label, label_class and disable_type options will be described in the conditional controls and screen output vignette, and the custom_controls argument is explained in the custom controls vignette.

Here is an example of glide customization :

ui <- fluidPage(
  glide(
    id = "plot-glide",
    height = "450px",
    controls_position = "top",
    next_label = "Go to next screen",
    previous_label = "Go back",
    
    screen(
      p("Please choose a value for n :"),
      numericInput("n", "n :", value = 100)
    ),
    screen(
      p("Here is your plot :"),
      plotOutput("plot")
    )
  )
)

server <- function(input, output, session) {
  output$plot <- renderPlot({
    hist(rnorm(input$n), main = paste("n =", input$n))
  })
}

shinyApp(ui, server)

Customizing screens

You can also use arguments with screen() :

• class : allows to add a CSS class to the current screen
• next_label, previous_label : change the “back” and “next” controls labels for this screen

The next_condition and previous_condition arguments are explained in the conditional inputs and screen outputs vignette.

In app controls

It’s possible to add controls inside the content of screens, such as a button which send the user back to the first screen, a link to go two screens forward, etc.

To do this, you have to create an element (usually a link or a button) with a data-glide-dir attribute, and wrap it inside an element (usually a <div>) with a data-glide-el=“controls”` attribute.

For example, the following will create a link which will go back one screen :

div(`data-glide-el`="controls",
  a(`data-glide-dir`="<", href="#", "Go back")
)

And this will create a button that will go back to the first screen :

div(`data-glide-el`="controls",
  tags$button(`data-glide-dir`="<<", href="#", "Back to start")
)

The data-glide-dir attribute accepts the following values :

• <, > : move one screen backward/forward
• <<, >> : go to the first/last screen
• =n : go to the screen at index n (starting at 0)

Getting back the current slide index into Shiny

shinyglide automatically updates a Shiny input with the current slide index. If you gave an id to your glide() element, you can access it with input$shinyglide_index_id, otherwise the variable name is input$shinyglide_index. Here is a quick example :

ui <- fluidPage(
  glide(
    id = "myglide",
    screen(h1("First screen")),
    screen(h1("Second screen")),
    screen(h1("Third screen"))
  ),
  textOutput("index")
)

server <- function(input, output, session){
  output$index <- renderText(
    input$shinyglide_index_myglide
  )
}

Note that this won’t work if you put an hyphen in your glide id.