Package 'shinydashboardPlus'

Description

Create an accordion container. Accordions are part of collapsible elements.

accordionItem creates an accordion item to put inside an accordion container.

updateAccordion toggles an accordion on the client.

Usage

accordion(..., id = NULL, width = 12)

accordionItem(..., title, status = NULL, collapsed = TRUE, solidHeader = TRUE)

updateAccordion(id, selected, session = shiny::getDefaultReactiveDomain())

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        accordion(
          id = "accordion1",
          accordionItem(
            title = "Accordion 1 Item 1",
            status = "danger",
            collapsed = TRUE,
            "This is some text!"
          ),
          accordionItem(
            title = "Accordion 1 Item 2",
            status = "warning",
            collapsed = FALSE,
            "This is some text!"
          )
        ),
        accordion(
          id = "accordion2",
          accordionItem(
            title = "Accordion 2 Item 1",
            status = "info",
            collapsed = TRUE,
            "This is some text!"
          ),
          accordionItem(
            title = "Accordion 2 Item 2",
            status = "success",
            collapsed = FALSE,
            "This is some text!"
          )
        )
      ),
      title = "Accordion"
    ),
    server = function(input, output) { }
  )
}


# Update accordion
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        radioButtons("controller", "Controller", choices = c(1, 2)),
        br(),
        accordion(
          id = "accordion1",
          accordionItem(
            title = "Accordion 1 Item 1",
            status = "danger",
            collapsed = TRUE,
            "This is some text!"
          ),
          accordionItem(
            title = "Accordion 1 Item 2",
            status = "warning",
            collapsed = TRUE,
            "This is some text!"
          )
        )
      ),
      title = "Update Accordion"
    ),
    server = function(input, output, session) {
      observeEvent(input$controller, {
        updateAccordion(id = "accordion1", selected = input$controller)
      })
      observe(print(input$accordion1))
      observeEvent(input$accordion1, {
        showNotification(
          sprintf("You selected accordion N° %s", input$accordion1),
          type = "message"
        )
      })
    }
  )
}

Description

Create a large button ideal for web applications but identical to the classic Shiny action button.

Usage

appButton(..., inputId, label, icon = NULL, width = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
     box(
      title = "App Buttons",
      status = NULL,
      appButton(
        inputId = "myAppButton",
        label = "Users", 
        icon = icon("users"), 
        dashboardBadge(textOutput("btnVal"), color = "blue")
      )
     )
    ),
    title = "App buttons"
  ),
  server = function(input, output) {
   output$btnVal <- renderText(input$myAppButton)
  }
 )
}

Description

attachmentBlock create an attachment container, nice to wrap articles... and insert in a box.

Usage

attachmentBlock(..., image, title = NULL, href = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

# Box with attachmentBlock
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "Attachment example",
          attachmentBlock(
            image = "https://adminlte.io/themes/AdminLTE/dist/img/photo1.png",
            title = "Test",
            href = "https://google.com",
            "This is the content"
          )
        )
      ),
      title = "AttachmentBlock"
    ),
    server = function(input, output) { }
  )
}

Description

If you want to quote text

Usage

blockQuote(..., side = "left")

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "BlockQuote example",
          blockQuote("I quote some text here!"),
          blockQuote("I quote some text here!", side = "right")
        )
      ),
      title = "blockQuote"
    ),
    server = function(input, output) { }
  )
}

Description

box can be used to hold content in the main body of a dashboard.

updateBox is used to toggle, close or restore a box on the client.

boxDropdown is used in the dropdown parameter of box.

boxDropdownItem goes in boxDropdown.

dropdownDivider goes in boxDropdown but also in any dropdown menu container.

boxPad creates a vertical container for descriptionBlock. It has to be included in a box.

descriptionBlock creates a description block, perfect for writing statistics to insert in a box

Usage

box(
  ...,
  title = NULL,
  footer = NULL,
  status = NULL,
  solidHeader = FALSE,
  background = NULL,
  width = 6,
  height = NULL,
  collapsible = FALSE,
  collapsed = FALSE,
  closable = FALSE,
  icon = NULL,
  gradient = FALSE,
  boxToolSize = "sm",
  headerBorder = TRUE,
  label = NULL,
  dropdownMenu = NULL,
  sidebar = NULL,
  id = NULL
)

updateBox(
  id,
  action = c("remove", "toggle", "restore", "update"),
  options = NULL,
  session = shiny::getDefaultReactiveDomain()
)

boxDropdown(..., icon = shiny::icon("wrench"))

boxDropdownItem(..., id = NULL, href = NULL, icon = NULL)

dropdownDivider()

boxPad(..., color = NULL, style = NULL)

descriptionBlock(
  number = NULL,
  numberColor = NULL,
  numberIcon = NULL,
  header = NULL,
  text = NULL,
  rightBorder = TRUE,
  marginBottom = FALSE
)

Arguments

Examples

