Shiny Anatomy

The guts and connective tissue

Start with file: intro-shiny/babynames/00-anatomy/app-baby-00.R

A Shiny app generally consists of three parts:

1. the user interface (UI): what the user sees in the browser and interacts with (input)
2. the server: processes the user’s input to create and send back for display (output)
3. and a place for global variables: things that both the UI and server have access to

Global

In a single file app, packages and global variables can be loaded at the top of the script.

library(shiny)
library(tidyverse)
library(here)

df <- data.table::fread(here('data', 'babynames.csv')) %>% as_tibble()

UI & Server

The UI is comprised of R functions that will ultimately generate HTML–a markup language that structures and presents content for the web.

ui <- fluidPage(
  
  # static elements in the UI
  titlePanel("U.S. Baby Names"),
  p("Source:", 
    tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
           "Social Security Administration"))
)

Store elements of your UI inside fluidPage() separated by commas. You can use any of the following methods to build the UI:

• Shiny UI functions (e.g. titlePanel())
• Reference HTML tags using tag$ as a prefix (e.g tag$img()).
  • For a list of HTML tags: names(tags)
  • The most common tags are functions themselves and don’t require the prefix (e.g. p(), h1(), etc.)
• raw HTML within the wrapper html()

Outputs & Render

Functions ending in *Output(), creates space(s) in the UI for R outputs, such as tables and plots. However, the UI can’t process and display R output by itself. It requires help from the server.

ui <- fluidPage(
  
  titlePanel("U.S. Baby Names"),
  p("Source:", 
    tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
           "Social Security Administration")),
  
  # a place to display our data frame as a table. Its ID is 'main_table'
  tableOutput("main_table")
  
)

For every *Output() there must be a compatible render*() in the server. They work as pairs, connected by the unique name of the output, to add R output to the UI.

server <- function(input, output) {
  
  # render the r object `df` to the space called, 'main_table'.
  output$main_table <- renderTable({
    df %>% slice(1:20)
    })
}

The server is one large function that passes in inputs and outputs (and depending on what you’re doing, a session argument). output is inherent in Shiny–it is a list-like object referencing the outputs in the UI and additional code required to update each output object¹.

Inputs

What makes Shiny interactive are inputs. Input widgets such as text boxes, checkboxes, dropdown menus, buttons, and many others, collect values from the user.

Similar to *Output(), inputs also require a unique name. The unique inputID is what connects the front-end to the back-end.

ui <- fluidPage(
  
    titlePanel("U.S. Baby Names"),
    p("Source:", 
      tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
             "Social Security Administration")),
    
    # A text box to enter a name. Its ID is 'name'.
    textInput("name", 
              label = "Enter name",
              placeholder = "Jane"),
    
    tableOutput("main_table")
  
)

In this example, we collect the user’s input value from textInput() and display it in the output area called name_entered.

ui <- fluidPage(
  
    titlePanel("U.S. Baby Names"),
    p("Source:", 
      tags$a(href = "https://www.ssa.gov/oact/babynames/limits.html", 
             "Social Security Administration")),
    
    textInput("name", 
              label = "Enter name",
              placeholder = "Jane"),
    
    # Display the name that was entered in textInput
    textOutput("name_entered"),
    
    tableOutput("main_table")
  
)

Server-side, reference the input value with input$ as a prefix and the unique name of the input widget. input like output is inherent to Shiny. It is a list-like object containing all inputIDs from the UI.

server <- function(input, output) {
  
  # render the textInput to the designated output
  output$name_entered <- renderText({
    c("You entered:", input$name)
  })
  
  output$main_table <- renderTable({
    df %>% slice(1:20)
    })
  
   
}

---

1. https://shiny.rstudio.com/tutorial/written-tutorial/lesson4/↩︎