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:
#ui.R
shinyUI(navbarPage("Application", tabPanel("Panel 1"), tabPanel("Panel 2"), tabPanel("Panel 3") ))
#server.R
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.
#ui.R
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.
#ui.R
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:
#ui.R
mainPanel( plotOutput("plot") )
#server.R
output$plot <- renderPlot({ plot(cars, type=input$plote) })

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.
#ui.R
tabPanel("Summary", verbatimTextOutput("summary") )
#server.R
output$summary <- renderPrint({ summary(cars) })

Exercise 6

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

Sub-Components

Sometimes upu may want to add “sub-components” in your tabPanel(). This can be done with navbarMenu() function. Look at the example.
#ui.R
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.”

Navlists

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():
#ui.R
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().