3

I have shiny application with several tabs. The problem is that I want to walk between tabs with button, not by clicking on the tab. How I can disable clicking on tabs? Small example of code:

ui <- navbarPage('Test App', id = "inTabset",
                 tabPanel(title = "Panel 1", value = "panel1", 
                          actionButton('jumpToP2', 'Jump to Secon Tab')),
                 tabPanel(title = "Panel 2", value = "panel2", 
                          actionButton('jumpToP1', 'Jump to First Tab'))
)

server <- function(input, output, session) {
  observeEvent(input$jumpToP2, {
    updateTabsetPanel(session, "inTabset",
                      selected = "panel2")
  })

  observeEvent(input$jumpToP1, {
    updateTabsetPanel(session, "inTabset",
                      selected = "panel1")
  })

}

shinyApp(ui, server)
Florian
  • 24,425
  • 4
  • 49
  • 80
neringab
  • 613
  • 1
  • 7
  • 16

1 Answers1

4

Here is a possible workaround. We can use shinyjs to disable the navbar buttons, and add some CSS to change the cursor to default when hovering the navigation bar.

There may be simpler ways that I am not aware of, so I am curious to see other possible solution approaches :) Hope this helps!

library(shiny)
library(shinyjs)

ui <- navbarPage('Test App', id = "inTabset",
                 tabPanel(title = "Panel 1", value = "panel1", 
                          actionButton('jumpToP2', 'Jump to Secon Tab')),
                 tabPanel(title = "Panel 2", value = "panel2", 
                          actionButton('jumpToP1', 'Jump to First Tab')),
                 useShinyjs(),
                 tags$head(tags$style(HTML('.navbar-nav a {cursor: default}')))
)

server <- function(input, output, session) {

  shinyjs::disable(selector = '.navbar-nav a')

  observeEvent(input$jumpToP2, {
    updateTabsetPanel(session, "inTabset",
                      selected = "panel2")
  })

  observeEvent(input$jumpToP1, {
    updateTabsetPanel(session, "inTabset",
                      selected = "panel1")
  })

}

shinyApp(ui, server)
Florian
  • 24,425
  • 4
  • 49
  • 80
  • Thank you so much! Yet, it's very interesting problem in several ways. For example, how could I walk between tabs on the way back without a button (from tab2 to tab1), but ahead I must push a button (from tab1 to tab2)? Hope i'll find answer to that question too ^_^ – neringab Mar 16 '18 at 07:20
  • Hi @Lesley, there are multiple ways to do this, see for example [here](https://stackoverflow.com/questions/44309328/generic-button-for-go-to-next-and-previous-tabitem-shiny). If your tabs are numbered, you could also do something like `observeEvent(input$btn_next, {selected = as.numeric(gsub("[^\\d]+", "", input$sidebar, perl=TRUE));updateTabItems(session, 'sidebar', paste0('panel',selected+1))})` But this sounds like another question, so please consider accepting this answer if it solved the current issue, and open a new question if you have follow-up questions. Thanks! – Florian Mar 16 '18 at 07:27