Aan de slagBegin gratis

Wireframing

Laten we teruggaan naar het vorige voorbeeld van het dashboard voor analyseresultaten van een voetbaltoernooi. In de vorige oefeningen heb je de header en de zijbalk al opgezet.

Specifiek: een knop in de zijbalk wordt gedefinieerd met menuItem() en staat binnen sidebarMenu(). Je hebt misschien gemerkt dat deze knoppen nu nog niets doen. Je gaat deze zijbalkknoppen nu koppelen aan een andere pagina in de body van de UI. Dit is nog steeds onderdeel van het wireframingproces, waarin je bepaalt waar elk object komt te staan. Elke pagina in de body wordt gedefinieerd met tabItem() en moet binnen tabItems staan.

De pakketten shiny en shinydashboard zijn al voor je geladen. Bovendien is de dashboardheader al opgeslagen als header.

Deze oefening maakt deel uit van de cursus

Dashboards bouwen met shinydashboard

Bekijk cursus

Interactieve oefening met praktijkervaring

Probeer deze oefening door deze voorbeeldcode aan te vullen.

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)
Code bewerken en uitvoeren