How to add company logo to ShinyDashboard header (not mainPanel or mainHeader)
I tried referring to the answers below, but the logo is inside the main panel, but not the title bar ... Any solution?
- Adding a company logo to the ShinyDashboard header
- Embedding an image in a shiny app
- Add company logo to every page using Rstudio and knitr [duplicate]
I saw that RANDOM VARIABLES DISTRIBUTION has a logo inside the main panel title, but cannot work in the shinyDashboard title. Below is the encoding of the company logo title:
headerPanel(
HTML('Distributions of Random Variables v4
<a href="http://snap.uaf.edu" target="_blank"><img align="right" alt="SNAP Logo" src="./img/SNAP_acronym_100px.png" /></a>'
), "Distributions of Random Variables"
),
Below is my coding for adding a company logo and the source codes are here. Any idea?
dbHeader <- dashboardHeader(title = 'Reporting Dashboard',
dropdownMenuOutput('messageMenu'),
dropdownMenu(type = 'notifications',
notificationItem(text = '5 new users today', icon('users')),
notificationItem(text = '12 items delivered',
icon('truck'), status = 'success'),
notificationItem(text = 'Server load at 86%',
icon = icon('exclamation-triangle'),
status = 'warning')),
dropdownMenu(type = 'tasks',
badgeStatus = 'success',
taskItem(value = 90, color = 'green', 'Documentation'),
taskItem(value = 17, color = 'aqua', 'Project X'),
taskItem(value = 75, color = 'yellow', 'Server deployment'),
taskItem(value = 80, color = 'red', 'Overall project')))
dbHeader$children$children <- HTML("<a href='http://www.scibrokes.com' target='_blank'>
<img align='right' alt='Logo' src='./oda-army.jpg'/></a>")
source to share
the solution is to hide your image so that it shiny
displays it as if it displayed a normal element dropdownMenu
.
As you can see on your console, it dashboardHeader
gives errors
Error in FUN(X[[i]], ...) : Expected tag to be of type li
if you try to insert any custom HTML. And if you choose a tag li
, it even works out
Error in FUN(X[[i]], ...) : Expected tag to have class 'dropdown'
So here's your deal, add your image to a wrapper li
with a class dropdown
and you're good to go.
Sample code:
library(shinydashboard)
library(shiny)
runApp(
shinyApp(
ui = shinyUI(
dashboardPage(
dashboardHeader(title = 'Reporting Dashboard',
tags$li(class = "dropdown",
tags$a(href="http://snap.uaf.edu", target="_blank",
tags$img(height = "20px", alt="SNAP Logo", src="https://www.snap.uaf.edu/sites/default/files/pictures/snap_symbol_color.png")
)
),
dropdownMenuOutput('messageMenu'),
dropdownMenu(type = 'notifications',
notificationItem(text = '5 new users today', icon('users')),
notificationItem(text = '12 items delivered',
icon('truck'), status = 'success'),
notificationItem(text = 'Server load at 86%',
icon = icon('exclamation-triangle'),
status = 'warning')),
dropdownMenu(type = 'tasks',
badgeStatus = 'success',
taskItem(value = 90, color = 'green', 'Documentation'),
taskItem(value = 17, color = 'aqua', 'Project X'),
taskItem(value = 75, color = 'yellow', 'Server deployment'),
taskItem(value = 80, color = 'red', 'Overall project'))
),
dashboardSidebar(),
dashboardBody()
)
),
server = function(input, output){}
), launch.browser = TRUE
)
Hope this helps!
source to share
dashboardBody(
tags$img(align="right",src="http://www.pagesolutions.co.uk/wp-content/uploads/2016/03/Finalised-logo.png",height="50px"),
tags$strong("PAGE SOLUTIONS",style="color:#0a90d3"),tags$p("CLASSIFICATION MODELING",style="color:black"),
tags$p("Customer Classification"),
...
)
source to share