Get startedGet started for free

Wireframing

Let's revisit the previous example of the dashboard for analysis results a soccer tournament. In the previous exercises, you have already set up the header and sidebar.

In particular, a button in the sidebar is defined by menuItem() and are contained within sidebarMenu(). You may have noticed these buttons do nothing at this point. You will now link these sidebar buttons to a different page in the body of the UI. This is still part of the wireframing process, where you are still deciding on the positions of each object. Each page within the body is defined by tabItem(), and must be contained within tabItems.

The shiny and shinydashboard packages have already been loaded for you. Furthermore, the dashboard header has already been stored as header.

This exercise is part of the course

Building Dashboards with shinydashboard

View Course

Hands-on interactive exercise

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

library(shiny)
library(shinydashboard)

header <- dashboardHeader(
  title = "Analysis results for global soccer tournament",
  titleWidth = 400,
  dropdownMenu(type = "messages",
               messageItem("Colleage", "Hello world!")),
  dropdownMenu(type = "notifications",
               notificationItem("Have you rested today?"),
               taskItem("Dashboard completion", value = 20)))

sidebar <- dashboardSidebar(
  sidebarMenu(
    width = 400,
    id = "pages",
    menuItem("Match details", tabName = "matches", icon = icon("futbol"),
             badgeLabel = "New content!", badgeColor = "green"),
    menuItem("Overall results", tabName = "overall", 
             menuSubItem("Charts", tabName = "charts"),
             menuSubItem("Data table", tabName = "datatable", icon=icon("file-excel"))),
    menuItem("A slider",  sliderInput("slider", "Number of goals", min=0, max=10, value = 2))
  )
)

body <- dashboardBody(
  # Link "matches" to an empty page in the body
  ___(
    ___(___, "Match information goes here")
  )
)
ui <- dashboardPage(header, sidebar, body)
server <- function(input, output){}
shinyApp(ui, server)
Edit and Run Code