Extract Name of Active Tab of Shiny Dashboard

Question

I want to extract active tabname. I have customised sidebar which does not return selected (or active) tab name. Hence I can't use this method : id parameter in sidebarmenu and then call it using input$id in server. Hence I want to solve it using javascript. I tried this using JS $('.tab-content').find('.active').attr('data-value') but it is not working properly.

library(shiny)
# devtools::install_github("MarkEdmondson1234/gentelellaShiny")
library(gentelellaShiny)
library(shinyWidgets)

options(shiny.jquery.version=1)

shinyApp(
  ui = gentelellaPageCustom(
    title = "Shiny Gentelella",
    navbar = gentelellaNavbar(
      navbarItems = notif(
        id = "menunotif",
        icon = icon("envelope-o"),
        status = "primary",
        expanded = FALSE,
        lapply(X = 1:5, FUN = function(i) {
          notifItem(
            title = "John Doe",
            date = "3 min ago",
            img = paste0("https://image.flaticon.com/icons/svg/163/16382", i,".svg"),
            "Film festivals used to be do-or-die moments
       for movie makers. They were where..."
          )
        })
      )
    ),
    sidebar = gentelellaSidebar(
      uiOutput("profile"),
      sidebarDate(),
      sidebarMenu(
        sidebarItem(
          "Tab 1",
          tabName = "tab1", 
          icon = tags$i(class = "fas fa-chart-bar"), 
          badgeName = "new",
          badgeStatus = "danger"
        ),
        sidebarItem(
          "Tab 2",
          tabName = "tab2", 
          icon = tags$i(class = "fas fa-info")
        )
      )
    ),
    body = gentelellaBody(
      tabItems(
        tabItem(
          tabName = "tab1",
          fluidRow(
            column(
              width = 4,
              align = "center",
              sliderInput(
                "obs",
                "Number of observations:",
                min = 0,
                max = 1000,
                value = 500
              )
            ),
            column(
              width = 8,
              align = "center",
              plotOutput("distPlot")
            )
          )
        ),
        tabItem(
          tabName = "tab2",
          jumbotron(
            title = "Hello, world!",
            "This is a simple hero unit, a simple jumbotron-style
        component for calling extra attention to featured
        content or information."
          )
        )
      )
    ),
    footer = gentelellaFooter()
  ),
  server = function(input, output, session) {
    output$distPlot <- renderPlot({
      hist(rnorm(input$obs))
    })

    counter <- reactiveValues(connect = 0)


    output$profile <- renderUI({
      sidebarProfile(
        name = input$name,
        img = "https://image.flaticon.com/icons/svg/236/236831.svg"
      )
    })
  }
)

Answer 1

Here is the JavaScript code:

js <- '
$(document).ready(function(){
  $("a[data-toggle=tab]").on("show.bs.tab", function(e){
    Shiny.setInputValue("activeTab", $(this).attr("data-value"));
  });
});
'

Include it in the UI:

body = gentelellaBody(
  tags$head(
    tags$script(HTML(js))
  ),
  tabItems(
    ......

Now the name of the active tab is given by input[["activeTab"]]:

observe({
  print(input[["activeTab"]])
})

It is NULL at the startup. You can use this JS code instead:

js <- '
$(document).on("shiny:connected", function(){
  Shiny.setInputValue("activeTab", $("li.active>a").attr("data-value"));
  $("a[data-toggle=tab]").on("show.bs.tab", function(e){
    Shiny.setInputValue("activeTab", $(this).attr("data-value"));
  });
});
'

Now input[["activeTab"]] is still NULL at the startup but then it immediately switches to the name of the first active tab.