Chapter 3 Basic UI

Exercise 3.2.8.1

When space is at a premium, it’s useful to label text boxes using a placeholder that appears inside the text entry area. How do you call textInput() to generate the UI below?


placeholder

Solution. Solution

Looking at the output of ?textInput, we see the argument placeholder which takes:

A character string giving the user a hint as to what can be entered into the control.

Therefore, we can use the textInput with arguments as shown below to generate the desired UI.

Exercise 3.2.8.2

Carefully read the documentation for sliderInput() to figure out how to create a date slider, as shown below.


placeholder

Exercise 3.2.8.3

If you have a moderately long list, it’s useful to create sub-headings that break the list up into pieces. Read the documentation for selectInput() to figure out how. (Hint: the underlying HTML is called <optgroup>.)

Solution. Solution

We can make the choices argument a list of key-value pairs where the keys represent the sub-headings and the values are lists containing the categorized elements by keys. As an illustration, the following example separates animal breeds into two keys (categories): “dogs” and “cats”.

If you run the snippet above in the console, you will see the HTML code needed to generate the input. You can also see the <optgroup> as hinted in the exercise.

Exercise 3.2.8.4

Create a slider input to select values between 0 and 100 where the interval between each selectable value on the slider is 5. Then, add animation to the input widget so when the user presses play the input widget scrolls through automatically.

Solution. Solution

We can set the interval between each selectable value using the step argument. In addition, by setting animate = TRUE, the slider will automatically animate once the user presses play.

Exercise 3.2.8.5

Using the following numeric input box the user can enter any value between 0 and 1000. What is the purpose of the step argument in this widget?

Solution. Solution

The step argument is the amount by which the numericInput value is incremented (resp. decreased) when the user clicks the up (resp. down) arrow. In the previous example, when the user clicks the up (resp. down) arrow the numeric value will increase (resp. decrease) by 50. Note: by using a numericInput the user still has the ability to type any number.

Exercise 3.3.5.1

Re-create the Shiny app from the plots section, this time setting height to 300px and width to 700px.

Solution. Solution

The function plotOutput can take on static width and height arguments. Using the app from the plots section, we only need to add the height argument and modify the width.

Exercise 3.3.5.2

Update the options for renderDataTable() below so that the table is displayed, but nothing else (i.e. remove the search, ordering, and filtering commands). You’ll need to read ?renderDataTable and review the options at https://datatables.net/reference/option/.

Exercise 3.4.6.1

Create an app that contains two plots, each of which takes up half the app (regardless of what size the whole app is)

Solution. Solution

When creating the layout of a shiny app, you can use the fluidRow function to control the width of the objects it contains. This function can have columns and such columns can be set to have widths ranging from 1-12. Note that columns width within a fluidRow container should add up to 12.

For our exercise, we need two columns of 50% width each, i.e., we should set the width of each column to 6.

Exercise 3.4.6.2

Modify the Central Limit Theorem app so that the sidebar is on the right instead of the left.

Solution. Solution

Looking at ?sidebarLayout we can simply set the position argument to right. We only need to modify the UI of the app.

Exercise 3.4.6.3

Browse the themes available in the shinythemes package, pick an attractive theme, and apply it to the Central Limit Theorem app.