Components of a shinydashboard

1. Components of a shinydashboard

We have just seen what a shinyApp is. We will now look at a shinydashboard.

2. What is a shinydashboard?

A shinydashboard is really just a shinyApp with a dashboard output. We have a UI and a server, and a shinyApp function to glue them together as well. The main difference is in how the user interface is defined. In a shinydashboard, the dashboardpage function is used instead of fluidPage.

3. The user interface (UI)

A shinydashboard is slightly more complicated because it requires more components in its ui. These are the header, sidebar and body. In code, they are defined by dashboardHeader, dashboardSidebar and dashboardBody functions. We will revisit these codes shortly. A shinydashboard UI is pieced together using dashboardPage, where each component is placed in sequence as seen here.

4. A preview of the UI

Here is a preview of what these components look like. Firstly, we see the header at the top of the dashboard. Secondly, the sidebar on the left, which can contain several buttons. Finally, the body makes up the rest of the shinydashboard.

5. Revisiting the restaurant analogy

Let's revisit the restaurant analogy. In the same way, the UI is like the restaurant and the server is like the waiter. As we saw earlier, the UI can be broken down into smaller components, and each of these can be likened to parts of the restaurant.

6. The UI as a multi-course meal

In a shinydashboard UI, the header is like the signboard of the restaurant, and the side bar is like a list of the individual courses in a multi-course meal. The body contains outputs and inputs which are like the restaurant dishes and customer orders. At any time, only one course will be presented to a customer, but an individual set of instructions can be given for each course. We can also liken each course to a shinyApp which has its own set of inputs and outputs. One benefit of using a shinydashboard, then, is that we can have multiple sets of inputs and outputs that can be accessed from the side bar.

7. An empty shinydashboard

To get started on the code, we need to first import both the shiny and shinydashboard libraries. As a simple example, let us now construct an empty shinydashboard. Let's first set up the UI, which comprises of the header, side bar and body. The header is defined by dashboardHeader, where the dashboard title is defined by the title argument. Let us set up a dashboard called "My first dashboard". Let's also store this as header for later use. Next, the side bar is defined by dashboardSideBar, where its arguments define the appearance of the side bar. For now, we'll store an empty sidebar as sidebar. Finally, the body is defined by dashboardBody. Pretty intuitive so far right? Let's store an empty body as body. Altogether, these make up the UI. To define the UI in code, we then need to place the header, side bar and body in the dashboardPage function. For consistency, we shall stick to the convention used earlier, and store this as ui.

8. Rendering the shinydashboard

To render the shinydashboard, we will also need to define the server in the same way as we did for a shinyApp. Finally, we can glue the ui and server together using the shinyApp function. Remember, a shinydashboard is really just a shinyApp, which is why the same shinyApp function is also used here.

9. Rendering the shinydashboard

Upon running the code, an empty shinydashboard with the title "My first dashboard" is rendered.

10. Let's practice!

Now that you have seen how a shinydashboard can be put together, let's practice!

Create Your Free Account

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