How to link two "tabBox" together (shinydahsboard) ?

Aline Deschamps

unread,

Jul 4, 2016, 6:15:38 AM7/4/16

to Shiny - Web Framework for R

Hello everyone,

I have a quick question :

In a shinydashboard app, in the same tabItem, I have two tabBox with 3 tabPanel in each ("Tab 1", "Tab 2" and "Tab 3").

I would like to have the following behavior : when, for instance, I click on the "Tab 2" in the first tabBox, the second tabBox is automatically updated and go to the "Tab 2". The behavior is the same for each tab with the same name, and if you go first with the first tabBox or the second.

> So, is it something possible and if it is, how do I do ?

Here is a small example of my code :

"ui.R" :

library(shinydashboard)

shinyUI <- dashboardPage(
  
  dashboardHeader(title="App Test"),
                 
  dashboardSidebar(
    
    sidebarMenu(
      
      menuItem("Menu 1", tabName = "menu1", icon = icon("question-circle")),
      menuItem("Menu 2", tabName = "menu2", icon = icon("gears"))
      
    )
    
  ),
  
  dashboardBody(
    
    tabItems(
      
      tabItem(tabName = "menu1",
              
              fluidRow(
              
                  column(width = 5,
              
                       tabBox(
                         side = "left",
                         selected = "Tab 1",
                         tabPanel("Tab 1", p("Tab 1 : left")),
                         tabPanel("Tab 2", p("Tab 2 : left")),
                         tabPanel("Tab 3", p("Tab 3 : left")),
                         width = NULL
                       )
                       
                   ),
          
                  column(width = 5,
                       
                       tabBox(
                         side = "left",
                         selected = "Tab 1",
                         tabPanel("Tab 1", p("Tab 1 : right")),
                         tabPanel("Tab 2", p("Tab 2 : right")),
                         tabPanel("Tab 3", p("Tab 3 : right")),
                         width = NULL
                       )
                       
                  )
                     
              )
              
      ),
      
      tabItem(tabName = "menu2",
              
        fluidRow(
                
          column(width = 4,
              
              valueBox(253, 
                       "Love", 
                       color = "maroon", 
                       icon = icon("heart"), 
                       width = NULL)
          )
          
        )
              
      )
      
    )
    
  )
  
)

"server.R" :

library(shinydashboard)

shinyServer <- function(input, output) {  
  
}

Thank you in advance for your answers !

Best regards.

Aline Deschamps

unread,

Jul 5, 2016, 10:32:20 AM7/5/16

to Shiny - Web Framework for R

Hi again,

I've made significant progress (I will share them later...), but now there is one information I can't find anywhere : in a "tabBox" element, what is the type of the "selected" parameter ? Is this supposed to be a "character chain" ?

I ask this because I'm trying to pass to this parameter an element which comes from a "textOutput" and it doesn't seem to be recognized...

Thank you in advance for your return !

Best regards.

Aline Deschamps

unread,

Jul 6, 2016, 5:49:21 AM7/6/16

to Shiny - Web Framework for R

Well, I finally found a successful way to do it !

Here how I proceed :

"ui.R" :

library(shinydashboard)

shinyUI <- dashboardPage(
  
  dashboardHeader(title="App Test"),
                 
  dashboardSidebar(
    
    sidebarMenu(
      
      menuItem("Menu 1", tabName = "menu1", icon = icon("question-circle")),
      menuItem("Menu 2", tabName = "menu2", icon = icon("gears"))
      
    )
    
  ),
  
  dashboardBody(
    
    tabItems(
      
      tabItem(tabName = "menu1",
              
              fluidRow(
              
                  column(width = 5,

                       tabBox(id = "tabP1",
                              side = "left",

                              tabPanel("Tab 1", p("Tab 1 : left")),
                              tabPanel("Tab 2", p("Tab 2 : left")),
                              tabPanel("Tab 3", p("Tab 3 : left")),
                              width = NULL
                       ) 
                        
                   ),
          
                  column(width = 5,

                      tabBox(id = "tabP2",
                             side = "left",

                             tabPanel("Tab 1", p("Tab 1 : right")),
                             tabPanel("Tab 2", p("Tab 2 : right")),
                             tabPanel("Tab 3", p("Tab 3 : right")),
                             width = NULL
                      ) 
                       
                  )
                     
              )
              
      ),
      
      tabItem(tabName = "menu2",
              
        fluidRow(
                
          column(width = 4,
              
              valueBox(253, 
                       "Love", 
                       color = "maroon", 
                       icon = icon("heart"), 
                       width = NULL)

          )
          
        )
              
      )
      
    )
    
  )
  
)

"server.R" :

library(shinydashboard)

shinyServer <- function(input, output, session) {  
  
  observe({

    updateTabsetPanel(session, "tabP1", selected = input$tabP2)

  })
  
  observe({
    
    updateTabsetPanel(session, "tabP2", selected = input$tabP1)
    
  })
  
}

May be this would help someone else in the future ;)

Best regards.

John froeschke

unread,

Nov 22, 2017, 9:04:39 AM11/22/17

to Shiny - Web Framework for R

Could this be extended to sync 3 or more tabs? I would like to sync 4 if possible but it seems the selected argument would require the ability to respond to more than more input$tab and I'm not sure that is possible?

Reply all

Reply to author

Forward