Disabling/Enabling Sidebar from Server Side

disabling/enabling sidebar from server side

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")
})
}
)

Disable/Enable click on dashboard sidebar in shiny

You can do this using shinyjs package along with some custom css. Here is a minimal example:

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(
useShinyjs(),
sidebarMenu(id = "sidebar",
tags$head(tags$style(".inactiveLink {
pointer-events: none;
cursor: default;
}")),
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)

),
dashboardBody(
tabItems(
# First tab content
tabItem(tabName = "dashboard",
actionButton("Disable", "Disable Widgets"),
actionButton("Enable", "Enable Widgets")
),

# Second tab content
tabItem(tabName = "widgets",
h2("Widgets tab content")
)
)
)
)

server <- function(input, output){


observeEvent(input$Disable, {
addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")

})
observeEvent(input$Enable, {
removeCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
})

}
shinyApp(ui, server)

By clicking the button "Enable(Enable Widgets)" and "Disable(Disable Widgets)" you can enable and disable the menuitem widgets.

EDIT:

To ensure that the when the app loads the menuItems are disabled you can just add the addCssClass function in your server so that your it gets executed when your app loads.

So the code will look something like this:

library(shinydashboard)
library(shinyjs)

ui <- dashboardPage(
dashboardHeader(title = "Basic dashboard"),
dashboardSidebar(
useShinyjs(),
sidebarMenu(id = "sidebar",
tags$head(tags$style(".inactiveLink {
pointer-events: none;
cursor: default;
}")),
menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
menuItem("Widgets", tabName = "widgets", icon = icon("th"))
)

),
dashboardBody(
tabItems(
# First tab content
tabItem(tabName = "dashboard",
actionButton("Disable", "Disable Widgets"),
actionButton("Enable", "Enable Widgets")
),

# Second tab content
tabItem(tabName = "widgets",
h2("Widgets tab content")
)
)
)
)

server <- function(input, output){

#Disable menuitem when the app loads
addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")

observeEvent(input$Disable, {
addCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")

})
observeEvent(input$Enable, {
removeCssClass(selector = "a[data-value='widgets']", class = "inactiveLink")
})

}
shinyApp(ui, server)

To enable and disable sidebar toggle button using a action button

I have found a solution to this...If someone is stuck with same problem, can refer to below solution:

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- shinyUI(dashboardPage(
dashboardHeader(),
dashboardSidebar( tags$head(
tags$script(
HTML(#code for hiding sidebar tabs
"Shiny.addCustomMessageHandler('manipulateMenuItem1', function(message)
{
var aNodeList = document.getElementsByTagName('a');

for (var i = 0; i < aNodeList.length; i++)
{
if(aNodeList[i].getAttribute('data-toggle') == message.toggle && aNodeList[i].getAttribute('role') == message.role)
{
if(message.action == 'hide')
{
aNodeList[i].setAttribute('style', 'display: none;');
}
else
{
aNodeList[i].setAttribute('style', 'display: block;');
};
};
}
});"
)
)
)
),
dashboardBody(
useShinyjs(),
actionButton("h1","Hide toggle"),
actionButton("h2","Show toggle")
)
))

server <- shinyServer(function(input, output, session) {
observeEvent(input$h1,{
session$sendCustomMessage(type = "manipulateMenuItem1", message = list(action = "hide",toggle = "offcanvas", role = "button"))
})
observeEvent(input$h2,{
session$sendCustomMessage(type = "manipulateMenuItem1", message = list(action = "show",toggle = "offcanvas", role = "button"))
})
})

shinyApp(ui = ui, server = server)

Hide sidebar in default in shinydashboard

This is very similar to my answer from another SO thread: "disabling/enabling sidebar from server side"

Here's code that can do what you want by hiding the sidebar when the app starts (using the package shinyjs)

library(shiny)
library(shinydashboard)
library(shinyjs)

ui <- shinyUI(dashboardPage(
dashboardHeader(),
dashboardSidebar(),
dashboardBody(
useShinyjs()
)
))

server <- shinyServer(function(input, output, session) {
addClass(selector = "body", class = "sidebar-collapse")
})

shinyApp(ui = ui, server = server)

Disable right sidebar ability at all for a specific tab of a shiny dashboard

Edit:
Here an updated version using updateControlbar can be found.

Please see the following:

## app.R ##
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(DT)
library(shinyWidgets)
library(shinyjs)

ui <- dashboardPagePlus(
dashboardHeaderPlus(
enable_rightsidebar = TRUE,
rightSidebarIcon = "gears",
fixed = T
),
dashboardSidebar(),
dashboardBody(
useShinyjs(),
tags$hr(),
tabsetPanel(
id ="tabA",
type = "tabs",
tabPanel("Front",icon = icon("accusoft")),
tabPanel("Data", icon = icon("table")
)
)
),
rightsidebar = rightSidebar()
)