# A box with label, sidebar, dropdown menu
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)

 shinyApp(
   ui = dashboardPage(
     dashboardHeader(),
     dashboardSidebar(),
     dashboardBody(
      box(
        title = "Closable Box with dropdown", 
        closable = TRUE, 
        width = 12,
        status = "warning", 
        solidHeader = FALSE, 
        collapsible = TRUE,
        label = boxLabel(
         text = 1,
         status = "danger",
         style = "circle"
        ),
        dropdownMenu = boxDropdown(
         boxDropdownItem("Link to google", href = "https://www.google.com"),
         boxDropdownItem("item 2", href = "#"),
         dropdownDivider(),
         boxDropdownItem("item 3", href = "#", icon = icon("table-cells"))
        ),
        sidebar = boxSidebar(
         startOpen = TRUE,
         id = "mycardsidebar",
         sliderInput(
          "obs", 
          "Number of observations:",
          min = 0, 
          max = 1000, 
          value = 500
         )
        ),
        plotOutput("distPlot")
       )
     )
   ),
   server = function(input, output) {
    output$distPlot <- renderPlot({
     hist(rnorm(input$obs))
    })
   }
 )
}

# Toggle a box on the client
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 ui <- dashboardPage(
   dashboardHeader(),
   dashboardSidebar(),
   dashboardBody(
     tags$style("body { background-color: ghostwhite}"),
     fluidRow(
       actionButton("toggle_box", "Toggle Box"),
       actionButton("remove_box", "Remove Box", class = "bg-danger"),
       actionButton("restore_box", "Restore Box", class = "bg-success")
     ),
     actionButton("update_box", "Update Box", class = "bg-info"), 
     actionButton("update_box2", "Update Box 2", class = "bg-info"),
     br(),
     br(),
     box(
       title = textOutput("box_state"),
       id = "mybox",
       status = "danger", 
       background = "maroon", 
       gradient = TRUE,
       collapsible = TRUE,
       closable = TRUE,
       plotOutput("plot")
     )
   )
 )
 
 server <- function(input, output, session) {
   output$plot <- renderPlot({
     req(!input$mybox$collapsed)
     plot(rnorm(200))
   })
   
   output$box_state <- renderText({
     state <- if (input$mybox$collapsed) "collapsed" else "uncollapsed"
     paste("My box is", state)
   })
   
   observeEvent(input$toggle_box, {
     updateBox("mybox", action = "toggle")
   })
   
   observeEvent(input$remove_box, {
     updateBox("mybox", action = "remove")
   })
   
   observeEvent(input$restore_box, {
     updateBox("mybox", action = "restore")
   })
   
   observeEvent(input$mybox$visible, {
     collapsed <- if (input$mybox$collapsed) "collapsed" else "uncollapsed"
     visible <- if (input$mybox$visible) "visible" else "hidden"
     message <- paste("My box is", collapsed, "and", visible)
     showNotification(message, type = "warning", duration = 1)
   })
   
   observeEvent(input$update_box, {
     updateBox(
       "mybox", 
       action = "update", 
       options = list(
         title = h2("hello", dashboardLabel(1, status = "primary")),
         status = "warning", 
         solidHeader = TRUE, 
         width = 12, 
         background = NULL, 
         height = "900px", 
         closable = FALSE
       )
     )
   })
    
    observeEvent(input$update_box2, {
      updateBox(
        "mybox", 
        action = "update", 
        options = list(
          status = NULL, 
          solidHeader = FALSE,
          width = 4, 
          background = "green", 
          height = "500px", 
          closable = TRUE
        )
      )
    })
   
 }
 
 shinyApp(ui, server)
}

# Box with dropdown items and input
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
   ui = dashboardPage(
     dashboardHeader(),
     dashboardSidebar(),
     dashboardBody(
       box(
         title = "Closable Box with dropdown", 
         closable = TRUE, 
         width = 12,
         status = "warning", 
         solidHeader = FALSE, 
         collapsible = TRUE,
         dropdownMenu = boxDropdown(
           boxDropdownItem("Click me", id = "dropdownItem", icon = icon("heart")),
           boxDropdownItem("item 2", href = "https://www.google.com/"),
           dropdownDivider(),
           boxDropdownItem("item 3", icon = icon("table-cells"))
         ),
         "My box"
       )
     )
   ),
   server = function(input, output) {
     observeEvent(input$dropdownItem, {
       showNotification("Hello", duration = 1, type = "message")
     })
   }
 )
}

# Box with boxPad container + descriptionBlock
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "Box with right pad",
          status = "warning",
          fluidRow(
            column(width = 6),
            column(
              width = 6,
              boxPad(
                color = "green",
                descriptionBlock(
                  header = "8390",
                  text = "VISITS",
                  rightBorder = FALSE,
                  marginBottom = TRUE
                ),
                descriptionBlock(
                  header = "30%",
                  text = "REFERRALS",
                  rightBorder = FALSE,
                  marginBottom = TRUE
                ),
                descriptionBlock(
                  header = "70%",
                  text = "ORGANIC",
                  rightBorder = FALSE,
                  marginBottom = FALSE
                )
              )
            )
          )
        )
      ),
      title = "boxPad"
    ),
    server = function(input, output) { }
  )
}


# Box with descriptionBlock
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          solidHeader = FALSE,
          title = "Status summary",
          background = NULL,
          width = 4,
          status = "danger",
          footer = fluidRow(
            column(
              width = 6,
              descriptionBlock(
                number = "17%",
                numberColor = "green",
                numberIcon = icon("caret-up"),
                header = "$35,210.43",
                text = "TOTAL REVENUE",
                rightBorder = TRUE,
                marginBottom = FALSE
              )
            ),
            column(
              width = 6,
              descriptionBlock(
                number = "18%",
                numberColor = "red",
                numberIcon = icon("caret-down"),
                header = "1200",
                text = "GOAL COMPLETION",
                rightBorder = FALSE,
                marginBottom = FALSE
              )
            )
          )
        )
      ),
      title = "Description Blocks"
    ),
    server = function(input, output) { }
  )
}

