Social Science Computing Cooperative

7 Layouts

In all the apps we have made so far, we have simply wrapped a series of objects in fluidPage() to create ui. fluidPage() works well enough, and it rescales content to the browser window size (in contrast to fixedPage()). We can and should continue to use fluidPage(), but instead of simply listing our inputs and outputs inside, we can use combinations of *Panel() and *Layout() functions, as well as HTML tags, to make our app more aesthetically pleasing and user-friendly.

7.1 *Panel() and *Layout() functions

A panel is a visually distinct unit that contains one or more objects. We saw panels earlier in the inputs app, where inputs and their code were grouped together in a light gray box created by wellPanel().

We can use conditionalPanel() to show or hide inputs or other panels only if a certain condition is true. An example of this can be seen in the colorpicker app, where a different number of colourInput() are shown depending on the number selected in radioButtons().

Inputs, outputs, and panels can be arranged with one or more of shiny’s several *Layout() functions. Layouts allow us to arrange objects horizontally, vertically, or some combination of the two.

Shiny layouts are best understood if they can be seen. Visit the app linked below for examples of several layouts, which have been arranged into a larger tabbed page with navbarPage().

Layout Examples

7.2 HTML Tags

We may want to insert static text (i.e., not produced by renderText()) alongside our app, explaining the app’s functions or the source of the data. For this task, we can use HTML tags to display text and customize its appearance. All our HTML tags should be placed in ui in the order we want them to appear. A number of tags are in the htmltools package and are also loaded by shiny. (See ?builder.)

Depending on where you host your app, the title of the webpage when you visit your Shiny app may default to its URL. To change this, use the title tag, tags$title(). Supply it with a character string, such as tags$title("My First App"). The tags$ prefix is required for title() but optional for the tags in the table below, so they are shown without it.

A few useful tags are as follows:

Tag Example Code
Paragraph

Text

 p("Text")
Header 1

Text

 h1("Text")
Header 2

Text

 h2("Text")
Header 3

Text

 h3("Text")
Header 4

Text

 h4("Text")
Header 5
Text
 h5("Text")
Header 6
Text
 h6("Text")
Link Text a("Text", href = "https://sscc.wisc.edu/")
Pre-formatted text (code block) 
Text
 pre("Text")
Inline code Text code("Text")
Strong text (bold) Text strong("Text")
Emphasized text (italicized) Text em("Text")

The hr() tag can be used to visually separate vertically arranged objects with a horizontal line:

p("Hello")
hr()
p("Hello again.")

Hello

Hello again.

7.3 Simple is Best

When customizing the layout of our Shiny apps, we should be mindful of how we will publish the app. Some layouts will rearrange themselves when the window is small enough, which is the case when embedding an app in another webpage (see Embedding Shiny Apps). The limited window width of the frame will change the layout of the app. To see this, try resizing the window while you browse the different tabs of layouts.

Additionally, if we are embedding our apps in webpages that introduce the app, we might not need to include text or a title within the app.

7.4 Exercises

Create Your Own App:

  1. Choose a layout. Make sure your app responds well when shrinking to mobile view (decreasing the browser window width).

  2. Add at least one header, some text, and a title to ui in your Shiny app.