Navigate through differenet tabsetPanels via actionbuttons in a shiny app

Question

I have a shiny app with 5 actionButton() in the sidebar. I want every time the user press a button the respective tabsetPanel() to be displayed. It is important that the default tabsetPanel() should be the "Home" one. This is why I used isolate().

#ui.r
library(shiny)
library(shinythemes)
library(plotly)
ui <- fluidPage(
  theme=shinytheme("slate") ,
  # App title ----
  titlePanel("Tabsets"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(
      actionButton("ho", "Home"),
      actionButton("sea", "SectionA"),
      actionButton("seb", "SectionB"),
      actionButton("sec", "SectionC"),
      actionButton("sed", "SectionD"),

    ),

    # Main panel for displaying outputs ----
    mainPanel(
      uiOutput("tabers")

    )
  )
)
#server.r
library(shiny)
library(shinythemes)
library(plotly)
server = function(input, output) {
  observeEvent(input$ho, {
    isolate(tabsetPanel(
      id="tabC",
      type = "tabs",
      tabPanel("Global"),
      tabPanel("Two Bars only here",
               plotlyOutput('bars'),
               plotlyOutput('bars2')
      )
    ))
  })
  observeEvent(input$sea, {
    tabsetPanel(
      id="tabB",
      type = "tabs",
      tabPanel("Constituents Table Iris only here",
               output$table <- DT::renderDataTable({
                 datatable(
                   iris)
               })),
      tabPanel("Bare only here",
               plotlyOutput("bar3")
      )
    )
  })
observeEvent(input$seb, {
        tabsetPanel(
          id="tabB",
          type = "tabs",
          tabPanel("Constituents Table Iris only here",
                   output$table <- DT::renderDataTable({
                     datatable(
                       iris)
                   })),
          tabPanel("Bare only here",
                   plotlyOutput("bar3")
          )
        )
      })
      observeEvent(input$sec, {
        tabsetPanel(
          id="tabB",
          type = "tabs",
          tabPanel("Constituents Table Iris only here",
                   output$table <- DT::renderDataTable({
                     datatable(
                       iris)
                   })),
          tabPanel("Bare only here",
                   plotlyOutput("bar3")
          )
        )
      })
      observeEvent(input$sed, {
        tabsetPanel(
          id="tabB",
          type = "tabs",
          tabPanel("Constituents Table Iris only here",
                   output$table <- DT::renderDataTable({
                     datatable(
                       iris)
                   })),
          tabPanel("Bare only here",
                   plotlyOutput("bar3")
          )
        )
      })



                 output$bars<-renderPlotly({
                   p <- plot_ly(
                     x = c("giraffes", "orangutans", "monkeys"),
                     y = c(20, 14, 23),
                     name = "SF Zoo",
                     type = "bar"
                   )
                 })
                 output$bars2<-renderPlotly({
                   p <- plot_ly(
                     x = c("gir", "ora", "mon"),
                     y = c(20, 14, 23),
                     name = "SF Zoo",
                     type = "bar"
                   )
                 })
                 output$bar3<-renderPlotly({
                   p <- plot_ly(
                     x = c("gir", "ora", "mon"),
                     y = c(20, 14, 23),
                     name = "SF Zoo",
                     type = "bar"
                   )
                 })

thmschk · Accepted Answer · 2019-08-28T23:54:46.750

Is there any reason why you use two different actionButtons instead of a radioButton? If no, I would suggest to use the latter, which makes it easier to render your tabsetPanels dynamically.

library(shiny)
library(shinythemes)
library(plotly)
library(DT)

ui <- fluidPage(
  theme=shinytheme("slate") ,

  # App title ----

  titlePanel("Tabsets"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

                 radioButtons(inputId="hose", label = "Choices",choices = c("Home"="ho","Section"="se"), selected = "ho")

    ),

    # Main panel for displaying outputs ----
    mainPanel(
      uiOutput("tabs")

    )
  )
)

#server.r

