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