We've already seen that as long as you know JavaScript, using JavaScript is pretty easy in Shiny. The shinyjs package, available on CRAN, actually makes it easy to use extra bits of JavaScript in your application by writing pure R code. Install it with install.packages("shinyjs") and let's take a look.

Shinyjs gives you access to quite a few nice little JavaScript tricks, so see the documentation for more, but we're going to have a look at a few with the help of the Gapminder application. The first is the ability to disable and enable controls. This can be useful to help your users understand how an application works. For example, in the gapminder application, the year control does not do anything when the map tab is selected, since the data used is always the most recent data anyway. We can hide the control, as we saw in the previous chapter, Chapter 4, Mastering Shiny's UI Functions, but sometimes we may prefer to gray out and disable the control.

In order to use shinyjs, we need to call library(shinyjs) in both the server.R and ui.R files. We also need to add useShinyjs() anywhere within fluidPage() in ui.R. With this done, enabling and disabling controls is very simple using the enable() and disable() functions from Shinyjs. We have named the tabPanel  theTabs and the map tab map and therefore we can test whether input$theTabs is equal to "map". Now, it's very simple to turn the control on or off:

observe({
  if (input$theTabs == "map") {
 
    disable("year")
  } else {
 
    enable("year")
  }
})

Another simple trick is changing the formatting of text or tables. We can do this very simply using the toggleClass() function, which adds and takes away a CSS class to/from a div. All we need to do is wrap the text output from the gapminder ui.R in div, and give it a memorable id ("theText"):

div(id = "theText", textOutput("summary"))

Define the CSS in the head of the HTML using tags$head():

fluidPage(
  tags$head(
    tags$style(HTML(".redText {
                     color: red;
                    }"
    ))
  ),
...)

Add a button:

checkboxInput("redText", "Red text?")

And now, apply to the named div ("theText") the named class ("redText") when the named button (input$redText) is pressed:

observe({
  toggleClass("theText", "redText", input$redText)
})

We can also allow the user to reset some or all of the controls. This can be useful if they cannot remember the defaults and they wish to restore default values for the controls without restarting the application. This function requires only a div. We will place a div around the year slider to allow the user to restore their defaults easily:

div(id = "yearPanel", 
      sliderInput("year",
      "Years included",
      min = 1952,
      max = 2007,
      value = c(1952, 2007),
      sep = ""
   )
),

Now, we just need an action button for the user to press:

actionButton("reset", "Reset year")

Now, we use observeEvent() to listen for the button push, and reset() to reset the value of the named div:

observeEvent(input$reset, {
  reset("yearPanel")
})

The last example we're going to show uses the onevent function, which will run any piece of R code in response to an event. It will respond to the following events: click, dblclick, hover, mousedown, mouseenter, mouseleave, mousemove, mouseout, mouseover, mouseup, keydown, keypress, and keyup. We're going to listen for the hover event, which refers to when the mouse pointer is above something. In order to do so, we merely specify the type of event, the ID of the control, and then the R function we wish to run:

onevent("hover", "year",
  html("controlList", 
    input$year, add = FALSE))

This function listens for a hover over the year control, and then executes the given function. The function looks for an element with an ID of "controlList", and adds the value of the input year. The add = FALSE argument is given so the previous entry is overwritten each time. We add the element to the tabPanel graph:

tabPanel("Trend", value = "graph", plotOutput("trend"),
         p(id = "controlList")),

Now, the application has a little readout of the currently selected years underneath the graph, which updates to the new value whenever you hover over the year control: