Introduction to Shiny

Session - Basic User Interface (UI)

Zoë Turner

Three parts

  • Inputs - text, numeric values, dates, file uploads
  • Outputs - text, tables, plots, downloads
  • Layout - sidebars, tabsets, themes

Inputs

Input functions are often camelCase with the word Input in their name:

  • sliderInput()
  • selectInput()
  • textInput()
  • numericInput()

Each have the first argument or parameter as inputId = and is the link between the UI with the Server.

Functions and parameters

Like all functions the arguments names can be dropped and read by the order. So instead of:

sliderInput(inputId = "min",
            name = "Limit (minimum)",
            value = 50,
            min = 0)

you will often see:

sliderInput("min", 
            "Limit (minimum)", 
            value = 50, 
            min = 0)

First two argument names

All inputs need an inputId and a label so these are conventionally omitted.

Rules for inputId =

Only letters, numbers and underscores, never use:

  • spaces
  • dashes
  • full stops
  • any other special characters

It must also be unique so that the UI and Server are linked.

label = parameter

The second argument or parameter is the human readable label for the control.

There are no restrictions for this at all but be mindful of the reader!

Built in options for UI controls

Mastering Shiny details a number of the controls including:

  • free text
  • dates
  • limited choice (radio buttons)
  • multiple choice (check boxes)
  • file uploads

And there are always extension packages - {shinyWidgets}, {colorpicker}, {sorttable}

Outputs

  • The UI outputs act like place holders that are later filled by the Server.
  • Naming of these needs to also be unique
  • Argument names are usually omitted (like the input functions inputId and label)
  • Outputs are mainly what you find in a report: text, tables, plots, file downloads

Text UI output functions (paired)

  • For regular text the UI function textOutput() is usually paired with the server function renderText()
  • For a console printed look the UI function verbatimTextOutput()is usually pared with the server function renderPrint() 
ui <- fluidPage(
  textOutput("text"),
  verbatimTextOutput("print")
)
server <- function(input, output, session) {
  output$text <- renderText("hello!")
  output$print <- renderPrint("hello!")
}

Let’s see what happens by creating a new shiny app, saving it and running it.

{} and reducing computation

The curly brackets are useful for running code over multiple lines:

ui <- fluidPage(
  textOutput("text"),
  verbatimTextOutput("print")
)
server <- function(input, output, session) {
   output$text <- renderText({
     "hello!"
   })
   output$code <- renderPrint({
     "hello!"
   })
}

But the recommendation is to do as little computation as possible in the render functions which means they are often omitted.

Tables

  • For static tables the UI function tableOutput() is paired with the server function renderTable()
  • For dymanic tables the UI function dataTableOutput()is pared with the server function renderDataTable() 
ui <- fluidPage(
  tableOutput("static"),
  dataTableOutput("dynamic")
)
server <- function(input, output, session) {
  output$static <- renderTable(head(mtcars))
  output$dynamic <- renderDataTable(mtcars, options = list(pageLength = 5))
}

Let’s see what happens by creating a new shiny app, saving it and running it.

Plots

  • For plots the UI function plotOutput() is paired with the server function renderPlot()
  • This can be used for base R, {ggplot2} and other packages
  • Plots can be made interactive
ui <- fluidPage(
  plotOutput("plot", width = "400px")
)
server <- function(input, output, session) {
  output$plot <- renderPlot(plot(1:5), res = 96)
}

Let’s see what happens by creating a new shiny app, saving it and running it.

Exercise (from Mastering Shiny)

Which of textOutput() and verbatimTextOutput() should each of the following render functions be paired with?

renderPrint(summary(mtcars))

renderText("Good morning!")

renderPrint(t.test(1:5, 2:6))
08:00

Solution

ui <- fluidPage(
  textOutput("greeting"),
  verbatimTextOutput("summary"),
  verbatimTextOutput("ttest")
)
server <- function(input, output, session) {

  output$summary <- renderPrint(summary(mtcars))
  output$greeting <- renderText("Good morning!")
  output$ttest <- renderPrint(t.test(1:5, 2:6))
}

Adding Alt text

Putting the {} back in to make the code clearer, parameters like res and alt for alt text go outside the brackets

ui <- fluidPage(
  plotOutput("plot")
)
server <- function(input, output, session) {
  output$plot <- renderPlot({

    plot(1:5)

    }, res = 96, alt = "Scatterplot with random points")

}

Checking Alt Text (tip)

  • To check that alt text has worked right click on the chart and select Inspect Element.
  • All the html will appear but you should also see alt = "Scatterplot....

Reactive Alt text

Because Shiny is reactive and you may want Alt Text to reflect what is selected by the user:

renderPlot({
        # code to generate plot goes here
      },
      alt = reactive({
        # code to add alt text goes here
      })
)

End session

Acknowledgements

Mastering Shiny by Hadley Wickham

Jumping Rivers blog about accessibility in R

Read more from Jumping Rivers on accessible standards in Shiny