Components of a shinydashboard UI

The restaurant analogy was revisited in the video. There, you saw that a shinydashboard is really a type of shinyApp with a dashboard output. As such, it can be broken down into the UI and server parts. Additionally, the UI of a shinydashboard can be broken down into smaller components.

Understanding what these components are will help you piece together your first shinydashboard.

Which of these functions define the UI of a shinydashboard?

This exercise is part of the course

Building Dashboards with shinydashboard

Hands-on interactive exercise

Turn theory into action with one of our interactive exercises

This exercise is part of the course

Building Dashboards with shinydashboard

BeginnerSkill Level

4.7+

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

Current Exercise

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 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