Create a label for box

Description

boxLabel is inserted in the label slot of box.

Usage

boxLabel(text, status, style = "default")

Arguments

Description

boxProfile goes inside a box. Displays user information in an elegant container.

boxProfileItem is an sub-element of a boxProfile.

Usage

boxProfile(..., image = NULL, title, subtitle = NULL, bordered = FALSE)

boxProfileItem(title, description)

Arguments

Author(s)

David Granjon, [email protected]

Examples

# Box with boxProfile
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
     box(
      title = "Box with profile",
      status = "primary",
      boxProfile(
       image = "https://adminlte.io/themes/AdminLTE/dist/img/user4-128x128.jpg",
       title = "Nina Mcintire",
       subtitle = "Software Engineer",
       bordered = TRUE,
       boxProfileItem(
        title = "Followers",
        description = 1322
       ),
       boxProfileItem(
        title = "Following",
        description = 543
       ),
       boxProfileItem(
        title = "Friends",
        description = 13287
       )
      )
     )
    ),
    title = "boxProfile"
  ),
  server = function(input, output) { }
 )
}

Description

boxSidebar is inserted in the sidebar slot of box.

updateBoxSidebar toggle a boxSidebar on the client.

Usage

boxSidebar(
  ...,
  id = NULL,
  width = 50,
  background = "#333a40",
  startOpen = FALSE,
  icon = shiny::icon("gears")
)

updateBoxSidebar(id, session = shiny::getDefaultReactiveDomain())

Arguments

Examples

# Toggle a box sidebar
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    body = dashboardBody(
      box(
        title = "Update box sidebar", 
        closable = TRUE, 
        width = 12,
        height = "500px",
        solidHeader = FALSE, 
        collapsible = TRUE,
        actionButton("update", "Toggle card sidebar"),
        sidebar = boxSidebar(
          id = "mycardsidebar",
          p("Sidebar Content")
        )
      )
    ),
    sidebar = dashboardSidebar()
  ),
  server = function(input, output, session) {
    observe(print(input$mycardsidebar))
    
    observeEvent(input$update, {
      updateBoxSidebar("mycardsidebar")
    })
    
  }
 )
}

Description

carousel creates a carousel container to display media content.

carouselItem creates a carousel item to insert in a carousel.

Usage

carousel(..., id, indicators = TRUE, width = 6, .list = NULL)

carouselItem(..., caption = NULL, active = FALSE)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      body = dashboardBody(
        carousel(
          id = "mycarousel",
          carouselItem(
            caption = "Item 1",
            tags$img(src = "https://placehold.it/900x500/3c8dbc/ffffff&text=I+Love+Bootstrap")
          ),
          carouselItem(
            caption = "Item 2",
            tags$img(src = "https://placehold.it/900x500/39CCCC/ffffff&text=I+Love+Bootstrap")
          )
        )
      ),
      title = "Carousel"
    ),
    server = function(input, output) { }
  )
}

Description

Create a badge. It may be inserted in any element like inside a actionButton or a dashboardSidebar.

Usage

dashboardBadge(..., color)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        dashboardBadge("Badge 1", color = "blue"),
        actionButton(
          inputId = "badge",
          label = "Hello",
          icon = NULL,
          width = NULL,
          dashboardBadge(1, color = "orange")
        )
      )
    ),
    server = function(input, output) { }
  )
}

Description

dashboardControlbar create a right sidebar container.

updateControlbar allows to toggle a dashboardControlbar.

controlbarMenu is a tabset panel for the dashboardControlbar.

controlbarItem is a tabPanel for the controlbarMenu.

updateControlbarMenu allows to programmatically change the currently selected controlbarItem on the client.

Usage

dashboardControlbar(
  ...,
  id = NULL,
  disable = FALSE,
  width = 230,
  collapsed = TRUE,
  overlay = TRUE,
  skin = "dark",
  .list = NULL
)

updateControlbar(id, session = shiny::getDefaultReactiveDomain())

controlbarMenu(..., id = NULL, selected = NULL)

controlbarItem(title, ..., value = title, icon = NULL)

updateControlbarMenu(
  id,
  selected = NULL,
  session = shiny::getDefaultReactiveDomain()
)

Arguments

Note

Until a maximum of 5 controlbarItem! AdminLTE 2 does not support more panels.

Author(s)

David Granjon, [email protected]

Examples

# Controlbar example
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 shinyApp(
   ui = dashboardPage(
     header = dashboardHeader(),
     sidebar = dashboardSidebar(),
     body = dashboardBody(),
     controlbar = dashboardControlbar(
      skin = "dark",
      controlbarMenu(
       id = "menu",
       controlbarItem(
        "Tab 1",
        "Welcome to tab 1"
       ),
       controlbarItem(
        "Tab 2",
        "Welcome to tab 2"
       )
      )
     ),
     title = "Right Sidebar"
   ),
   server = function(input, output) { }
 )
}

