Shiny Application Layouts exercises part 3

[This article was first published on R-exercises, and kindly contributed to R-bloggers]. (You can report issue about the content on this page here)
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Shiny Application Layouts-Navbar Page

In the third part of our series we will build another small shiny app but use another UI.

Specifically we are going to create a Shiny application that includes more than one distinct sub-components each with its own characteristics.

For our case we are going to use the cars dataset to create a small app.

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.

Shiny Installation

In order to create the app we have to install and load the package “shiny”.

Exercise 1

Install and load shiny.

Navbar Pages

The navbarPage() function creates an application with a standard Navbar at the top. For example:
shinyUI(navbarPage("Application", tabPanel("Panel 1"), tabPanel("Panel 2"), tabPanel("Panel 3") ))
function(input, output, session) {}

Exercise 2

Create a Navbar page with three panels. Name the app “Cars” and the panels “Plot”, “Summary” and “Other” respectively.

Now we can work distinctly in each panel. First of all let’s put a sidebar in the first one, like the example below.
library(shiny) library(markdown) shinyUI(navbarPage("App", tabPanel("Panel 1", sidebarLayout( sidebarPanel( ), mainPanel( ) )), tabPanel("Panel 2"), tabPanel("Panel 3") ))

Exercise 3

Add a sidebar in the tabPanel “Plot”.

Now we will add in the sidebar a radiobutton from which the user can choose to see either the scatter plot or the line chart. Look at the example below.
radioButtons("plote", "Plot ", c("Scatter"="s", "Line"="l","Bar"="b") )

Exercise 4

Add radioButtons() with two buttons inside the sidebar. Name it “Plot”. The first will be a scatter chart and the second a line chart.

It is to time to create the two charts as the example:
mainPanel( plotOutput("plot") )
output$plot <- renderPlot({ plot(cars, type=input$plote) })

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 mainPanel() create the two plots. HINT: Use plotOutput().

In the tabPanel() “Summary” we will print the descriptive statistics of our dataset via verbatimTextOutput() like the example below.
tabPanel("Summary", verbatimTextOutput("summary") )
output$summary <- renderPrint({ summary(cars) })

Exercise 6

Print the summary statistics of cars’ dataset in the tabPanel() “Summary”. HINT:Use renderPrint().


Sometimes upu may want to add “sub-components” in your tabPanel(). This can be done with navbarMenu() function. Look at the example.
shinyUI(navbarPage("Application", tabPanel("Panel 1"), tabPanel("Panel 2"), navbarMenu("More", tabPanel("Sub-Panel A"), tabPanel("Sub-Panel B")) ))

Exercise 7

In the tabPanel() other create two additional tabPanel(). Name the first “Data Table” and the second “Description”.

Exercise 8

In the first additional tabPanel() “Data table” place the Data Table of your dataset. HINT: Use datatableOutput() and renderDataTable().

Exercise 9

In the “Description” Panel describe your dataset.”The data give the speed of cars and the distances taken to stop. Note that the data were recorded in the 1920s.”


The navlistPanel() may be a good alternative to tabsetPanel() when you have many panels. A navlist presents the menu itams as a sidebar list. Here’s an example of a navlistPanel():
shinyUI(fluidPage( titlePanel("Application"), navlistPanel( "Header A", tabPanel("Item 1"), tabPanel("Item 2"), "Header B", tabPanel("Item 3"), tabPanel("Item 4"), "-----", tabPanel("Item 5") ) ))

Exercise 10

Transform you app by using navlistPanel() instead of navbarPage().

To leave a comment for the author, please follow the link and comment on their blog: R-exercises. offers daily e-mail updates about R news and tutorials about learning R and many other topics. Click here if you're looking to post or find an R/data-science job.
Want to share your content on R-bloggers? click here if you have a blog, or here if you don't.

Never miss an update!
Subscribe to R-bloggers to receive
e-mails with the latest R posts.
(You will not see this message again.)

Click here to close (This popup will not appear again)