Building Shiny App exercises part 3

ADD CONTROL WIDGETS
Welcome to the third part of our series. In this part you will learn how to build and place inside your app the rest of the widgets which were mentioned in part 2.
More specifically we will analyze: 1) helptext, 2) numericInput, 3) radioButtons, 4) selectInput, 5) sliderInput and 6) textInput.
As you already know from part 2 reactivity will be added in the upcoming parts of our series so this is something that you do not have to worry about.
Follow the examples below to understand the logic behind the widgets’ functions and then enhance the app you created in part 1 by practising with the exercise set we prepared for you.
Firstly, we will add all the kinds of the widgets in our app, for educational reasons and later we will decide which of them is practical to keep.Let’s start!

Answers to the exercises are available here.

If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.

To begin with let’s create the space inside our sidebarPanel in order to put in there the rest of our widgets.

Exercise 1

Use the function fluidrow to make sure that all the elements we are going to use will be in the same line. To do this put fluidrow just under the “Menu” in your sidebarPanel and close its parenthesis just before the submibutton (excluding the two br).

HELP TEXT

In the example below we create a UI with a helpText.
# ui.R
shinyUI(fluidPage( titlePanel("Widgets"), h3("Help Text"), helpText("Text that is used to provide some extra details to the user.")))

# server.R
shinyServer(function(input, output) { })

Exercise 2

Place a helpText exactly under the actionButton, name it “Help Text” and as text add:”For help”. Hint: Use h4.

Exercise 3

Now use column function in order to decide the column width for every row and put the two widgets in the same line. To do this place the column function twice. Firstly place it just before the “Actionbutton” title with width = 6 and close its parenthesis exactly after the label “Perform”. Do the same for the helpInput. Both of the column functions must be inside the same fluidrow.

NUMERIC INPUT

In the example below we create a UI with a numericInput.
# ui.R
shinyUI(fluidPage( titlePanel("Widgets"), numericInput("num", label = h3("Numeric Input"), value = 1) ))

# server.R
shinyServer(function(input, output) { })

Exercise 4

Put a numericInput under helpText,in the same row with submitButton. Name it “numer”, give it “Numeric Input” as label and value = 10. Hint: Use h4, fluidrow and column.

RADIO BUTTONS

In the example below we create a UI with a radioButtons.
#ui.R
shinyUI(fluidPage( titlePanel("Widgets"), radioButtons("radio", label = h3("Radio buttons"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3),selected = 1) ))

#server.R
shinyServer(function(input, output) { })

Exercise 5

Add radioButtons under numericInput, in the same row with checkBoxInput. Name it “radiobuttons”, put as label “Radio Buttons” and give it two choices with no default. Hint: Use h4, fluidrow, column and choices.

Exercise 6

Now put “2” as the default of the choices. Hint: Use selected.

SELECT INPUT

In the example below we create a UI with a selectInput.
# ui.R
shinyUI(fluidPage( titlePanel("Widgets"), selectInput("select", label = h3("Select Box"), choices = list("Choice 1" = 1, "Choice 2" = 2, "Choice 3" = 3), selected = 1) ))

#server.R
shinyServer(function(input, output) { })

Exercise 7
Place under radiobuttons and in the same row with checkBoxGroupInput a selectinput. Its name should be “select”, its label “Select Box” and you should give it two choices with the second one as default. Hint: Use h4, fluidrow, column, choices and selected.

SLIDER INPUT

In the example below we create a UI with two sliderInput.
# ui.R
shinyUI(fluidPage( titlePanel("Widgets"), sliderInput("slider1", label = h3("Sliders"), min = 0, max = 10, value = 5), sliderInput("slider2", "", min = 0, max = 10, value = c(3, 7)) ))

#server.R
shinyServer(function(input, output) { })

Exercise 8

Under the selectInput and in the same row with the dateInput place a sliderInput with name = slider1, label = “Sliders”, min = 0, max = 100 and value =50. Hint: Use fluidrow, columns and h4.

Exercise 9

Replace the value with a default range “10-90” and see the difference.

TEXT INPUT

In the example below we create a UI with a textInput.
# ui.R
shinyUI(fluidPage( titlePanel("Widgets"), textInput("text", label = h3("Text Input"), value = "Text...")) )

#server.R
shinyServer(function(input, output) { })

Exercise 10

Finally put a textInput under sliderInput and in the same row with the dateRangeInput. Name it “text”, put as label “Text Input” and as value “Some Text”. Hint: Use fluidrow, column and h4.