All geek questions in one place

Switch between menuSubItems in shinyDashboard

I am trying to set up a brilliant app using shinydashboard, and for the most part, having luck. Nevertheless, I am faced with a quirk with the behavior of the side panels, which, it seems to me, can be avoided, but have not yet been found.

Below is a small example that reproduces the problem I am facing. Basically, there are two sidebarMenus - Menu One and Menu Two, each with two menuSubItems. Switching sub-items to a menu item works fine. So, if I wanted to switch from subItemOne to subItemTwo, no problem. I can do it all day.

I can also switch to subItems in different menus, so switching from subItemOne to subItemThree is fine. The problem is trying to go back. If subItemOne is selected and I try to go to subItemThree and return to subItemOne, I cannot do this. I need to go to subItemTwo, then I can open SubItemOne.

Is there a way to fix this setting so that I can go directly from subItemOne to subItemThree (or two and four) and vice versa?

library('shiny') library('shinydashboard') # Sidebar ############################# sidebar <- dashboardSidebar( width = 290, sidebarMenu( menuItem('Menu One', tabName = 'menuOne', icon = icon('line-chart'), collapsible = menuSubItem('Sub-Item One', tabName = 'subItemOne'), menuSubItem('Sub-Item Two', tabName = 'subItemTwo') ) ), sidebarMenu( menuItem('Menu Two', tabName = 'menuTwo', icon = icon('users'), collapsible = menuSubItem('Sub-Item Three', tabName = 'subItemThree'), menuSubItem('Sub-Item Four', tabName = 'subItemFour') ) ) ) # Body ############################# body <- dashboardBody( tabItems( tabItem(tabName = 'subItemOne', h2('Selected Sub-Item One') ), tabItem(tabName = 'subItemTwo', h2('Selected Sub-Item Two') ), tabItem(tabName = 'subItemThree', h2('Selected Sub-Item Three') ), tabItem(tabName = 'subItemFour', h2('Selected Sub-Item Four') ) ) ) # UI ############################# ui <- dashboardPage( dashboardHeader(title = 'Test', titleWidth = 290), sidebar, body ) # Server ############################# server <- function(input, output){ } shinyApp(ui, server)
+5
source share
1 answer

The problem is that the tabs remain active, and clicking on the active tab does not refresh the user interface. This can be fixed with some Javascript.

 library('shiny') library('shinydashboard') # Sidebar ############################# sidebar <- dashboardSidebar( tags$head( tags$script( HTML( " $(document).ready(function(){ // Bind classes to menu items, easiet to fill in manually var ids = ['subItemOne','subItemTwo','subItemThree','subItemFour']; for(i=0; i<ids.length; i++){ $('a[data-value='+ids[i]+']').addClass('my_subitem_class'); } // Register click handeler $('.my_subitem_class').on('click',function(){ // Unactive menuSubItems $('.my_subitem_class').parent().removeClass('active'); }) }) " ) ) ), width = 290, sidebarMenu( menuItem('Menu One', tabName = 'menuOne', icon = icon('line-chart'), collapsible = menuSubItem('Sub-Item One', tabName = 'subItemOne'), menuSubItem('Sub-Item Two', tabName = 'subItemTwo') ) ), sidebarMenu( menuItem('Menu Two', tabName = 'menuTwo', icon = icon('users'), collapsible = menuSubItem('Sub-Item Three', tabName = 'subItemThree'), menuSubItem('Sub-Item Four', tabName = 'subItemFour') ) ) ) # Body ############################# body <- dashboardBody( tabItems( tabItem(tabName = 'subItemOne', h2('Selected Sub-Item One') ), tabItem(tabName = 'subItemTwo', h2('Selected Sub-Item Two') ), tabItem(tabName = 'subItemThree', h2('Selected Sub-Item Three') ), tabItem(tabName = 'subItemFour', h2('Selected Sub-Item Four') ) ) ) # UI ############################# ui <- dashboardPage( dashboardHeader(title = 'Test', titleWidth = 290), sidebar, body ) # Server ############################# server <- function(input, output){ } shinyApp(ui, server)
+5
source

Source: https://habr.com/ru/post/1232542/

More articles:


All Articles