Skip to main content

University of Wisconsin–Madison

Social Science Computing Cooperative

Search

• Accounts
  • Request an SSCC Account
  • Reset your password if you’ve forgotten it
  • Change your SSCC Password
  • Set your preferred email address
  • Request project space
  • Set up Duo MFA
• Get Help
• Statistical Consulting
• Knowledge Base
• Training
• Winstat
• About the SSCC
  • Who We Are
  • Join the SSCC
  • SSCC Staff
  • SSCC Policies
  • SSCC Services
  • SSCC Software
  • SSCC News

• Join the SSCC

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.