PSYC40940: Building Interactive UI Components

General outline for weeks 6 – 9

~~Week 6: Introduction to Shiny and Reactive Programming~~
Week 7: Building Interactive UI Components
Week 8: Linking ggplot2 with Shiny for Dynamic Visualisation
Week 9: Creating and Deploying Dashboards

Objectives

By the end of this session (and your own reading), you should be able to $\dots$

Decide how to choose between different input widgets and how to implement some important ones in Shiny Apps.
Use different layout functions to structure your Shiny App.
Create input widgets dynamically for an interactive user experience.

Download exercises from Week 7 folder on NOW and move them into your R-project directory.

Recap of Shiny Basics

library(shiny)

ui <- fluidPage(
  sliderInput(inputId = "num",
              label = "Choose a number", 
              min = 1, 
              max = 100, 
              value = 50),
  textOutput("result")
)

server <- function(input, output) {
  output$result <- renderText({
    paste("You chose", input$num)
  })
}

shinyApp(ui, server)

Anatomy of Shiny Apps

Inputs and outputs
Reactivity flow: reactive expressions, observers

Tips

Use reactlog::reactlog_enable() to debug
Always test small components first
Shiny cheatsheet

Short cuts

Type shinyapp
From menu: File > New File > Shiny Web App...
Run: Cmd/Ctrl + Shift + Enter

Input Widgets

Part of user interface:

ui <- fluidPage( ... )

Determines how users are allowed to interact with the app.
Common inputs:
- selectInput(): drop-down-menu
- sliderInput()
- checkboxInput(): on / off
- textInput()
- dateInput()
Grouped inputs:
- radioButtons(): one option
- checkboxGroupInput(): multiple options
Dynamic UI with renderUI() and uiOutput()

Common structure

First argument – inputId – is the identifier: connects front end with back end
- if identifier is “favnum” then server requires input$favnum for access
- name should only be letters, numbers and underscores and it must be unique
Second argument: label a human-readable label for control.
Third parameter: value e.g. default value
Remaining parameters are unique to the control

sliderInput(inputId = "favnum", label = "Fav number", value = 50, min = 0, max = 100)

Check documentation of input:

?sliderInput

Input Widgets: Free text

What kind of inputs are allowed here?

ui <- fluidPage(
  textInput("name", "What's your name?"),
  passwordInput("password", "What's your password?"),
  textAreaInput("story", "Tell me about yourself", rows = 3)
)

Input Widgets: Numeric inputs

What kind of inputs are allowed here?

ui <- fluidPage(
  numericInput("num", "Number one", value = 0, min = 0, max = 100),
  sliderInput("num2", "Number two", value = 50, min = 0, max = 100),
  sliderInput("rng", "Range", value = c(10, 20), min = 0, max = 100)
)

Input Widgets: Dates

What kind of inputs are allowed here?

ui <- fluidPage(
  dateInput("dob", "When were you born?"),
  dateRangeInput("holiday", "When do you want to go travelling next?")
)

Input Widgets: Limited choices

What kind of inputs are allowed here?

animals <- c("dog", "cat", "mouse", "bird", "other")

ui <- fluidPage(
  selectInput("state", "What's your favourite state?", state.name),
  radioButtons("animal", "What's your favourite animal?", animals), # one selection only
  checkboxGroupInput("animal", "What animals do you like?", animals), # multiple selections allowed
  checkboxInput("restart", "Restart?") # yes / no questions
)

selectInput() can allow multiple selections (multiple = TRUE).

Input Widgets: File uploads

What kind of input is allowed here?

ui <- fluidPage(
  fileInput("upload", NULL)
)

Input Widgets: Action buttons

What kind of input is allowed here?

ui <- fluidPage(
  actionButton("click", "Click me!")
)

Should be paired with observeEvent() or eventReactive() in your server function.

Input Widgets

Function	Input Type	Description	Example Use Case
`textInput()`	Text	Single-line text input	Enter a name or keyword
`textAreaInput()`	Text	Multi-line text input	Enter a paragraph or comment
`passwordInput()`	Text (masked)	Text input with hidden characters	Enter a password
`numericInput()`	Numeric	Numeric input with optional min/max/step	Set a threshold or value
`sliderInput()`	Numeric (range)	Slider for selecting a value or range	Choose value or range of values
`dateInput()`	Date	Calendar input for selecting a single date	Pick a birthdate or deadline
`dateRangeInput()`	Date (range)	Select a start and end date	Filter data by date range
`checkboxInput()`	Boolean	Single checkbox (`TRUE`/`FALSE`)	Enable or disable a feature
`checkboxGroupInput()`	Categorical	Multiple checkboxes for selecting multiple options	Choose multiple preferences
`radioButtons()`	Categorical	Radio buttons for selecting one option	Choose between few options
`selectInput()`	Categorical	Dropdown menu for selecting one option	Choose between many options
`selectizeInput()`	Categorical	Enhanced `selectInput()` with search/autocomplete	Searchable dropdown for long lists
`fileInput()`	File	Upload a file from the user’s computer	Upload CSV or image file
`actionButton()`	Button	Triggers an action when clicked	Submit form or refresh plot
`actionLink()`	Button (link style)	Like `actionButton()` but styled as a hyperlink	Trigger UI change or navigation
`colorInput()`	Colour	Colour picker widget	Choose a colour for a plot or theme

Input Widgets

ui <- fluidPage(
  numericInput("num", "Number", 
               value = 0, 
               min = 0, 
               max = 100),
  textOutput("out")
)

server <- function(input, output) {
 output$out <- renderText({
    str_c("This is my number: ", input$num)
 })
}

UI: Use input$<id> in the server to access the value of any input widget.
Server: render... for reactive behaviour.
Server: Combine inputs with observeEvent() or reactive() for dynamic behavior.
UI: ...Output to display information.

Exercise: important input options

Review inputs.R

When are the different options useful?
What happens when you change the input of the value argument?
Add reactivity to the server using renderText
Print one of the inputs as text using textOutput.