# Toggle the dashboard controlbar
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
   ui = dashboardPage(
     header = dashboardHeader(),
     sidebar = dashboardSidebar(),
     body = dashboardBody(
       actionButton(inputId = "controlbarToggle", label = "Toggle Controlbar")
     ),
     controlbar = dashboardControlbar(id = "controlbar")
   ),
   server = function(input, output, session) {
     
     observeEvent(input$controlbar, {
       if (input$controlbar) {
         showModal(modalDialog(
           title = "Alert",
           "The controlbar is opened.",
           easyClose = TRUE,
           footer = NULL
         ))
       }
     })
     
     observeEvent(input$controlbarToggle, {
       updateControlbar("controlbar")
     })
     
     observe({
       print(input$controlbar)
     })
   }
 )
}

# controlbar with controlbarMenu
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
   ui = dashboardPage(
     header = dashboardHeader(),
     sidebar = dashboardSidebar(),
     body = dashboardBody(),
     controlbar = dashboardControlbar(
      id = "controlbar",
      controlbarMenu(
       id = "menu",
       controlbarItem(
        "Tab 1",
        "Welcome to tab 1"
       ),
       controlbarItem(
        "Tab 2",
        "Welcome to tab 2"
       )
      )
     )
   ),
   server = function(input, output, session) {
     
     observeEvent(input$menu, {
       showModal(modalDialog(
         title = "Alert",
         sprintf(" %s is active", input$menu),
         easyClose = TRUE,
         footer = NULL
       ))
     })
   }
 )
}

# Update a controlbar menu
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
   ui = dashboardPage(
     header = dashboardHeader(),
     sidebar = dashboardSidebar(),
     body = dashboardBody(
      radioButtons("controller", "Controller", choices = c(1, 2, 3))
     ),
     controlbar = dashboardControlbar(
      id = "controlbar",
      controlbarMenu(
       id = "menu",
       controlbarItem(
         paste0("Tab", 1),
         paste("Welcome to tab", 1)
       ),
       controlbarItem(
         paste0("Tab", 2),
         paste("Welcome to tab", 2)
       ),
       controlbarItem(
         paste0("Tab", 3),
         paste("Welcome to tab", 3)
       )
      )
     )
   ),
   server = function(input, output, session) {
    observeEvent(input$controller, {
     updateControlbarMenu(
      "menu", 
      selected = paste0("Tab", input$controller)
     )
    })
   }
 )
}

Description

This creates a dashboard footer

Usage

dashboardFooter(left = NULL, right = NULL)

Arguments

Examples

if (interactive()) {
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPage(
    header = dashboardHeader(),
    sidebar = dashboardSidebar(),
    body = dashboardBody(),
    footer = dashboardFooter(
     left = "By Divad Nojnarg",
     right = "Zurich, 2019"
    ),
    title = "DashboardPage"
  ),
  server = function(input, output) { }
)
}

Description

A dashboard header can be left blank, or it can include dropdown menu items on the right side.

Usage

dashboardHeader(
  ...,
  title = NULL,
  titleWidth = NULL,
  disable = FALSE,
  .list = NULL,
  leftUi = NULL,
  controlbarIcon = shiny::icon("gears"),
  fixed = FALSE
)

Arguments

Note

We do not recommend to insert shiny input elements (such as sliderInput) in the left menu, since they will not be well displayed. Instead, wrap them in a dropdownBlock

See Also

dropdownMenu

Examples

if (interactive()) {
  library(shiny)
  library(shinyWidgets)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(
        leftUi = tagList(
          dropdownBlock(
            id = "mydropdown",
            title = "Dropdown 1",
            icon = icon("sliders"),
            sliderInput(
              inputId = "n",
              label = "Number of observations",
              min = 10, max = 100, value = 30
            ),
            prettyToggle(
              inputId = "na",
              label_on = "NAs kept",
              label_off = "NAs removed",
              icon_on = icon("check"),
              icon_off = icon("trash-can")
            )
          ),
          dropdownBlock(
            id = "mydropdown2",
            title = "Dropdown 2",
            icon = icon("sliders"),
            prettySwitch(
              inputId = "switch4",
              label = "Fill switch with status:",
              fill = TRUE,
              status = "primary"
            ),
            prettyCheckboxGroup(
              inputId = "checkgroup2",
              label = "Click me!",
              thick = TRUE,
              choices = c("Click me !", "Me !", "Or me !"),
              animation = "pulse",
              status = "info"
            )
          )
        ),
        dropdownMenu(
          type = "tasks",
          badgeStatus = "danger",
          taskItem(value = 20, color = "aqua", "Refactor code"),
          taskItem(value = 40, color = "green", "Design new layout"),
          taskItem(value = 60, color = "yellow", "Another task"),
          taskItem(value = 80, color = "red", "Write documentation")
        )
      ),
      sidebar = dashboardSidebar(),
      body = dashboardBody(
        setShadow(class = "dropdown-menu")
      ),
      title = "DashboardPage"
    ),
    server = function(input, output) { }
  )
}

Description

Create a label

Usage

dashboardLabel(..., status, style = "default")

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        dashboardLabel("Label 1", status = "info"),
        dashboardLabel("Label 2", status = "danger", style = "circle"),
        dashboardLabel("Label 3", status = "success", style = "square")
      )
    ),
    server = function(input, output) { }
  )
}

Description

This creates a dashboard page for use in a Shiny app.

Usage