server = function(input, output) {

  observe({

    output$tabs <- renderUI(

      if (input$hose=="ho") {
    tabsetPanel(
      id="tabC",
      type = "tabs",
      tabPanel("Global"),
      tabPanel("Two Bars only here",
               plotlyOutput('bars'),
               plotlyOutput('bars2')
      )
    )

      } else {

      tabsetPanel(
        id="tabB",
        type = "tabs",
        tabPanel("Constituents Table Iris only here",
                 output$table <- DT::renderDataTable({
                   datatable(
                     iris)
                 })),
        tabPanel("Bare only here",
                 plotlyOutput("bar3")
        )
      )

      }

    )



  })

  output$bars<-renderPlotly({
    p <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
  output$bars2<-renderPlotly({
    p <- plot_ly(
      x = c("gir", "ora", "mon"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
  output$bar3<-renderPlotly({
    p <- plot_ly(
      x = c("gir", "ora", "mon"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

}

# Run the application 
shinyApp(ui = ui, server = server)

EDIT

If you need two actions button you can use the following. Note that you have to disable the button using shinyjs, which is active, otherwise the counter does not work.

library(shiny)
library(shinythemes)
library(plotly)
library(DT)
library(shinyjs)

ui <- fluidPage(
  theme=shinytheme("slate") ,

  shinyjs::useShinyjs(), # get shinyjs

  # App title ----

  titlePanel("Tabsets"),

  # Sidebar layout with input and output definitions ----
  sidebarLayout(

    # Sidebar panel for inputs ----
    sidebarPanel(

      actionButton("ho", "Home"),
      actionButton("se", "Section")

                 # radioButtons(inputId="hose", label = "Choices",choices = c("Home"="ho","Section"="se"), selected = "ho")

    ),

    # Main panel for displaying outputs ----
    mainPanel(
      uiOutput("tabs")

    )
  )
)

#server.r

server = function(input, output) {

  observe({

  if(input$ho==input$se) {

  shinyjs::disable("ho")  
    shinyjs::enable("se")  

  }  else {

    shinyjs::disable("se")  
    shinyjs::enable("ho")  


  }


  })


  observe({

    print(input$ho)

    print(input$se)

    output$tabs <- renderUI(

      if (input$ho==input$se) {
    tabsetPanel(
      id="tabC",
      type = "tabs",
      tabPanel("Global"),
      tabPanel("Two Bars only here",
               plotlyOutput('bars'),
               plotlyOutput('bars2')
      )
    )

      } else {

      tabsetPanel(
        id="tabB",
        type = "tabs",
        tabPanel("Constituents Table Iris only here",
                 output$table <- DT::renderDataTable({
                   datatable(
                     iris)
                 })),
        tabPanel("Bare only here",
                 plotlyOutput("bar3")
        )
      )

      }

    )



  })

  output$bars<-renderPlotly({
    p <- plot_ly(
      x = c("giraffes", "orangutans", "monkeys"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
  output$bars2<-renderPlotly({
    p <- plot_ly(
      x = c("gir", "ora", "mon"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })
  output$bar3<-renderPlotly({
    p <- plot_ly(
      x = c("gir", "ora", "mon"),
      y = c(20, 14, 23),
      name = "SF Zoo",
      type = "bar"
    )
  })

}

# Run the application 
shinyApp(ui = ui, server = server)

UPDATE

Yes, the excample above was set up for two action buttons - as requested - and it won't work with more than two. With more than two action buttons I choosed a different approach. See below. This time I made use of reactiveValues, the MWE is extendable to any numbers of action buttons.

library(shiny)
library(shinythemes)
library(plotly)
library(DT)
library(shinyjs)

ui <- fluidPage(

  shinyjs::useShinyjs(), # get shinyjs

  sidebarLayout(


    sidebarPanel(

      actionButton("ho", "Home"),
      actionButton("sea", "Section A"),
      actionButton("seb", "Section B")


    ),

    # Main panel for displaying outputs ----
    mainPanel(
      uiOutput("tabs")

    )
  )
)

#server.r

server = function(input, output) {


  active.button <- reactiveValues(list=c(0,0,0)) 


  check <- eventReactive(c(input$ho,input$sea,input$seb),{

    active.button$listold <- active.button$list 
    active.button$list <- c(input$ho,input$sea,input$seb)

    check <- active.button$list - active.button$listold

  })


  observe({

    print(check())

    output$tabs <- renderUI(

  if (check()[[1]]==1) {

        tabsetPanel(
          id="tabHome",
          tabPanel("Home")
          )


      } else if (check()[[2]]==1) {

        tabsetPanel(
          id="tabA",
          tabPanel("Section A")
        )
      } else if (check()[[3]]==1) {

        tabsetPanel(
          id="tabB",
          tabPanel("Section B")
        )

      } else {

        tabsetPanel(
          id="tabHome",
          tabPanel("Home")
        )


      }

    )

  }

  )

}

# Run the application 
shinyApp(ui = ui, server = server)

I adjusted your editted answer to 5 buttons but it has a strange behavior — firmo23, Aug 28 '19 at 15:28

Navigate through differenet tabsetPanels via actionbuttons in a shiny app

1 Answers1