In this section, we will look at putting together your first dashboard. We will cover the code structure for a Shiny dashboard, and we will also look at putting together a simple example.

To make a Shiny dashboard, you will need to download the package using the install.packages command. Note that the package is then loaded in the preamble of the UI to our file.

There are two methods of structuring the code file for a Shiny dashboard and it also requires the setup of three components: dashboardHeader, dashboardSidebar, and dashboardBody. Using the first method, these three components can be passed to dashboardPage very simply, as shown here:

dashboardPage( 
  dashboardHeader(), 
  dashboardSidebar(), 
  dashboardBody(), 
)

Using the second method, header, sidebar, and body can all be set up separately and then passed to dashboardPage, as shown here:

header = dashboardHeader() 
sidebar = dashboardSidebar() 
body = dashboardBody() 
dashboardPage(header, sidebar, body) 

I would strongly advise always using the second method in any decent-sized application, because it simplifies the code structure, but you may have your own preference on this matter. If you feel the other method is better, you can write the code in that way.

Let's have a look at the application. As you can see in the following screenshot, this is the Movies explorer application we've been using throughout this book, but rewritten as a dashboard:

You can see the header at the top left, with a title, the controls over on the left, and the output on the right. So far, it looks like a standard sidebar layout, showing the application. As we work through this chapter, we will add more and more stuff to make it really powerful and attractive.

The server.R code file is the same as it has been throughout when we've used this application, and we will not go into it now. As we already mentioned in the previous chapters, the ui.R file loads the shinydashboard package, as shown here:

library(shinydashboard) 

The header is easily defined using the title argument to give the application a title:

header = dashboardHeader(title = "Movies explorer")

The width of the title can also be set, and it is also possible to turn off the header completely. You can type ?dashboardHeader into the console for more information. The sidebar is very easily set up, just as a sidebar in a sidebar layout application, with inputs listed within the dashboardSidebar function:

sidebar = dashboardSidebar( 
  sliderInput("year", "Year", min = 1893, max = 2005, 
              value = c(1945, 2005), sep = ""), 
  textInput("title", "Title"), 
  selectInput("genre", "Which genre?",  
              c("Action", "Animation", "Comedy", "Drama",  
                "Documentary", "Romance", "Short")), 
 
  sidebarMenu( 
    menuItem("Graph", tabName = "graph"), 
    menuItem("Table", tabName = "table") 
  ) 
) 

A tab-like output is achieved using the sidebarMenu function, which creates buttons within the sidebar, and these can be used to select different outputs. In the preceding code example, we use the sidebarMenu function and then, within it, set up individual buttons with menuItem. Each is given a label and a name. And this is the name that we referred to in the body of the dashboard, to determine which output is selected by which button. Now, for some types of dashboard design, no inputs will be included on the sidebar, and they will all be placed in the dashboard body with the outputs. This is not done in this case, partly because of the way the application works, but also to demonstrate both methods for placing inputs, on the sidebar and in the body.

The body is set up, with tab items wrapping individual tab item functions. Tab names are taken from the names we already set up in the sidebar. You can see graph and table, referring to the tab names already set up within the sidebar in the following code example:

body = dashboardBody( 
  tabItems( 
    tabItem(tabName = "graph", 
            plotOutput("budgetYear") 
    ), 
    tabItem(tabName = "table", 
            tableOutput("moviePicker"), 
            uiOutput("listMovies") 
    ) 
  ) 
)

We then give the relevant output within each time item. We have the graph in the first tab, and the table in the second tab. After defining our header, sidebar, and body, we now use dashboardPage to put them all together:

dashboardPage(header, sidebar, body)