dashboardPage(
  header,
  sidebar,
  body,
  controlbar = NULL,
  footer = NULL,
  title = NULL,
  skin = c("blue", "blue-light", "black", "black-light", "purple", "purple-light",
    "green", "green-light", "red", "red-light", "yellow", "yellow-light", "midnight"),
  freshTheme = NULL,
  preloader = NULL,
  md = FALSE,
  options = NULL,
  scrollToTop = FALSE
)

Arguments

See Also

dashboardHeader, dashboardSidebar, dashboardBody.

Examples

if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 library(fresh)
 
 shinyApp(
   ui = dashboardPage(
     freshTheme = create_theme(
      adminlte_color(
        light_blue = "#55e7ff",
        blue = "#2011a2",
        navy = "#201148",
        red = "#ff34b3"
      ),
      adminlte_sidebar(
        dark_bg = "#D8DEE9",
        dark_hover_bg = "#81A1C1",
        dark_color = "#2E3440"
      ),
      adminlte_global(
        content_bg = "#FFF",
        box_bg = "#D8DEE9", 
        info_box_bg = "#D8DEE9"
      )
     ),
     options = list(sidebarExpandOnHover = TRUE),
     header = dashboardHeader(),
     sidebar = dashboardSidebar(),
     body = dashboardBody(
      box(background = "red"),
      box(background = "blue"),
      box(background = "navy")
     ),
     controlbar = dashboardControlbar(),
     title = "DashboardPage"
   ),
   server = function(input, output) { }
 )
}

Description

A dashboard sidebar typically contains a sidebarMenu, although it may also contain a sidebarSearchForm, or other Shiny inputs.

updateSidebar allows to toggle a dashboardSidebar on the client.

Usage

dashboardSidebar(
  ...,
  disable = FALSE,
  width = NULL,
  collapsed = FALSE,
  minified = TRUE,
  id = NULL
)

updateSidebar(id, session = shiny::getDefaultReactiveDomain())

Arguments

Examples

if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
   ui = dashboardPage(
     header = dashboardHeader(),
     sidebar = dashboardSidebar(id = "sidebar"),
     body = dashboardBody(
       actionButton(inputId = "sidebarToggle", label = "Toggle Sidebar")
     )
   ),
   server = function(input, output, session) {
     
     observeEvent(input$sidebar, {
       if (input$sidebar) {
         showModal(modalDialog(
           title = "Alert",
           "The sidebar is opened.",
           easyClose = TRUE,
           footer = NULL
         ))
       }
     })
     
     observeEvent(input$sidebarToggle, {
       updateSidebar("sidebar")
     })
     
     observe({
       print(input$sidebar)
     })
   }
 )
}

Description

Create a dashboard user profile.

Usage

dashboardUser(
  ...,
  name = NULL,
  image = NULL,
  title = NULL,
  subtitle = NULL,
  footer = NULL
)

Arguments

See Also

userOutput and renderUser for dynamically-generating dashboardUser.

Examples

if (interactive()) {
  library(shiny)
  library(shinyWidgets)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(userOutput("user")),
      sidebar = dashboardSidebar(),
      body = dashboardBody(),
      title = "DashboardPage"
    ),
    server = function(input, output) {
      output$user <- renderUser({
        dashboardUser(
          name = "Divad Nojnarg",
          image = "https://adminlte.io/themes/AdminLTE/dist/img/user2-160x160.jpg",
          title = "shinydashboardPlus",
          subtitle = "Author",
          footer = p("The footer", class = "text-center"),
          fluidRow(
            dashboardUserItem(
              width = 6,
              socialButton(
                href = "https://dropbox.com",
                icon = icon("dropbox")
              )
            ),
            dashboardUserItem(
              width = 6,
              socialButton(
                href = "https://github.com",
                icon = icon("github")
              )
            )
          )
        )
      })
    }
  )
}

Description

This can be inserted in a dashboardUser.

Usage

dashboardUserItem(item, width)

Arguments

Description

Create a dropdown block to place in a dashboard header

Usage

dropdownBlock(..., id, icon = NULL, title = NULL, badgeStatus = "danger")

Arguments

See Also

dashboardHeader for example usage.

Description

flipBox creates a box that flips from back to front and inversely

updateFlipBox programmatically toggles a flipBox from the server.

Usage

flipBox(id, front, back, trigger = c("click", "hover"), width = 6)

updateFlipBox(id, session = shiny::getDefaultReactiveDomain())

Arguments

Details

To access the state of the flipbox use the input alias input$<id>. For example, if your flipBox's id is myawesomeflipbox, you can access its state via input$myawesomeflipbox where TRUE corresponds to the front, FALSE to the back.

Examples

