Shiny Application Layouts Exercises (Part-8)

Shiny Application Layouts – Dynamic UI

In the eightth part of our series we will see how we can build a user interface with dynamically generated components.

The UI components are generated on the server side with the use of renderUI() and are displayed with uiOutput() on the ui side. Every time a new command is sent by the user, it replaces the previous command.

This part can be useful for you in two ways.

First of all, you can see different ways to enhance the appearance and the utility of your shiny app.

Secondly you can make a revision on what you learnt in “Building Shiny App” series as we will build basic shiny staff in order to present it in the proper way.

Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!

Answers to the exercises are available here.

Application Contextt

First of all let’s build the skeleton of our app like the example below.
#ui.R
fluidPage( titlePanel("Title"), fluidRow( column(4,wellPanel()), column(4,wellPanel()), column(4,wellPanel())))
#server.R
function(input, output) {}

Exercise 1

Create the initial fluid Page with a title. HINT: Use fluidPage() and titlePanel().

Exercise 2

Create a row, separate it with columns of size = 3 and add a well Panel in each one of them. HINT: Use fluidRow(), column() and wellPanel().

Below is an example of a selectInput() from which the user is going to choose the dynamic component he wants.
#ui.r
selectInput("input_type", "Input type", c("slider", "text", "numeric", "checkbox", "checkboxGroup", "radioButtons", "selectInput", "selectInput (multi)", "date", "daterange" ) )

Exercise 3

Add a selectInput() in the first well Panel with: slider input, text input, numeric input, check box, radio buttons and date.

The uiOutput() generates the dynamic UI component.
#ui.R
uiOutput("ui")

Exercise 4

In the second well Panel add the function that is going to generate your ui output.

In the third well Panel we are going to create two “boxes”. The first one will display the type of the input that the user chooses every time while the second the value of this input.
Both of them will be displayed as text. So we have to use verbatimTextOutput() and use tags for the titles. Look at the ui side example below:
#ui.R
tags$p("Title 1:"), verbatimTextOutput("input_title_1"), tags$p("Title 2:"), verbatimTextOutput("input_title_2")

< aside class='stb-icon'>

Learn more about Shiny in the online course R Shiny Interactive Web Apps – Next Level Data Visualization. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).

Exercise 5

In the third well panel should automatically be typed the type of the input of your choice as long as the value of this input. Create only the ui side. HINT: Use verbatimTextOutput().

Exercise 6

Name the two components that you just created. HINT: Use tags.

Reactivity

Now let’s go to the server side to make things reactive like this:
#server.R
output$ui <- renderUI({})

Exercise 7

Put your app in a reactive context. HINT: Use renderUI().

Now we have to connect the dynamic components we created in Exercise 3 with their server side. Below is an example:
#server.R
"slider" = sliderInput("dynamic", "Dynamic", min = 1, max = 100, value = 50), "text" = textInput("dynamic", "Dynamic", value = "EXAMPLE"), "numeric" = numericInput("dynamic", "Dynamic", value = 10), "checkbox" = checkboxInput("dynamic", "Dynamic", value = TRUE), "radioButtons" = radioButtons("dynamic", "Dynamic", choices = c("Option 1" = "option1", "Option 2" = "option2"), selected = "option1" ), "date" = dateInput("dynamic", "Dynamic"))

Exercise 8

Create the server side of the dynamic components you created in Exercise 3. Put values of your choise but make sure they are connected with the ui side.

Exercise 9

Display the name of the dynamic component of your choice. HINT: Use renderText().

Exercise 10

Display the value of the dynamic component that you chose. HINT: Use renderPrint().