Different tabName in SideBar and TabItems-CodePudding

In my shinydashboard app, I want to specify a different tabName in the sidebarMenu from the tabName in the body. The server function should then catch the tabName on click and call updateTabItems.

The idea is, that some menu items in the sidebar should go to the same tab, and the longer tabName in the sideBar contains additional information used to fill the tab.

When both tabNames in sideBar and tabItems are the same, the code works. However, if I change the tabName in the sideBar, e.g. to one_param_val, updateTabItems stops working.

Any ideas why that is and what I can do about it?

library(shiny)
library(shinydashboard)

ui <- shinydashboardPlus::dashboardPage(
    header=shinydashboard::dashboardHeader(title = "Switch tabs"),
    sidebar=shinydashboard::dashboardSidebar(
        shinydashboard::sidebarMenu(id = "tabs",
            shinydashboard::menuItem(
                "Menu Item 1", tabName = "one_param_val" # works for tabName="one"
            ),
            shinydashboard::menuItem(
                "Menu Item 2", tabName = "two"
            )
        )
    ),
    body=shinydashboard::dashboardBody(
        shinydashboard::tabItems(
            shinydashboard::tabItem(
                tabName = "one", h2("Content One")
            ),
            shinydashboard::tabItem(
                tabName = "two", h2("Content Two")
            )
        )   
    )
)

server <- function(input, output, session) {
    shiny::observeEvent(input$tabs, {
        if(grepl("^one", input$tabs)) {
            message("switching to one")
            shinydashboard::updateTabItems(
                session, inputId="tabs", selected="one"
            )
        }
    })
}

shinyApp(ui, server)

CodePudding user response：

Here is a workaround using a hidden menuItem. However the proxy menuItem will no longer get marked as selected in the sidebar:

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

ui <- shinydashboardPlus::dashboardPage(
  header=shinydashboard::dashboardHeader(title = "Switch tabs"),
  sidebar=shinydashboard::dashboardSidebar(
    shinydashboard::sidebarMenu(id = "tabs",
                                shinyjs::hidden(shinydashboard::menuItem(
                                  "Menu Item 1", tabName = "one"
                                )),
                                shinydashboard::menuItem(
                                  "Menu Item 1", tabName = "one_param_val"
                                ),
                                shinydashboard::menuItem(
                                  "Menu Item 2", tabName = "two"
                                )
    )
  ),
  body=shinydashboard::dashboardBody(
    useShinyjs(),
    shinydashboard::tabItems(
      shinydashboard::tabItem(
        tabName = "one", h2("Content One")
      ),
      shinydashboard::tabItem(
        tabName = "two", h2("Content Two")
      )
    )   
  )
)

server <- function(input, output, session) {
  shiny::observeEvent(input$tabs, {
    # browser()
    if(grepl("^one", input$tabs)) {
      message("switching to one")
      shinydashboard::updateTabItems(
        session, inputId="tabs", selected="one"
      )
    }
  })
}

shinyApp(ui, server)