if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      fluidRow(
        column(
          width = 6,
          uiOutput("active_side"), 
          flipBox(
            id = "myflipbox", 
            trigger = "hover",
            width = 12,
            front = div(
              class = "text-center",
              h1("Flip on hover"),
              img(
                src = "https://image.flaticon.com/icons/svg/149/149076.svg",
                height = "300px",
                width = "100%"
              )
            ),
            back = div(
              class = "text-center",
              height = "300px",
              width = "100%",
              h1("Flip on hover"),
              p("More information....")
            )
          )
        ),
        column(
          width = 6,
          uiOutput("active_side_2"),
          flipBox(
            id = "myflipbox2",
            width = 12,
            front = div(
              class = "text-center",
              h1("Flip on click"),
              img(
                src = "https://image.flaticon.com/icons/svg/149/149076.svg",
                height = "300px",
                width = "100%"
              )
            ),
            back = div(
              class = "text-center",
              height = "300px",
              width = "100%",
              h1("Flip on click"),
              p("More information....")
            )
          )
        )
      )
    )
  ),
  
  server = function(input, output, session) {
    output$active_side <- renderUI({
      side <- if (input$myflipbox) "front" else "back"
      dashboardBadge(side, color = "blue")
    })
    
    output$active_side_2<- renderUI({
      side <- if (input$myflipbox2) "front" else "back"
      dashboardBadge(side, color = "blue")
    })
  }
 )
}
if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 shinyApp(
   ui = dashboardPage(
     dashboardHeader(),
     dashboardSidebar(),
     dashboardBody(
       actionButton("toggle", "Toggle flip box"),
       uiOutput("active_side"), 
       flipBox(
         id = "myflipbox",
         front = div(
           class = "text-center",
           img(
             src = "https://image.flaticon.com/icons/svg/149/149076.svg",
             height = "300px",
             width = "100%"
           )
         ),
         back = div(
           class = "text-center",
           height = "300px",
           width = "100%",
           h1("Details...."),
           p("More information....")
         )
       )
     )
   ),
   
   server = function(input, output, session) {
    output$active_side <- renderUI({
     side <- if (input$myflipbox) "front" else "back"
     dashboardBadge(side, color = "blue")
    })
    
    observeEvent(input$toggle, {
     updateFlipBox("myflipbox")
    })
   }
 )
}

Description

When a section is still work in progress or a computation is running

Usage

loadingState()

Note

Loading state can be programmatically used when a conputation is running for instance.

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "loading spinner",
          loadingState()
        )
      ),
      title = "Loading State"
    ),
    server = function(input, output) { }
  )
}

Description

Custom messageItem

Usage

messageItem(
  from,
  message,
  icon = shiny::icon("user"),
  time = NULL,
  href = NULL,
  inputId = NULL
)

Arguments

Description

navPills creates a container for nav elements. They are vertically stacked. To insert in box.

updateNavPills allows to programmatically change the currently selected navPillsItem on the client.

navPillsItem creates a nav pill item.

Usage

navPills(..., id = NULL)

updateNavPills(id, selected, session = shiny::getDefaultReactiveDomain())

navPillsItem(
  left = NULL,
  right = NULL,
  color = NULL,
  icon = NULL,
  selected = FALSE
)

Arguments

Author(s)

David Granjon, [email protected]

Examples

# navPills
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "Nav Pills",
          status = "info",
          "Box Body",
          footer = navPills(
            id = "pillItem",
            navPillsItem(
              left = "Item 1",
              color = "green",
              right = 10
            ),
            navPillsItem(
              left = "Item 2",
              color = "red",
              icon = icon("angle-down"),
              right = "10%",
              active = TRUE
            )
          )
        )
      ),
      title = "Nav Pills"
    ),
    server = function(input, output) {
      observeEvent(input$pillItem, {
        showNotification(sprintf("You clicked on pill N° %s", input$pillItem), type = "message")
      })
    }
  )
}


# update navPills
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        radioButtons("controller", "Controller", choices = c(1, 2, 3)),
        br(),
        box(
          title = "Nav Pills",
          status = "info",
          "Box Body",
          footer = navPills(
            inputId = "pills",
            navPillsItem(
              left = "Item 1",
              color = "green",
              right = 10
            ),
            navPillsItem(
              left = "Item 2",
              color = "red",
              icon = icon("angle-down"),
              right = "10%"
            ),
            navPillsItem(
              left = "Item 3",
              color = "blue",
              icon = icon("angle-up"),
              right = "30%"
            )
          )
        )
      ),
      title = "Nav Pills"
    ),
    server = function(input, output, session) {
      observeEvent(input$controller, {
        updateNavPills(id = "pills", selected = input$controller)
      })
      observeEvent(input$pills, {
        showNotification(sprintf("You selected pill N° %s", input$pills), type = "message")
      })
    }
  )
}

Description

Custom notificationItem

Usage

notificationItem(
  text,
  icon = shiny::icon("triangle-exclamation"),
  status = "success",
  href = NULL,
  inputId = NULL
)

Arguments

Description

productList creates a container to display commercial items in an elegant container. Insert in a box.

productListItem creates a product item to insert in productList.

Usage

productList(...)

productListItem(..., image = NULL, title = NULL, subtitle = NULL, color = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

# Box with productList
if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "Product List",
          status = "primary",
          productList(
            productListItem(
              image = "https://www.pngmart.com/files/1/Haier-TV-PNG.png",
              title = "Samsung TV",
              subtitle = "$1800",
              color = "yellow",
              "This is an amazing TV, but I don't like TV!"
            ),
            productListItem(
              image = "https://upload.wikimedia.org/wikipedia/commons/7/77/IMac_Pro.svg",
              title = "Imac 27",
              subtitle = "$4999",
              color = "red",
              "This is were I spend most of my time!"
            )
          )
        )
      ),
      title = "Product List"
    ),
    server = function(input, output) { }
  )
}

Description

This creates a vertical progress bar.

Usage

