Shiny Application Layouts – Shiny Themes

In the last part of the series we will check out which themes are available in the shinythemes package. More specifically we will create a demo app with a selector from which you can choose the theme you want.

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 and in this 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.

Create the App.

In order to see how themes affect the application components ,we have seen until now, we need to create them.

As we are going to use tags here, a good idea is to use taglList() in order to create our app. TagList() is ideal for users who wish to create their own sets of tags.

Let’s see an example of the skeleton of our application and then create our own step by step before applying to it the theme selector.
#ui.R
tagList( navbarPage( "Title", tabPanel("Navbar 1", sidebarPanel( sliderInput("slider","Slider input:", 1, 100, 50), tags$h5("ActionButton:"), actionButton("action", "Action") ), mainPanel( tabsetPanel( tabPanel("Table", h4("Table"), tableOutput("table")), tabPanel("VText", h4("Verbatim Text"), verbatimTextOutput("vtxt")), tabPanel("Header", h1("Header 1"), h2("Header 2")) ) ) ), tabPanel("Navbar 2") ))
#server.R
function(input, output) { output$vtxt <- renderText({ paste(input$slider) }) output$table <- renderTable({ iris }) }

Exercise 1

Create a UI using tag List with the form of a Navbar Page and name it “Themes”. HINT: Use tagList() and navbarPage().

Exercise 2

Your Navbar Page should have two tab Panels named “Navbar 1” and “Navbar 2”. HINT: Use tabPanel().

Exercise 3

In “Navbar 1” add sidebar and main panel. HINT: Use sidebarPanel() and mainPanel().

Exercise 4

Create three tab panels inside the main panel. Name them “Table”, “Text” and “Header” respectively. HINT: Use tabsetPanel() and tabPanel().

Exercise 5

In the tab panel “Table” add a table of the iris dataset. Name it “Iris”. HINT : Use tableOutput() and renderTable({}).

Exercise 6

In the tab panel “Text” add verbatim Text nad name it “Vtext”. HINT: Use verbatimTextOutput().

Exercise 7

Add a slider and an actionbutton in the sidebar. Connect the slider with the “Text” tab panel. Use tags to name the actionbutton. HINT: Use sliderInput(),actionButton(), renderText() and tags.

Exercise 8

In the tab panel “Header” add two headers with size h1 and h2 respectively.

Shinythemes

Exercise 9

Install and load the package shinythemes.

Exercise 10

Place themeSelector() inside your tagList() and then use different shiny themes to see how they affect all the components you created so far.