Jumping to Tab Items using an ActionButton in R Shiny

Question

I am building an app using the bs4Dash package, and I would like to include action buttons in the main page that would allow the user to jump to the appropriate page. However, the buttons do not do anything.

This is very much the same as this question. I believe the issue here is that updatebs4TabItems requires a TabSetPanel inputId... Except that I do not wish to include tabset panels here.

library(shiny)
library(bs4Dash)

ui <- bs4DashPage(
  # Sidebar -------------------------------------------------------------
  sidebar = bs4DashSidebar(
    bs4SidebarMenu(
      bs4SidebarMenuItem(
        "Welcome",
        tabName = "item0"
      ),
      bs4SidebarMenuItem(
        "Page 1",
        tabName = "item1"
      ),
      bs4SidebarMenuItem(
        "Page 2",
        tabName = "item2"
      )
    )
  ),
  # Body -------------------------------------------------------------
  body = bs4DashBody(
    bs4TabItems(
      bs4TabItem(
        tabName = "item0",
        fluidRow(
          actionButton("JumpToV1", "Go to Page 1"),
          actionButton("JumpToV2", "Go to Page 2")
        )
      ),
      bs4TabItem(
        tabName = "item1",
        fluidRow(
          bs4Callout(
            title = "This is Page 1",
            elevation = 4,
            status = "danger"
          )
        )
      ),
      bs4TabItem(
        tabName = "item2",
        fluidRow(
          bs4Callout(
            title = "This is Page 2",
            elevation = 4,
            status = "danger")
        )
      )
    )
  )
)

server <- function(input, output, session) {
  observeEvent(input$JumpToV1, {
    updatebs4TabItems(session, "item0", selected = "item1")
  })

  observeEvent(input$JumpToV2, {
    updatebs4TabItems(session, "item0", selected = "item2")
  })
}

shinyApp(ui, server)

score 2 · Accepted Answer · answered Dec 18 '19 at 17:42

You're close! Two things need adjusting. From the documentation, note that the selected argument in updatebs4TabItems takes an integer (the position of the selected tab), not a string (so not the id name you have). Also, the inputID argument for updatebs4TabItems will refer to the sidebarID for you, which you need to set. The below code should work how you want.

library(shiny)
library(bs4Dash)

ui <- bs4DashPage(
    # Sidebar -------------------------------------------------------------
    sidebar = bs4DashSidebar(
        bs4SidebarMenu(
            id = "sidebarID", #note the new ID here
            bs4SidebarMenuItem(
                "Welcome",
                tabName = "item0"
            ),
            bs4SidebarMenuItem(
                "Page 1",
                tabName = "item1"
            ),
            bs4SidebarMenuItem(
                "Page 2",
                tabName = "item2"
            )
        )
    ),
    # Body -------------------------------------------------------------
    body = bs4DashBody(
        bs4TabItems(
            bs4TabItem(
                tabName = "item0",
                fluidRow(
                    actionButton("JumpToV1", "Go to Page 1"),
                    actionButton("JumpToV2", "Go to Page 2")
                )
            ),
            bs4TabItem(
                tabName = "item1",
                fluidRow(
                    bs4Callout(
                        title = "This is Page 1",
                        elevation = 4,
                        status = "danger"
                    )
                )
            ),
            bs4TabItem(
                tabName = "item2",
                fluidRow(
                    bs4Callout(
                        title = "This is Page 2",
                        elevation = 4,
                        status = "danger")
                )
            )
        )
    )
)

server <- function(input, output, session) {
    observeEvent(input$JumpToV1, {
    #changed ID and selected here and below
        updatebs4TabItems(session, inputId = "sidebarID", selected = 2)
    })

    observeEvent(input$JumpToV2, {
        updatebs4TabItems(session, inputId = "sidebarID", selected = 3)
    })
}

shinyApp(ui, server)

Jumping to Tab Items using an ActionButton in R Shiny

1 Answers1