progressBar(
  value,
  min = 0,
  max = 100,
  vertical = FALSE,
  striped = FALSE,
  animated = FALSE,
  status = "primary",
  size = NULL,
  label = NULL
)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      body = dashboardBody(
        box(
          title = "Horizontal",
          progressBar(
            value = 10,
            striped = TRUE,
            animated = TRUE,
            label = "10%"
          ),
          progressBar(
            value = 50,
            status = "warning",
            size = "xs"
          ),
          progressBar(
            value = 20,
            status = "danger",
            size = "sm"
          )
        ),
        box(
          title = "Vertical",
          progressBar(
            value = 10,
            striped = TRUE,
            animated = TRUE,
            vertical = TRUE
          ),
          progressBar(
            value = 50,
            status = "warning",
            size = "xs",
            vertical = TRUE
          ),
          progressBar(
            value = 20,
            status = "danger",
            size = "sm",
            vertical = TRUE
          )
        )
      ),
      title = "Progress bars"
    ),
    server = function(input, output) { }
  )
}

Description

Create dynamic user output (server side)

Usage

renderUser(expr, env = parent.frame(), quoted = FALSE, outputArgs = list())

Arguments

See Also

userOutput for the corresponding client side function and examples.

Other user outputs: userOutput()

Description

A gallery of all components available in shinydashboardPlus.

Usage

shinydashboardPlusGallery()

Examples

if (interactive()) {

 shinydashboardPlusGallery()

}

Description

socialBox creates a special box dedicated for social content.

userBlock goes in the title of socialBox.

boxComment has to be inserted in the comment slot of socialBox.

Usage

socialBox(
  ...,
  title = NULL,
  footer = NULL,
  width = 6,
  height = NULL,
  collapsible = TRUE,
  collapsed = FALSE,
  closable = FALSE,
  boxToolSize = "sm",
  headerBorder = TRUE,
  label = NULL,
  dropdownMenu = NULL,
  sidebar = NULL,
  id = NULL
)

userBlock(image, title, subtitle = NULL, href = "javascript:void(0)")

boxComment(..., image, title = NULL, date = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        socialBox(
          title = userBlock(
            image = "https://adminlte.io/themes/AdminLTE/dist/img/user4-128x128.jpg",
            title = "Social Box",
            subtitle = "example-01.05.2018"
          ),
          "Some text here!",
          attachmentBlock(
            image = "https://adminlte.io/themes/AdminLTE/dist/img/photo1.png",
            title = "Test",
            href = "https://google.com",
            "This is the content"
          ),
          lapply(X = 1:10, FUN = function(i) {
            boxComment(
              image = "https://adminlte.io/themes/AdminLTE/dist/img/user3-128x128.jpg",
              title = paste("Comment", i),
              date = "01.05.2018",
              paste0("The ", i, "-th comment")
            )
          }),
          footer = "The footer here!"
        )
      ),
      controlbar = dashboardControlbar(),
      title = "socialBox"
    ),
    server = function(input, output) { }
  )
}

Description

Create a social button

Usage

socialButton(href, icon)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "Social Buttons",
          status = NULL,
          socialButton(
            href = "https://dropbox.com",
            icon = icon("dropbox")
          ),
          socialButton(
            href = "https://github.com",
            icon = icon("github")
          )
        )
      ),
      title = "Social Buttons"
    ),
    server = function(input, output) { }
  )
}

Description

Create a starBlock item (ideal for rating)

Usage

starBlock(value, max = 5, color = "yellow")

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          title = "Star example",
          starBlock(5),
          starBlock(5, color = "olive"),
          starBlock(1, color = "maroon"),
          starBlock(3, color = "teal")
        )
      ),
      title = "starBlock"
    ),
    server = function(input, output) { }
  )
}

Description

Custom taskItem

Usage

taskItem(text, value = 0, color = "aqua", href = NULL, inputId = NULL)

Arguments

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(
        dropdownMenu(
          type = "tasks",
          badgeStatus = "danger",
          taskItem(
            inputId = "mytask",
            value = 20,
            color = "aqua",
            text = "Click me!"
          ),
          taskItem(
            value = 40,
            color = "green",
            text = "Basic item"
          )
        )
      ),
      dashboardSidebar(),
      dashboardBody(),
      title = "Dashboard example"
    ),
    server = function(input, output) {
      observeEvent(input$mytask, {
        showModal(modalDialog(
          title = "Important message",
          "This is an important message!"
        ))
      })
    }
  )
}

Description

timelineBlock creates a timeline block that may be inserted in a box or outside.

timelineLabel creates a timeline label element to highlight an event.

timelineItem creates a timeline item that contains information for a given event like the title, description, date, ...

timelineItemMedia create a specific container for images.

timelineStart indicates a starting point.

timelineEnd indicates an end point.

Usage

timelineBlock(..., reversed = TRUE, width = 6)

timelineLabel(..., color = NULL)

timelineItem(
  ...,
  icon = NULL,
  color = NULL,
  time = NULL,
  title = NULL,
  border = TRUE,
  footer = NULL
)

timelineItemMedia(image = NULL, height = NULL, width = NULL)

timelineStart(icon = shiny::icon("clock"), color = NULL)

