I am using the shinyjs
package in R to allow for onclick
type events to navigate between tabs in a tabset. Each tab has a specific sidebar, and there are multiple (two) ways of getting between each tab (i.e. via clicking on the tab itself or by clicking on the valueBoxes). I would like to ensure that no matter what way you get to a specific tab the correct sidebar loads.
# load libraries
require(shiny)
require(shinydashboard)
require(shinyjs)
# create a simple app
ui <- dashboardPage(
title='Loading graphs',
dashboardHeader(
title = 'Loading Graphs'
),
dashboardSidebar(
div(id='tab1_sidebar',
sliderInput('tab1_slider', 'tab1 slider', min=2,max=7,value=2)),
shinyjs::hidden(
div(id='tab2_sidebar',
sliderInput('tab2_slider', 'tab2 slider', min=2,max=7,value=2))
)
),
dashboardBody(
useShinyjs(),
tabsetPanel(
id = "navbar",
tabPanel(title="tab1 title",id="tab1",value='tab1_val',
valueBoxOutput('tab1_valuebox')),
tabPanel(title="tab2 title",id="tab2",value='tab2_val',
valueBoxOutput('tab2_valuebox'))
)
)
)
server <- shinyServer(function(input, output, session) {
output$tab1_valuebox <- renderValueBox({
valueBox('1000',subtitle = "blah blah",icon = icon("car"),
color = "blue"
)
})
output$tab2_valuebox <- renderValueBox({
valueBox('2000',subtitle = "blah2 blah2",icon = icon("car"),
color = "red"
)
})
# on click of a tab1 valuebox
shinyjs::onclick('tab1_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab2_val')
# update the sidebar to match the tab
toggle('tab1_sidebar')
toggle('tab2_sidebar')
})
# on click of a tab2 valuebox
shinyjs::onclick('tab2_valuebox',expr={
# move to tab2
updateTabsetPanel(session, "navbar", 'tab1_val')
# update the sidebar to match the tab
toggle('tab1_sidebar')
toggle('tab2_sidebar')
})
})
shinyApp(ui=ui,server=server)
In the code above, when clicking on the tab the sidebar does not change, but if I include the below code into the server component to take allow for clicking on the tab it doesn't seem to adjust correctly...
# change sidebar based on navbar value....
observeEvent(input$navbar,{
if(input$navbar=='tab1_val'){
toggle('tab1_sidebar')
toggle('tab2_sidebar')
} else if(input$navbar=='tab2_val'){
toggle('tab1_sidebar')
toggle('tab2_sidebar')
}
})
Any help on this would be much appreciated....