The body

1. The body

We will now look at the body of the UI.

2. An overview

This is where the bulk of the UI will be defined. Typically, this is also where we will place the inputs and outputs. These are like the dishes and orders at a restaurant. The server communicates the order to the kitchen and then delivers the desired dishes. The body is defined by dashboardBody and is conventionally stored as body.

3. Wireframing

Let's do some wireframing, where we decide on the structure of a product before adding in the contents. This is like the zeppelin, whose metal frames are first constructed, before internal and external parts are furnished. Carrying out wireframing in a shinydashboard means to first decide on the placements of individual objects. Before we can carry out wireframing, we need to understand how objects are positioned in a shinydashboard.

4. Adding rows and boxes: empty boxes

We can add rows with fluidRow, and add boxes with box. In this example, we have created two rows each containing some boxes.

5. Adding rows and boxes: content in boxes

Within each box, we can add content. Let's put a plotOutput in the top left box, and a selectInput in the bottom right box.

6. Prevent overflowing boxes

By default, each box will occupy 6 units out of the total horizontal space which has width 12. There will be an overflow if the total width of boxes placed exceeds this limit. To prevent overflowing, set the width for each box. We shall set the widths of the boxes in the first row to 3, 5 and 4. While we can choose not to add boxes, it is recommended because it allows for a cleaner look, with clearer demarcations between objects.

7. valueBox and infoBox

There are also special boxes that display small amounts of information. The first is valueBox, which has two main arguments, the value and subtitle. The second is infoBox, which has two main arguments, the value and title. See that these boxes differ in the way they present information. valueBox has a subtitle that provides a description, while infoBox typically contains a title which is truncated if it exceeds the box width.

8. valueBoxOutput and infoBoxOutput

There are also nonstatic variations of the valueBox and infoBox called valueBoxOutput and infoBoxOutput. They display information that can interact with user input. These are the output functions seen in a shinyApp that can interact with user inputs. There are also the renderValueBox and renderInfoBox which are placed in the server. Finally, valueBox and infoBox are required within the render functions.

9. Analogy between valueBoxOutput and plotOutput

Let's look at an analogy between valueBoxOutput and plotOutput to better distinguish the various box functions that we have seen so far. Both plotOutput and valueBoxOutput are placed in the UI. In both cases, the position of the output function determines its position in the rendered dashboard. Just as renderPlot is required for plotOutput, renderValueBox is required for valueBoxOutput. In both cases, the render function is placed in the server. The difference, then, is that renderPlot contains a ggplot object, while renderValueBox contains a valueBox object. This same analogy can be made for infoBoxOutput.

10. Linking the sidebar and body

Recall earlier when we had a sidebar with two buttons to go between two pages called "charts" and "stats". To link this to the body, we will need to add tabItems. Within tabItems, each page is defined by tabItem. The labels in each menuItem-tabItem pair must match.

11. Tabs in the body

A set of tabs can also be defined using tabsetPanel where each tab is defined by tabPanel. This is not to be confused with tabItems and tabItem. Here, we have defined a set of three tabs using tabsetPanel. Let's also define the server to render the valueBoxOutput's.

12. Let's practice!

Let's now do some wireframing!

Create Your Free Account

By continuing, you accept our Terms of Use, our Privacy Policy and that your data is stored in the USA.