• Shine with quarto
  • Getting Started
    • R project and basic settings
    • Deploy on GitHub
  • Basics
    • Layout
    • Code chunk
    • Presentation documents
  • Shiny
    • Shiny logic

On this page

  • 1 Logic
  • 2 Basics
  • 3 UI
    • 3.1 Input
    • 3.2 Output
  • 4 Server
  • 5 Complete flow
    • 5.1 UI
      • 5.1.1 Input definition
      • 5.1.2 Output definition
    • 5.2 Server
    • 5.3 All together
  • 6 Next episode

Shiny

1 Logic

ui (User Interface)

The container, whatever sees the user

Used for setting the desired configurations of options that will be elaborated in the server

Used for displaying the results of the computations that took place in the server

server

It gets the work done, according to the configuration set in the UI

Replaces the results into the allocated spaces

UI and Server work in a flow, communicating to each other (Figure 1).

flowchart LR

    UI["**UI**<br/><br/>Set the options<br/>Displays the results"]
    SERVER["**SERVER**<br/><br/>Elaborates the options<br/>Sends back the results"]

    UI -->|"Input"| SERVER
    SERVER -->|"Output"| UI

    style UI fill:#2b6c8e,stroke:#1b4258,stroke-width:2px,color:#ffffff
    style SERVER fill:#8fd36f,stroke:#4c8b3a,stroke-width:2px,color:#ffffff

    linkStyle default stroke:#FFD700,stroke-width:5px

Figure 1: Interaction between the user interface (UI) and the server.
  • Define something in the ui and not using in the server: nothing happens, it just doesn’t exist

  • Calling something in the server that has not been defined in the ui: errors everywhere

2 Basics

install.packages("shiny") # install
library(shiny) # use it
1ui = fluidPage(
   [...]
  )
2server = function(input, output){
  [...]
}
3shinyApp(ui, server)
1
Define the ui
2
Define the server
3
Shine

3 UI

3.1 Input

sliderInput()     # Slider input widget
numericInput()    # Numeric input control
selectInput()     # Select list input control
checkboxInput()   # Checkbox input control
checkboxGroupInput()
dateInput()       # Date input
fileInput()       # File upload control
radioButtons()    # Radio buttons
textInput()       # Text input control
passwordInput()   # Password input control
actionButton()    # Action button
dateInput()       # Date input
dateRangeInput()  # Input a data range

Complete list (with code)

3.2 Output

plotOutput()          # Plot output element
textOutput()          # Text output element
verbatimTextOutput()  # Verbatim text output element
tableOutput()         # Table output element
dataTableOutput()     # Data table output element
htmlOutput()          # HTML output element
uiOutput()            # user interface element
downloadButton()      # Download button
Progress()            # Reporting progress (object oriented)
withProgress()        # Reporting progress (functional)
outputOptions()       # Set options for an output object

4 Server

renderPlot()        # Plot output
renderText()        # Text output
renderPrint()       # Printable output
renderTable()       # Table output
renderDataTable()   # Data table output
renderImage()       # Image file output
renderUI()          # UI output
downloadHandler()   # File downloads

5 Complete flow

5.1 UI

5.1.1 Input definition

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1)
)

5.1.2 Output definition

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1), 
  
  verbatimTextOutput(
  outputId = "myOutput"
)
  
)

5.2 Server

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1), 
  
  verbatimTextOutput(
  outputId = "myOutput"
)
  
)

server = function(input, output) {
  output$myOutput = renderText({
    paste(paste("This is my choice"), input$mySelection)
  })
}

5.3 All together

ui = fluidPage(
selectInput(inputId = "mySelection", 
            label = h3("Select box"),
    choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),
    selected = 1), 
  
  verbatimTextOutput(
  outputId = "myOutput"
)
  
)

server = function(input, output) {
  output$myOutput = renderText({
    paste(paste("This is my choice"), input$mySelection)
  })
}

shinyApp(ui, server)  

6 Next episode

Here you can download a zip folder containing basic code apps.

The sniny lessons are availables at the following links:

  1. Basics
  2. Reactive events
  3. Data upload
  4. Download