Get Active TabName

I want to get active tabname. I am aware it is possible using id parameter in sidebarmenu and then call it using input$id in server. I can't use this functionality as I have customised sidebar which does not return selected (or active) tab name. Hence I want to solve it using javascript. I tried this using

`$('.tab-content').find('.active').attr('data-value')

but it is not working properly....

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


jscode <- "shinyjs.gettab = function () {
 $('.tab-content').find('.active').attr('data-value')
 }"

  ui <- dashboardPage(
    dashboardHeader(title = "Basic Use of JS"),
    dashboardSidebar(
      sidebarMenu(
        menuItem(
          text = "HOME",
          tabName = "home",
          icon = icon("home")
        ),
        menuItem(
          text = "MAP",
          tabName = "map",
          icon = icon("map")
        )
    )),
    dashboardBody(
      useShinyjs(),
      extendShinyjs(text = jscode)

    ))

  server = function(input, output) { 

    observe({ print(js$gettab()) })

    }

runApp(list(ui = ui, server = server), launch.browser =T)

Hi!

Could you show you new dashboardSidebar function? What is/are the reason(s) of such choice?

From your deleted message, I see that you are using gentellellaShiny, which has no id in the sidebar menu (returning the currently selected tab). Therefore, as you mentioned, you need to proceed differently. The best solution is that I add an id argument to that function and implement the associated input binding to return the selected tab with input$ as well as create a new updateSidebarItem to programmatically change the currently selected item. The code you showed cannot run since there is no shiny input associated with the current tab so the observe event will never fire. Before I implement this feature, a way to solve your problem is to set an input on the client side using JS and the Shiny.setInputValue method:

library(shiny)
library(gentelellaShiny)


options(shiny.jquery.version=1)
shinyApp(
  ui = gentelellaPageCustom(
    title = "Shiny Gentelella",
    navbar = gentelellaNavbar(),
    sidebar = gentelellaSidebar(
      sidebarProfile(
        name = "Mark",
        img = "https://image.flaticon.com/icons/svg/236/236831.svg"
      ),
      sidebarDate(),
      sidebarMenu(
        sidebarItem(
          "Tab 1",
          tabName = "tab1"
        ),
        sidebarItem(
          "Tab 2", 
          tabName = "tab2"
        )
      )
    ),
    body = gentelellaBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          tags$head(
            tags$script(
              "$(function() {
                $('li a').on('click', function() {
                  var val = $(this).attr('data-value');
                  Shiny.setInputValue('currentTab', val);
                });
                // trigger click on the first item
                setTimeout(function(){
                  $('li a').first().trigger('click');
                }, 10);
              });
              "
            )
          ),
          "Tab 1 content"
        ),
        tabItem(
          tabName = "tab2",
          "Tab 2 content"
        )
      )
    ),
    footer = gentelellaFooter()
  ),
  server = function(input, output, session) {
    observe(print(input$currentTab))
  }
)

Keep in mind it is better to wait for the "clean solution" (with input bindings)...

1 Like

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.