How to make appear sidebar on hover instead of click in Shiny? - r

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)

Related

Toggle display of sidebar menu in shinydashboard programmatically

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)

align action button with inputs in shinydashboards

Hello.
I am trying to align the materialSwitch checkbox with some pickerInput boxes.
Here's what it looks like vs what I want it to look like:
Here is a simplified code of the problem, help please!
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(column(materialSwitch("t0"),width=1),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)
Also, if there's a way to tighten the space, or reduce the margin between the switch and the input boxes that would swell. My current code also makes one of the pickerInputs at a different width than the others (to include the switch), if there's a way to proportion them so they're all the same width that would be extra swell.
Thanks.

You can apply some css to move the materialSwitch.
div(column(materialSwitch("t0"),width=1), style = 'top: 25px;position:relative;')
Complete code -
library(shiny)
library(shinydashboard)
library(shinyWidgets)
#----------------------------------------------------------------------------#
ui <- {dashboardPage(
dashboardHeader(title=""),
dashboardSidebar(),
dashboardBody(
fluidRow(box(div(column(materialSwitch("t0"),width=1), style = ' top: 25px;position: relative;'),
column(pickerInput(inputId="t1",label="",choices=c("Yes","No")),
pickerInput(inputId="t2",label="",choices=c("Yes","No")),width=3),
column(pickerInput(inputId="t3",label="",choices=c("Yes","No")),
pickerInput(inputId="t4",label="",choices=c("Yes","No")),width=4),
column(pickerInput(inputId="t5",label="",choices=c("Yes","No")),
pickerInput(inputId="t6",label="",choices=c("Yes","No")),width=4),
actionButton("t7","",width="100%"),width=12))))
}
#----------------------------------------------------------------------------#
server <- function(input, output) {}
#----------------------------------------------------------------------------#
shinyApp(ui = ui, server = server)

Add picture in dashboardHeader

I need your help for my R shiny application. I want to add a logo near the title in dashboardHeader. The logo don't display in the page. Can you help me ? Thanks in advance.
This is the code :
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = tags$img(src='logo.JPG', height = '60', width ='60')),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)

Just create a new folder with the name "www" in the same directory as your script and add your picture in that

Your code seems to work just fine. Try this for example with an image from the internet(I just put google as an example).
library(shiny)
library(shinydashboard)
shinyApp(
ui = dashboardPage(
dashboardHeader(title = tags$img(src='https://cdn.vox-cdn.com/thumbor/Ous3VQj1sn4tvb3H13rIu8eGoZs=/0x0:2012x1341/1400x788/filters:focal(0x0:2012x1341):format(jpeg)/cdn.vox-cdn.com/uploads/chorus_image/image/47070706/google2.0.0.jpg', height = '60', width ='60')),
dashboardSidebar(),
dashboardBody()
),
server = function(input, output) {}
)

Logo not loading on shiny dashboard

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)

picture as a background of shiny dashboard

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)

Resources