server <- function(input, output) {
observe({
if (input$tabA == "Front") {
hide(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
addClass(selector = "body", class = "sidebar-collapse")
removeClass(selector = "body", class = "control-sidebar-open")
} else {
show(selector = "body > div.wrapper > header > nav > div:nth-child(4) > ul")
removeClass(selector = "body", class = "sidebar-collapse")
addClass(selector = "body", class = "control-sidebar-open")
}
})
}

shinyApp(ui = ui, server = server)

Hide totally the sidebar when pressing the toggle button in shiny dashboard

You can add sidebar_fullCollapse=TRUE in to the dashboardPagePlus command to fully collapse it

How to Disable Shiny bs4Dash Dashboard controlbar (Right Sidebar)

You can remove controlbar argument to disable it.

library(shiny)
library(bs4Dash)

ui = dashboardPage(
header = dashboardHeader(),
sidebar = dashboardSidebar(
disable = T
),
body = dashboardBody(),
title = ""
)

server <- function(input, output, session) {}
shinyApp(ui, server)

closing sidebar in shiny dashboard

Only using useShinyjs() doesn't do the trick. It only sets up shinyjs, but you need to tell it what to do. The idea here is to add the class "sidebar-collapse" to the body, as this hides the sidebar. The sidebar should always been hidden if a tab was switched, so have to add an observer that listens if a tab was switched. Then you can use shinyjs to add the class with addClass. The input of the tabswitch is the id of the sidebarMenu:

library(shiny)
library(dplyr)
library(shiny)
library(shinydashboard)
library(shinydashboardPlus)
library(shinyjs)
library(shinyWidgets)
library(shinyBS)
library(plotly)

Stores <- data.frame(Store = c("Store 1", "Store 2", "Store 3", "Store 4", "Store 5"),
Sales = c(8247930, 423094, 204829, 903982, 7489472, 429085, 208955, 7492852, 5285034, 2958275,1598753, 28487593, 4892049, 583042, 509275, 5904728, 5098325, 5920947, 4920946, 2049583),
Avg_cust = c(325,542,582,482,904, 594, 304, 493, 690, 403, 694, 104, 493, 596, 403, 506, 304, 305, 632, 478),
Year = c(rep(2012,5), rep(2013,5), rep(2014,5), rep(2015,5)))

ui <- dashboardPage(
header = dashboardHeader(
title = "Store Performance"),
sidebar = dashboardSidebar(
width = 200,
collapsed = FALSE,
sidebarMenu(id = "tabs",
menuItem("Page 1", tabName = "pg1"),
menuItem("Page 2", tabName = "pg2"))),
skin = "black",
body = dashboardBody(
useShinyjs(),
tabItems(
tabItem("pg1",
fluidRow(
column(width = 3,
box(
title = "Options",
status = 'warning',
solidHeader = TRUE,
width = 12,
collapsible = FALSE,
collapsed = FALSE,
pickerInput(
inputId = "YR",
label = "Year:",
choices = c(2012,2013,2014,2015),
selected = 2015,
multiple = FALSE))),
column(width = 9,
box(plotlyOutput("All"),
status = 'warning',
width = 12,
solidHeader = TRUE,
collapsible = FALSE,
closable = FALSE,
collapsed = FALSE)))),
tabItem("pg2",
fluidRow(
column(width = 9,
box(title = "Add graph here",
width = 12,
status = "warning",
solidHeader = TRUE,
collapsible = FALSE,
closable = FALSE,
collapsed = FALSE)),
column(width = 3,
box(
title = "Options",
status = 'warning',
solidHeader = TRUE,
width = 12,
collapsible = FALSE,
collapsed = FALSE,
pickerInput(
inputId = "st",
label = "Store:",
choices = unique(Stores$Store),
selected = "Store 1",
multiple = FALSE
))))))))

server <- function(input, output) {

output$All <- renderPlotly({
plot_ly(Stores[Stores$Year == input$YR,], x = ~Avg_cust, y = ~Sales,
hoverinfo = "text", text = ~Store)%>%
layout(title = "Store Performance",
xaxis = list(title = "Customers"),
yaxis = list(title = "Sales"))
})

observeEvent(input$tabs, {
addClass(selector = "body", class = "sidebar-collapse")
})



}

shinyApp(ui = ui, server = server)

BTW: you also need the package shinydashboardPlus. Also, I removed your observer because I don't know what you want to achieve. Lastly, I reduced the width of the header, because otherwise the button to show the sidebar is hidden.

For more information how it works, have a look here and here.

ASP.Net Remove Sidebar from Wizard Control

You can achieve this using the Wizard.DisplaySideBar Property like so:

<asp:Wizard ID="wizard1" runat="server" DisplaySideBar="false">...


Related Topics



Leave a reply



Submit