Including shinyjs in different types of apps

Dean Attali

2016-12-26

Including shinyjs in different types of apps

Table of contents

Basic use of shinyjs

A typical Shiny app has a UI portion and a server portion. Before using most shinyjs functions, you need to call useShinyjs() in the app’s UI. It’s best to include it near the top as a convention.

Here is a minimal Shiny app that uses shinyjs:

library(shiny)
library(shinyjs)

ui <- fluidPage(
  useShinyjs(),  # Include shinyjs

  actionButton("button", "Click me"),
  textInput("text", "Text")
)

server <- function(input, output) {
  observeEvent(input$button, {
    toggle("text")  # toggle is a shinyjs function
  })
}

shinyApp(ui, server)

This is how most Shiny apps should initialize shinyjs - by calling useShinyjs() near the top of the UI.

However, if you use shinyjs in any of the following cases:

Then the following sections will show you how you to include shinyjs.

Using shinyjs in Shiny Dashboards

shinydashboard is an R package that lets you create nice dashboards with Shiny. Since it has a different structure than typical Shiny apps, it can be unclear where to include the call to useShinyjs() in these apps. It is recommended to place the call to useShinyjs() in the beginning of dashboardBody(). For example, here is a minimal Shiny dashboard that uses shinyjs:

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    actionButton("button", "Click me"),
    div(id = "hello", "Hello!")
  )
)

server <- function(input, output) {
  observeEvent(input$button, {
    toggle("hello")
  })
}

shinyApp(ui, server)

Using shinyjs with navbarPage layout

When creating a Shiny app that uses a navbarPage layout, the call to useShinyjs() can be placed inside any of the tabs (since the only real requirement is that it will be present somewhere in the UI). While having useShinyjs() inside the contents of any tab will work, there is another method that is preferred. You can wrap the navbarPage in a tagList, and call useShinyjs() within the tagList. This way, shinyjs gets set up in a way that is independent of each of the tabs. For example, here is a minimal Shiny app that uses shinyjs inside a navbarPage layout:

library(shiny)
library(shinyjs)

ui <- tagList(
  useShinyjs(),
  navbarPage(
    "shinyjs with navbarPage",
    tabPanel("tab1",
             actionButton("button", "Click me"),
             div(id = "hello", "Hello!")),
    tabPanel("tab2")
  )
)

server <- function(input, output, session) {
  observeEvent(input$button, {
    toggle("hello")
  })
}

shinyApp(ui, server)

Using shinyjs in interactive R Markdown documents

It is possible to embed Shiny components in an R Markdown document, resulting in interactive R Markdown documents. More information on how to use these documents is available on the R Markdown website. Even though interactive documents don’t explicitly specify a UI and a server, using shinyjs is still easy: simply call useShinyjs(rmd = TRUE) (note the rmd = TRUE argument). For example, the following code can be used inside an R Markdown code chunk (assuming the document is set up as a Shiny document as the link above describes):

library(shinyjs)

useShinyjs(rmd = TRUE)
actionButton("button", "Click me")
div(id = "hello", "Hello!")

observeEvent(input$button, {
 toggle("hello")
})

Using shinyjs when the user interface is built using an HTML file/template

While most Shiny apps use Shiny’s functions to build a user interface to the app, it is possible to build the UI with an HTML template, as RStudio shows in this article. In this case, you simply need to add {{ useShinyjs() }} somewhere in the template, preferably inside the <head>...</head> tags.

A similar way to create your app’s UI with HTML is to write it entirely in HTML (without templates), as RStudio shows in this article. Building Shiny apps like this is much more complicated and should only be used if you’re very comfortable with HTML. Using shinyjs in these apps is possible but it works a little differently since there is no ui.R to call useShinyjs() from. There are three simple steps to take in order to use shinyjs in these apps:

After adding these three lines to your code, you can use all shinyjs functions as usual.