Shiny - linking to panel in app

[Cyndy Hart]

Hi it's me again.. this is cross posted to Stack Overflow:

This may be obvious, but I can't figure how to do it. (I'm a seasoned programmer, but not very much with web-based tools; I'm a bit of a programming dinosaur. I know nada about Javascript, for instance.. )

I have a Shiny app that I am building, where in the tab panels of my app, the default panel is a bit of a 'this is what this app does and here are the options'; a road map, if you will. I would like if, in describing the app, I could have live links embedded; ie, "if you want to do this ...." and clicking on 'this' makes the corresponding tab panel of the app become the live panel. Is this do-able in Shiny, and if so, how?

Thanks!

[DZJ]

I tried the following 

https://gist.github.com/xiaodaigh/6445698

You can run it using

shiny::runGist("6445698")

However even though I can switch tabs I can't get Shiny to update the text. But if I physically click on the summary Tab then it updates. What am I missing? How to tell Shiny to update it?

#ui.R

library(shiny)

# Define UI for random distribution application 

shinyUI(pageWithSidebar(

# Application title

headerPanel("Tabsets"),

# Sidebar with controls to select the random distribution type

# and number of observations to generate. Note the use of the br()

# element to introduce extra vertical spacing

sidebarPanel(

radioButtons("dist", "Distribution type:",

list("Normal" = "norm",

"Uniform" = "unif",

"Log-normal" = "lnorm",

"Exponential" = "exp")),

br(),

sliderInput("n", 

"Number of observations:", 

value = 500,

min = 1, 

max = 1000)

),

# Show a tabset that includes a plot, summary, and table view

# of the generated distribution

mainPanel(

tabsetPanel(

tabPanel("Plot", plotOutput("plot"),div(id="linkToSummary",tags$a("This is a link to Summary Tab")) ), 

tabPanel("Summary", verbatimTextOutput("summary")), 

tabPanel("Table", tableOutput("table"),HTML("<script>$('#linkToSummary').click(function() {

tabs = $('.tabbable .nav.nav-tabs li')

tabs.each(function() {

$(this).removeClass('active')

})

$(tabs[1]).addClass('active')

tabsContents = $('.tabbable .tab-content .tab-pane')

tabsContents.each(function() {

$(this).removeClass('active')

})

$(tabsContents[1]).addClass('active')

$('#summary').trigger('change')

 

})</script>

") )

)

)

))

#server.R

library(shiny)

# Define server logic for random distribution application

shinyServer(function(input, output) {

# Reactive expression to generate the requested distribution. This is 

# called whenever the inputs change. The renderers defined 

# below then all use the value computed from this expression

data <- reactive({  

dist <- switch(input$dist,

  norm = rnorm,

  unif = runif,

  lnorm = rlnorm,

  exp = rexp,

  rnorm)

dist(input$n)

})

# Generate a plot of the data. Also uses the inputs to build the 

# plot label. Note that the dependencies on both the inputs and

# the 'data' reactive expression are both tracked, and all expressions 

# are called in the sequence implied by the dependency graph

output$plot <- renderPlot({

dist <- input$dist

n <- input$n

hist(data(), 

main=paste('r', dist, '(', n, ')', sep=''))

})

# Generate a summary of the data

output$summary <- renderPrint({

summary(data())

})

# Generate an HTML table view of the data

output$table <- renderTable({

data.frame(x=data())

})

})

[Cyndy Hart]

Hey, DZJ;  well that is certainly getting there... thanks!

[Joe Cheng]

Could you change this line:

$('#summary').trigger('change')

To:

$('#summary').trigger('change').trigger('shown');

Perhaps that'll do it.

--
You received this message because you are subscribed to the Google Groups "Shiny - Web Framework for R" group.
To unsubscribe from this group and stop receiving emails from it, send an email to shiny-discus...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[DZJ]

Yes it did!

Now the gist works!

shiny::runGist("6445698")

[Patrick Toche]

I'm learning shiny and this app was a great learning tool, thanks!

I found it useful to increase the number of breaks as n increases, i.e.:

hist(data(), breaks = n/10, main = paste0('r', dist, '(', n, ')'), xlab ="range")

thanks again,

Patrick.

[Matt Bannert]

Hmm, if the tab I am changing to contains reactive content, the switch works the functionality is not. E.g.: I have a tabbed app, one of the tabs is 'upload data' . Once the data is uploaded several dropdown boxes occur, 

to play with the data. This works fine as long as 'manually' move to the tab. If I use a link like the one described in the gist, these dropdown elements only show up if I go forth and back manually. 

Any suggestions how to trigger by successful upload what's been triggered by clicking the 'upload data' tab?

[Ignacio Sarmiento]

Hey ZJ 

I used your code and certainly works but now I want to use it with multiple navigation panels. 

It works great for the first navigation panel, but for the second it doesn't work. Here is my ui.R:

require(shiny)


shinyUI(navbarPage("",
                   tabPanel("Foo",
                            tabsetPanel(
                              tabPanel("Foo1",                            
                                       sidebarLayout(
                                         sidebarPanel(
                                           tags$div(div(id="Foo2", tags$a("Foo2"))
                                           )
                                             ),
                                         mainPanel(p("hello Foo1"))
                              )),
                              tabPanel("Foo2",
                                       sidebarLayout(
                                         sidebarPanel(),
                                         mainPanel(p("hello Foo2"))), 
                                         HTML("<script>$('#Foo2').click(function() {
                                                        tabs = $('.tabbable .nav.nav-tabs li')
                                                         tabs.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabs[1]).addClass('active')

                                                         tabsContents = $('.tabbable .tab-content .tab-pane')
                                                         tabsContents.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabsContents[1]).addClass('active')

                                                        $('#Foo2').trigger('change').trigger('shown');

                                                     })</script>")
                                       )
                              )
                                ),
                   tabPanel("Bar",
                            tabsetPanel(
                              tabPanel("Bar1",                            
                                       sidebarLayout(
                                         sidebarPanel(
                                           tags$div(div(id="Bar2", tags$a("Bar2"))
                                           )
                                         ),
                                         mainPanel(p("hello Bar1"))
                                       )),
                              tabPanel("Bar2",
                                       sidebarLayout(
                                         sidebarPanel(),
                                         mainPanel(p("hello Bar2"))), 
                                       HTML("<script>$('#Bar2').click(function() {
                                                        tabs = $('.tabbable .nav.nav-tabs li')
                                                         tabs.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabs[1]).addClass('active')

                                                         tabsContents = $('.tabbable .tab-content .tab-pane')
                                                         tabsContents.each(function() {
                                                            $(this).removeClass('active')
                                                         })
                                                         $(tabsContents[1]).addClass('active')

                                                        $('#Bar2').trigger('change').trigger('shown');

                                                     })</script>")

                              )
                            )
                   )
                   )
)

When you click in the sidebar panel of foo1 the link to foo2 responds. But when you do the same in Bar, it goes somewhere else.