menuItem in sidebar

[sankarachari]

...Hi All,
I found difficult to set an image for the main "menuItem" by which a default image should display at dashboard home page.

library(shiny)
library(shinydashboard)
library(tidyverse)
library(ggthemes)
library(DT)
library(lubridate)
library(png)
#-----------------------------------------------------

ui <- 
dashboardPage(skin = "red",
dashboardHeader(title = "ABC", titleWidth = 300)),
dashboardSidebar( 
sidebarMenu(id = "tabs", 
menuItem("ANALY", tabName = "tab0",
menuSubItem("ABC", tabName = "tab1"))), 
        
dashboardBody(
### changing theme
#shinyDashboardThemes(theme = "grey_dark"),
mainPanel(
tabItems(
tabItem(tabName = "tab0"),
tabItem(tabName = "tab1",  class='active', h2("area 1"),
fluidRow(column(width = 8,
tabItem(tabName = "tab1", plotOutput("plot1"), width = 8)), 
column(width = 4,
tabItem(tabName = "tab1", width = 4,
infoBoxOutput("ordersbox", width = NULL),
infoBoxOutput("progressBox", width = NULL),
infoBoxOutput("approvalBox", width = NULL),
infoBoxOutput("BonusBox", width = NULL))),
                 
)   #tabItems
)    #main Panel
)      #dashboard body
)  #UI

server <- function(input, output, session){
 
# 1. Box
output$ordersbox <- renderInfoBox({
infoBox(
"KPI 1", "120", icon = icon("users", lib = "font-awesome"),
color = "light-blue", fill =TRUE, width = 3
)
}) 
  
# 2. Box
output$progressBox <- renderInfoBox({
invalidateLater(as.integer(1000))
infoBox("Time",
paste(format(Sys.time(), "%H:%M:%S"), "h"), 
icon = icon("time", lib = "glyphicon"),
color = "teal", fill =TRUE, width = 3
)
})
  
# 3. Box
output$approvalBox <- renderInfoBox({
infoBox(
"KPI 2", "120", icon = icon("check-square", lib = "font-awesome"),
color = "yellow", fill =TRUE,width = 3
)
})
# 4. Box
output$BonusBox <- renderInfoBox({infoBox("ttt"
"KPI 3", "110", icon = icon("info-circle", lib = "font-awesome"),
color = "red", fill =TRUE, width = 3)})  
# 1.`enter code here`
output$ordersbox1 <- renderInfoBox({
infoBox(
"KPI 1", "120", icon = icon("users", lib = "font-awesome"),
color = "light-blue", fill =TRUE, width = 3)
})   
# 2. Box
output$progressBox1 <- renderInfoBox({
invalidateLater(as.integer(1000))
infoBox("Time",
paste(format(Sys.time(), "%H:%M:%S"), "h"), 
icon = icon("time", lib = "glyphicon"),
color = "teal", fill =TRUE, width = 3)})
output$picture <- renderImage({
return(list(src = "C:/Users//Documents/My//des.png", contentType = 
"image/png", alt = "Analytics"))
}) #deleteFile = FALSE)
}

shinyApp(ui, server)

[kmprioli]

Hi there,

You're missing an imageOutput() call in your ui. I wasn't able to run your code as is - there are some misplaced parentheses and missing commas. I corrected these issues and added the necessary imageOutput() statement, and replaced the path for your image with one of my own:

library(shiny)
library(shinydashboard)
#> 
#> Attaching package: 'shinydashboard'
#> The following object is masked from 'package:graphics':
#> 
#>     box
library(tidyverse)
library(ggthemes)
library(DT)
#> 
#> Attaching package: 'DT'
#> The following objects are masked from 'package:shiny':
#> 
#>     dataTableOutput, renderDataTable
library(lubridate)
#> 
#> Attaching package: 'lubridate'
#> The following object is masked from 'package:base':
#> 
#>     date
library(png)

ui <- 
  dashboardPage(skin = "red",
                dashboardHeader(title = "ABC", titleWidth = 300),
                dashboardSidebar( 
                  sidebarMenu(id = "tabs",
                              imageOutput("picture", height = 100),
                              menuItem("ANALY", tabName = "tab0",
                                       menuSubItem("ABC", tabName = "tab1")))), 
                
                dashboardBody(
                  ### changing theme
                  #shinyDashboardThemes(theme = "grey_dark"),
                  mainPanel(
                    tabItems(
                      tabItem(tabName = "tab0"),
                      tabItem(tabName = "tab1",  class='active', h2("area 1"),
                              fluidRow(column(width = 8,
                                              tabItem(tabName = "tab1", plotOutput("plot1"), width = 8)), 
                                       column(width = 4,
                                              tabItem(tabName = "tab1", width = 4,
                                                      infoBoxOutput("ordersbox", width = NULL),
                                                      infoBoxOutput("progressBox", width = NULL),
                                                      infoBoxOutput("approvalBox", width = NULL),
                                                      infoBoxOutput("BonusBox", width = NULL)))
                                       
                              )   #tabItems
                      )    #main Panel
                    )      #dashboard body
                  )))  #UI

server <- function(input, output, session){
  
  # 1. Box
  output$ordersbox <- renderInfoBox({
    infoBox(
      "KPI 1", "120", icon = icon("users", lib = "font-awesome"),
      color = "light-blue", fill =TRUE, width = 3
    )
  }) 
  
  # 2. Box
  output$progressBox <- renderInfoBox({
    invalidateLater(as.integer(1000))
    infoBox("Time",
            paste(format(Sys.time(), "%H:%M:%S"), "h"), 
            icon = icon("time", lib = "glyphicon"),
            color = "teal", fill =TRUE, width = 3
    )
  })
  
  # 3. Box
  output$approvalBox <- renderInfoBox({
    infoBox(
      "KPI 2", "120", icon = icon("check-square", lib = "font-awesome"),
      color = "yellow", fill =TRUE,width = 3
    )
  })
  # 4. Box
  output$BonusBox <- renderInfoBox({infoBox("ttt",
                                            "KPI 3", "110", icon = icon("info-circle", lib = "font-awesome"),
                                            color = "red", fill =TRUE, width = 3)})  
  # 1.`enter code here`
  output$ordersbox1 <- renderInfoBox({
    infoBox(
      "KPI 1", "120", icon = icon("users", lib = "font-awesome"),
      color = "light-blue", fill =TRUE, width = 3)
  })   
  # 2. Box
  output$progressBox1 <- renderInfoBox({
    invalidateLater(as.integer(1000))
    infoBox("Time",
            paste(format(Sys.time(), "%H:%M:%S"), "h"), 
            icon = icon("time", lib = "glyphicon"),
            color = "teal", fill =TRUE, width = 3)})
  output$picture <- renderImage({
    return(list(src = "C:/Users/Katherine/Desktop/smiley.png", contentType = 
                  "image/png", alt = "Analytics"))
  }) #deleteFile = FALSE)
}

shinyApp(ui, server)
#> Error in appshot.shiny.appobj(structure(list(httpHandler = function (req) : appshot of Shiny app objects is not yet supported.

Created on 2018-10-20 by the reprex package (v0.2.0).

This yields the following:

Incidentally, there's an easier way to do this if reactivity isn't needed: you could create a www subfolder in your app's directory, then place the image inside that folder. Then, instead of adding the imageOutput() statement, you could use an img tag like this: tags$img(src = "smiley.png", height = "100px").

I hope this helps!