timelineEnd(icon = shiny::icon("hourglass-end"), color = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        h3("When Reversed = TRUE, can be displayed inside a box"),
        box(
          title = "Timeline",
          status = "info",
          timelineBlock(
            width = 12,
            timelineEnd(color = "red"),
            timelineLabel(2018, color = "teal"),
            timelineItem(
              title = "Item 1",
              icon = icon("gears"),
              color = "olive",
              time = "now",
              footer = "Here is the footer",
              "This is the body"
            ),
            timelineItem(
              title = "Item 2",
              border = FALSE
            ),
            timelineLabel(2015, color = "orange"),
            timelineItem(
              title = "Item 3",
              icon = icon("paint-brush"),
              color = "maroon",
              timelineItemMedia(image = "https://placehold.it/150x100"),
              timelineItemMedia(image = "https://placehold.it/150x100")
            ),
            timelineStart(color = "purple")
          )
        ),
        h3("When Reversed = FALSE, can be displayed out of a box"),
        timelineBlock(
          reversed = FALSE,
          timelineEnd(color = "red"),
          timelineLabel(2018, color = "teal"),
          timelineItem(
            title = "Item 1",
            icon = icon("gears"),
            color = "olive",
            time = "now",
            footer = "Here is the footer",
            "This is the body"
          ),
          timelineItem(
            title = "Item 2",
            border = FALSE
          ),
          timelineLabel(2015, color = "orange"),
          timelineItem(
            title = "Item 3",
            icon = icon("paint-brush"),
            color = "maroon",
            timelineItemMedia(image = "https://placehold.it/150x100"),
            timelineItemMedia(image = "https://placehold.it/150x100")
          ),
          timelineStart(color = "purple")
        )
      ),
      title = "timelineBlock"
    ),
    server = function(input, output) { }
  )
}

Description

Create a todo list container. May be included in box.

todoListItem creates a todo list item.

Usage

todoList(..., sortable = TRUE)

todoListItem(..., checked = FALSE, label = NULL)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
  library(shiny)
  library(shinydashboard)
  library(shinyjqui)
  library(shinydashboardPlus)

  shinyApp(
    ui = dashboardPage(
      dashboardHeader(),
      dashboardSidebar(),
      dashboardBody(
        box(
          "Sortable todo list demo",
          status = "warning",
          todoList(
            todoListItem(
              label = "Design a nice theme",
              "Some text here"
            ),
            todoListItem(
              label = "Make the theme responsive",
              "Some text here"
            ),
            todoListItem(
              checked = TRUE,
              label = "Let theme shine like a star"
            )
          )
        ),
        box(
          "Simple todo list demo",
          status = "warning",
          todoList(
            sortable = FALSE,
            todoListItem(
              label = "Design a nice theme",
              "Some text here"
            ),
            todoListItem(
              label = "Make the theme responsive",
              "Some text here"
            ),
            todoListItem(
              checked = TRUE,
              label = "Let theme shine like a star"
            )
          )
        )
      ),
      title = "Todo Lists"
    ),
    server = function(input, output) { }
  )
}

Description

userBox creates a user card.

userDescription creates a customized title tag for userBox.

Usage

userBox(
  ...,
  title = NULL,
  footer = NULL,
  status = NULL,
  background = NULL,
  width = 6,
  height = NULL,
  collapsible = TRUE,
  collapsed = FALSE,
  closable = FALSE,
  gradient = FALSE,
  boxToolSize = "sm",
  headerBorder = TRUE,
  label = NULL,
  dropdownMenu = NULL,
  sidebar = NULL,
  id = NULL
)

userDescription(
  title,
  subtitle = NULL,
  image,
  backgroundImage = NULL,
  type = c(1, 2),
  imageElevation = NULL
)

Arguments

Author(s)

David Granjon, [email protected]

Examples

if (interactive()) {
 library(shiny)
 library(shinydashboard)
 library(shinydashboardPlus)
 
 shinyApp(
    ui = dashboardPage(
      header = dashboardHeader(),
      sidebar = dashboardSidebar(),
      controlbar = dashboardControlbar(),
      footer = dashboardFooter(),
      title = "test",
      body = dashboardBody(
        userBox(
          title = userDescription(
            title = "Nadia Carmichael",
            subtitle = "lead Developer",
            type = 2,
            image = "https://adminlte.io/themes/AdminLTE/dist/img/user7-128x128.jpg",
          ),
          status = "primary",
          gradient = TRUE,
          background = "light-blue",
          boxToolSize = "xl",
          "Some text here!",
          footer = "The footer here!"
        ),
        userBox(
          title = userDescription(
            title = "Alexander Pierce",
            subtitle = "Founder & CEO",
            type = 1,
            image = "https://adminlte.io/themes/AdminLTE/dist/img/user1-128x128.jpg",
          ),
          status = "purple",
          closable = TRUE,
          "Some text here!",
          footer = "The footer here!"
        ),
        userBox(
          title = userDescription(
            title = "Elizabeth Pierce",
            subtitle = "Web Designer",
            image = "https://adminlte.io/themes/AdminLTE/dist/img/user3-128x128.jpg",
            backgroundImage = "https://cdn.statically.io/img/wallpaperaccess.com/full/1119564.jpg",
          ),
          status = "teal",
          closable = TRUE,
          maximizable = TRUE,
          "Some text here!",
          footer = "The footer here!"
        )
      )
    ),
    server = function(input, output) {}
  )
}

Description

userList creates a user list container to be inserted in a box.

userListItem creates a user list item.

Usage

userList(...)

userListItem(image, title, subtitle = NULL)

Arguments

Author(s)

David Granjon, [email protected]