javascript - DisableEnable click on dashboard sidebar in shiny - Stack Overflow

admin管理员组

文章数量:1277385

Is there a way by which I can disable/enable click on dashboard sidebar so as to prevent the user from navigating to a different view in shiny?.

I came across this solution "disabling/enabling sidebar from server side" but all it does is collapse/un-collapse the sidebar.

But I am looking for some solution by which I can enable/disable the click on it ,so as to have more control over when to allow access to the users to navigate to a different view.

One use case is: If I want user to first fill all the inputs on the first page before he/she can navigate to a different section.

Is there a way by which I can disable/enable click on dashboard sidebar so as to prevent the user from navigating to a different view in shiny?.

I came across this solution "disabling/enabling sidebar from server side" but all it does is collapse/un-collapse the sidebar.

But I am looking for some solution by which I can enable/disable the click on it ,so as to have more control over when to allow access to the users to navigate to a different view.

One use case is: If I want user to first fill all the inputs on the first page before he/she can navigate to a different section.

• javascript
• r
• shiny
• shinydashboard

Share Improve this question Follow edited Jan 5, 2024 at 10:28 ismirsehregal 33.5k55 gold badges4545 silver badges9292 bronze badges asked Jan 16, 2018 at 9:36 Rohit SalujaRohit Saluja 1,51722 gold badges1717 silver badges2626 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11

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)

Regarding the ment by @yeahman269:

Thank you very much @SBista for your answer. Is there an easy way to modify the cursor with the mon "ban" icon? Or doing something which intuitively shows the user that the tab ("Widget" here) is disabled? Because we can't visually distinguish its state.

If you want to custum the cursor and have the same style of disable button, you need to custum .inactiveLink first, and after modify .inactiveLink:active (as suggested here : Add CSS cursor property when using "pointer-events: none"? )

dashboardSidebar(
    useShinyjs(),
    sidebarMenu(id = "sidebar",
                tags$head(tags$style(".inactiveLink {
                                     cursor: not-allowed;
                                     }
                                     .inactiveLink:active {
                                     pointer-events: none;
                                     }")),
     menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
     menuItem("Widgets", tabName = "widgets", icon = icon("th"))
                )
   )

本文标签： javascriptDisableEnable click on dashboard sidebar in shinyStack Overflow