I am working with R shiny dashboard and was wondering if I can collapse/show the sidebar with an additional button, just like the already existing one on top of the sidebar.
Is that possible?
Cheers
You can add / remove the needed css class to / from the body via shinyjs:
library(shiny)
library(shinyjs)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
shinyjs::useShinyjs(),
actionButton("toggle_btn", "Toggle sidebar")
)
)
server <- function(input, output, session) {
observeEvent(input$toggle_btn, {
shinyjs::toggleClass(selector = "body", class = "sidebar-collapse")
})
}
shinyApp(ui, server)
Related
I am trying to use shiny for the first time to build a very simple web app.
I would like to add a logo on the left hand corner of my dashboard but failing to load the pic
this is what I have written:
library(shiny)
library(shinydashboard)
shinyUI(
dashboardPage(
dashboardHeader(title=tags$img(src='logo.jpg')),
dashboardSidebar(),
dashboardBody()
)
)
This is the structure of my folder
GH
-->model
---->app
------>webapp
server.R
ui.R
--> pictures
logo.jpg
If I run my app I get a question mark as a placeholder of the actual picture
Try forcing it with addResourcePath(prefix, path), and then use src = "prefix/logo.jpg"
library(shiny)
library(shinydashboard)
ui <- function(){
addResourcePath("www", "www")
tagList(
dashboardPage(
dashboardHeader(title = tags$img( src='www/logo.png') ),
dashboardSidebar(),
dashboardBody()
)
)
}
server <- function(input, output) {
}
# Run the application
shinyApp(ui = ui, server = server)
I am working on a shiny application and have used shinydashboard package for the UI part. I want to open the sidebar on hover instead of click on the button. I have tried data-trigger option but it is not working. Can anyone please help me in doing this?
A minimal example for the shiny dashboard application
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody()
)
server <- function(input, output) { }
shinyApp(ui, server)
You can do it with JQuery:
## app.R ##
library(shiny)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(),
tags$head(tags$script(HTML("$(function() { $('a.sidebar-toggle').mouseover(function(e) { $(this).click()})});")))
)
server <- function(input, output) { }
shinyApp(ui, server)
I have a server generated sidebar. After its creation, I want to hide its first element. The observer doing the hiding is executed, however, the menuitem is not hidden. I am trying to figure out, why it does not work. Any thoughts?
PS. The CSS selector appears to be correct, as all works when the UI is not created on the server.
library(shiny)
library(shinyjs)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
uiOutput("sidebar_ui")
),
dashboardBody(
shinyjs::useShinyjs()
)
)
server <- function(session, input, output)
{
rv <- reactiveValues()
output$sidebar_ui <- renderUI({
rv$trigger_sidebar_config <- 0
cat("\nSidebar create")
sidebarMenu(id = "sidebar",
menuItem("Menu1", tabName = "tab_menu_1"), # to be hidden
menuItem("Menu2", tabName = "tab_menu_2") )
})
observeEvent(rv$trigger_sidebar_config, {
cat("\nSidebar config")
shinyjs::hide(selector = '[data-value="tab_menu_1"]') # hide menuitem
})
}
shinyApp(ui, server)
Your observeEvent is executed too early because the reactive value trigger_sidebar_config is updated during the same cycle as renderUI. Accordingly shiny tries to hide an UI element which isn't existing yet (you would have to wait for the UI beeing rendered, instead of it's calculation beeing triggered, for this to work).
You can test this e.g. via delaying the execution of shinyjs::hide - it works when triggered by an actionButton (Please see my below example) or you have a look at the reactlog:
Here you can see, that the observeEvent triggered via trigger_sidebar_config finished calculating after 3ms but the sidebar wasn't ready at this time (30ms).
If you want the tab to be hidden on startup you can use hidden() in your renderUI call (see Menu3):
library(shiny)
library(shinyjs)
library(shinydashboard)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(
uiOutput("sidebar_ui")
),
dashboardBody(
shinyjs::useShinyjs(),
actionButton("hide", "hide tab")
)
)
server <- function(session, input, output)
{
rv <- reactiveValues()
output$sidebar_ui <- renderUI({
rv$trigger_sidebar_config <- 0
cat("\nSidebar create")
sidebarMenu(id = "sidebar",
menuItem("Menu1", tabName = "tab_menu_1"), # to be hidden
menuItem("Menu2", tabName = "tab_menu_2"),
shinyjs::hidden(menuItem("Menu3", tabName = "tab_menu_3")))
})
observeEvent(input$hide, {
cat("\nSidebar config")
shinyjs::hide(selector = '[data-value="tab_menu_1"]') # hide menuitem
})
}
shinyApp(ui, server)
In this context please also see ?renderMenu().
I would like to change background in my shiny dashboard App. I wound in internet function setBackgroundImage (https://rdrr.io/cran/shinyWidgets/man/setBackgroundImage.html). The problem is that I don't know were I should put that function in my app. In example is classic app, not dashboard.
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
setBackgroundImage(src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg")
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Also it is possible to put leaflet map as a background?
You can do it with tags$img(), and specifying position attribute to absolute. Note that img tag have to be placed as first in dashboardBody:
...
dashboardBody(
tags$img(
src = "http://wallpics4k.com/wp-content/uploads/2014/07/470318.jpg",
style = 'position: absolute'
),
...
)
...
It also accepts width and height parameters. You can also position your image with hspace and vspace parameters.
Now there is also the possibility to add shinydashboard = TRUE to the setBackgroundImage function.
library(shiny)
library(shinydashboard)
library(shinyWidgets)
ui <- dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
setBackgroundImage(
src = "https://www.fillmurray.com/1920/1080",
shinydashboard = TRUE
)
)
)
server <- function(input, output) {}
shinyApp(ui, server)
Is there any way to manually disabling/enabling the sidebar on shiny dashboard app from the server side?
I would like to hide the sidebar automatically when I need more space without using toggle button on the header.
Thank you
I'm not very familiar with dashboards as I never built one, but from a taking a quick look, it seems like when clicking on the open/hide sidebar button, all that happens is a sidebar-collapse class gets added/removed to the <body> tag. Maybe more things happen that I'm unaware of, but that seemed to be the most visible thing.
So you can easily use shinyjs package (disclaimer: I'm the author) to add/remove that class
library(shiny)
library(shinydashboard)
library(shinyjs)
shinyApp(
ui =
dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
shinyjs::useShinyjs(),
actionButton("showSidebar", "Show sidebar"),
actionButton("hideSidebar", "Hide sidebar")
)
),
server = function(input, output, session) {
observeEvent(input$showSidebar, {
shinyjs::removeClass(selector = "body", class = "sidebar-collapse")
})
observeEvent(input$hideSidebar, {
shinyjs::addClass(selector = "body", class = "sidebar-collapse")
})
}
)