如何记住多选项卡设置中最后一个活动选项卡？

Question

是否有一种更原生的方式来记住最后一个活动选项卡，当更改选项卡集（此处在标题/导航栏）时，以便在

bs4Dash

中的选项卡集更改时返回到它？

library(shiny)
library(bs4Dash)
library(shinyjs)

ui <- bs4DashPage(
  header = bs4DashNavbar(
    title = "Remember Last Tab in bs4Dash",
    tags$div(
      id = "tabset-container",
      style = "display: flex; justify-content: center; gap: 10px; padding: 10px;",
      div(
        id = "tabset1",
        style = "background-color: #0073B7; padding: 10px; color: white; cursor: pointer;", "Tab Set 1"
      ),
      div(
        id = "tabset2",
        style = "background-color: #0073b7; padding: 10px; color: white; cursor: pointer;", "Tab Set 2"
      )
    )
  ),
  sidebar = bs4DashSidebar(
    uiOutput("sidebar_menu")
  ),
  body = bs4DashBody(
    useShinyjs(),
    tags$script(HTML("
        $(document).on('shiny:connected', function (event) {
      Shiny.setInputValue('activeTabSet', 'tabset1')
      })

    Shiny.addCustomMessageHandler('selectTab', function(tabName) {
      var sidebar = document.querySelector('[data-widget=\"treeview\"]');
      var tab = sidebar.querySelector('[data-value=\"' + tabName + '\"]'); 
      if (tab) tab.click(); 
    });

    Shiny.addCustomMessageHandler('tabsetReady', function(tabset) {
      setTimeout(function() {
        Shiny.setInputValue('tabsetReady', tabset, {priority: 'event'});
      }, 100);
    });
  ")),
    bs4TabItems(
      bs4TabItem(tabName = "tab1_1", h2("Content for Tab 1.1")),
      bs4TabItem(tabName = "tab1_2", h2("Content for Tab 1.2")),
      bs4TabItem(tabName = "tab2_1", h2("Content for Tab 2.1")),
      bs4TabItem(tabName = "tab2_2", h2("Content for Tab 2.2"))
    )
  )
)

server <- function(input, output, session) {
  # Reactive values to store the last visited tab for each tabset
  lastTabs <- reactiveValues(tabset1 = "tab1_1", tabset2 = "tab2_1")

  shinyjs::onclick("tabset1", {
    runjs('Shiny.setInputValue("activeTabSet", "tabset1")')
  })

  shinyjs::onclick("tabset2", {
    runjs('Shiny.setInputValue("activeTabSet", "tabset2")')
  })

  # Dynamically render the sidebar menu based on the active tabset
  output$sidebar_menu <- renderUI({
    req(input$activeTabSet)
    if (input$activeTabSet == "tabset1") {
      bs4SidebarMenu(
        id = "sidebar",
        bs4SidebarMenuItem("Tab 1.1", tabName = "tab1_1", icon = icon("dashboard")),
        bs4SidebarMenuItem("Tab 1.2", tabName = "tab1_2", icon = icon("chart-bar"))
      )
    } else if (input$activeTabSet == "tabset2") {
      bs4SidebarMenu(
        id = "sidebar",
        bs4SidebarMenuItem("Tab 2.1", tabName = "tab2_1", icon = icon("globe")),
        bs4SidebarMenuItem("Tab 2.2", tabName = "tab2_2", icon = icon("cogs"))
      )
    }
  })

  observeEvent(input$sidebar, {
    req(input$activeTabSet)

    if (input$activeTabSet == "tabset1") {
      lastTabs$tabset1 <- input$sidebar
    } else if (input$activeTabSet == "tabset2") {
      lastTabs$tabset2 <- input$sidebar
    }
  })

  observeEvent(input$activeTabSet, {
    req(input$activeTabSet)
    session$sendCustomMessage("tabsetReady", input$activeTabSet)
  })

  observeEvent(input$tabsetReady, {
    req(input$tabsetReady)

    if (input$tabsetReady == "tabset1") {
      session$sendCustomMessage("selectTab", lastTabs$tabset1)
    } else if (input$tabsetReady == "tabset2") {
      session$sendCustomMessage("selectTab", lastTabs$tabset2)
    }
  })
}

shinyApp(ui, server)

Answer 1

library(shiny)
library(bs4Dash)
library(shinyjs)

ui <- bs4DashPage(
  header = bs4DashNavbar(
    title = "Remember Last Tab in bs4Dash",
    tags$div(
      id = "tabset-container",
      style = "display: flex; justify-content: center; gap: 10px; padding: 10px;",
      div(
        id = "tabset1",
        style = "background-color: #0073B7; padding: 10px; color: white; cursor: pointer;", "Tab Set 1"
      ),
      div(
        id = "tabset2",
        style = "background-color: #0073b7; padding: 10px; color: white; cursor: pointer;", "Tab Set 2"
      )
    )
  ),
  sidebar = bs4DashSidebar(
    uiOutput("sidebar_menu")
  ),
  body = bs4DashBody(
    useShinyjs(),
    bs4TabItems(
      bs4TabItem(tabName = "tab1_1", h2("Content for Tab 1.1")),
      bs4TabItem(tabName = "tab1_2", h2("Content for Tab 1.2")),
      bs4TabItem(tabName = "tab2_1", h2("Content for Tab 2.1")),
      bs4TabItem(tabName = "tab2_2", h2("Content for Tab 2.2"))
    )
  )
)

server <- function(input, output, session) {
  # Reactive values to store the last visited tab for each tabset
  lastTabs <- reactiveValues(tabset1 = "tab1_1", tabset2 = "tab2_1")

  # Switch to tabset1
  shinyjs::onclick("tabset1", {
    updateTabItems(session, "tabs", selected = lastTabs$tabset1)
  })

  # Switch to tabset2
  shinyjs::onclick("tabset2", {
    updateTabItems(session, "tabs", selected = lastTabs$tabset2)
  })

  # Dynamically render the sidebar menu based on the active tabset
  output$sidebar_menu <- renderUI({
    req(input$activeTabSet)
    if (input$activeTabSet == "tabset1") {
      bs4SidebarMenu(
        id = "sidebar",
        bs4SidebarMenuItem("Tab 1.1", tabName = "tab1_1", icon = icon("dashboard")),
        bs4SidebarMenuItem("Tab 1.2", tabName = "tab1_2", icon = icon("chart-bar"))
      )
    } else if (input$activeTabSet == "tabset2") {
      bs4SidebarMenu(
        id = "sidebar",
        bs4SidebarMenuItem("Tab 2.1", tabName = "tab2_1", icon = icon("globe")),
        bs4SidebarMenuItem("Tab 2.2", tabName = "tab2_2", icon = icon("cogs"))
      )
    }
  })

  # Track the last active tab for each tabset
  observeEvent(input$sidebar, {
    req(input$activeTabSet)
    if (input$activeTabSet == "tabset1") {
      lastTabs$tabset1 <- input$sidebar
    } else if (input$activeTabSet == "tabset2") {
      lastTabs$tabset2 <- input$sidebar
    }
  })

  # Automatically restore the last active tab when switching tabsets
  observeEvent(input$activeTabSet, {
    req(input$activeTabSet)
    if (input$activeTabSet == "tabset1") {
      updateTabItems(session, "tabs", selected = lastTabs$tabset1)
    } else if (input$activeTabSet == "tabset2") {
      updateTabItems(session, "tabs", selected = lastTabs$tabset2)
    }
  })
}

shinyApp(ui, server)