The body, and completing the UI

You have set up the header and sidebar Now, you can set up the body.

This is a crucial part of the wireframing process, since it will help you decide where to position your outputs and inputs in their desired positions within the main body of the dashboard.

In this exercise, you will place several outputs and inputs in the dashboard. In doing so, you will obtain all three components of the user interface, which will be put together in dashboardPage().

This exercise is part of the course

Building Dashboards with shinydashboard

Hands-on interactive exercise

Have a go at this exercise by completing this sample code.

header <- dashboardHeader(title = "Soccer tournament")

sidebar <- dashboardSidebar(
  sidebarMenu(
    menuItem("Matches", tabName = "matchtab", icon = icon("futbol")), 
    menuItem("General statistics", tabName = "statstab", icon = icon("chart-line")) 
  )
)

body <- dashboardBody(tabItems(
  tabItem(tabName = "matchtab", 
  fluidRow(selectInput("match", "Match number", choices = 1:nrow(soccer))) 
         ),
  # See that the second tab should contain three sub-tabs
  ___(tabName = ___, 
          ___(tabPanel("Goals"), 
                 ___("Yellow cards"),
                 ___(___))
         )
))

Edit and Run Code

This exercise is part of the course

Building Dashboards with shinydashboard

BeginnerSkill Level

4.8+

Start Course for Free

Before you build a shinydashboard, you will first need to understand what a shinyApp is. In this chapter, you will learn what a shinyApp is, and learn what goes into a shinyApp. At the end of this chapter, you will be able to render your own shinyApp.

Exercise 1: Getting started with shiny apps Exercise 2: Parts of a shinyApp Exercise 3: An empty shinyApp Exercise 4: Types of input Exercise 5: Practicing sliderInput Exercise 6: Inserting multiple inputs Exercise 7: checkboxInput and checkboxGroupInput Exercise 8: Types of output Exercise 9: textOutput with interactions Exercise 10: Dropdown menus Exercise 11: Your first shinyApp

In the previous chapter, you learned about shiny apps. In this chapter, you will realize that a shinydashboard is really just another shiny app but with more tweakable features. The same outputs and inputs discussed in the previous chapter can be used in exactly the same manner here. You will then learn to carry out some simple wire-framing for a dashboard, during which you can decide where to position outputs and inputs in the dashboard.

Exercise 1: Components of a shinydashboard Exercise 2: Components of a shinydashboard UI Exercise 3: Your first (empty) dashboard Exercise 4: The header and sidebar Exercise 5: Header and sidebar functions Exercise 6: Setting a header Exercise 7: Setting a sidebar Exercise 8: The body Exercise 9: Wireframing with boxes Exercise 10: Wireframing Exercise 11: Your first shinydashboard Exercise 12: Helper functions Exercise 13: Header and side bar settings Exercise 14: The body, and completing the UI

Current Exercise

Exercise 15: Building your first dashboard

In this chapter, you will learn to further enhance your shinydashboard by inserting interactive elements. These will include graphs, geospatial maps, and tables that dashboard users can interact with in real-time.

Exercise 1: Interactive plots with plotly Exercise 2: Creating your own plotly plots Exercise 3: Understanding plotly limitations Exercise 4: Geospatial maps with sf Exercise 5: Types of sf objects Exercise 6: sf plots with plot()Exercise 7: sf plots with ggplot Exercise 8: Geospatial maps with leaflet Exercise 9: Layers of a leaflet map Exercise 10: Creating your first leaflet map Exercise 11: Interactive elements in a shinydashboard Exercise 12: Creating some helper functions Exercise 13: Your first shinydashboard with interactive elements

Now that you are familiar with shinydashboard, we can now add design elements. We will be able to change background colors, modify box dimensions and so on. We will also discuss some basic principles of good UI/UX. Finally, we will show how statuses and CSS formatting can be utilized.

Exercise 1: Good UI/UX practices Exercise 2: Understanding UI/UX principles Exercise 3: Wireframing with UI/UX principles Exercise 4: Statuses, colors and skins Exercise 5: Setting statuses Exercise 6: Setting colors Exercise 7: Changing shinydashboard skins Exercise 8: Customization with CSS formatting Exercise 9: Good UI/UX practices and a warm-up Exercise 10: Statuses and completing the UI Exercise 11: Customize your shinydashboard with CSS Exercise 12: Wrap-up