Mastering Shiny

Chapter 2. Basic UI

Introduction

Now that you have a basic app under your belt, we can start to explore the details that make Shiny tick. As you saw in the previous chapter, Shiny encourages separation of the code that generates your user interface (the frontend) from the code that drives your app’s behavior (the backend).

In this chapter, we’ll focus on the frontend and give you a whirlwind tour of the HTML inputs and outputs provided by Shiny. This gives you the ability to capture many types of data and display many types of R output. You don’t yet have many ways to stitch the inputs and outputs together, but we’ll come back to that in Chapter 6.

Here I’ll mostly stick to the inputs and outputs built into Shiny itself. However, there is a rich and vibrant community of extension packages, like shinyWidgets, colourpicker, and sortable. Nan Xiao maintains an active and comprehensive list of other Shiny packages.

As usual, we’ll begin by loading the Shiny package:

library(shiny)

Inputs

As we saw in the previous chapter, you use functions like sliderInput(), selectInput(), textInput(), and numericInput() to insert input controls into your UI specification. Now we’ll discuss the common structure that underlies all input functions and give a quick overview of the inputs built into Shiny.

Common Structure

All input functions have the same first argument: inputId. This is the identifier used to connect the frontend with the backend: if your UI has an input with ID "name", the server ...