[Shiny]: Add link to another tabPanel in another tabPanel

Question

I'm trying to put a link on my "home" tabPanel to all others tabPanels of my app.

The idea is as follows:

ui = navbarPage("",
         tabPanel("home",
                  fluidPage(
                    fluidRow(box("this 1st box should lead me to tab1a")),
                    fluidRow(box("this 2nd box should lead me to tab1b")),
                    fluidRow(box("this 2nd box should lead me to tab2")))
            ),
         navbarMenu("tab1",
                    tabPanel("tab1a"),
                    tabPanel("tab1b")),
                    tabPanel("tab2")
         )

shinyApp(ui, server=function(input, output) {})

I've seen the answer in Add link panel tabs in Shiny with various top level navigation bars, but I couldn't implement it on my code, since it deals with html (which i've never worked before, so I'm not familiar with the functions etc) and the code considers tabPanels within the same tab (not sure if that's why it didn't work here, if maybe it didn't work because the tabs I'm trying to link are on a navbarPage or something).

Can anyone help me or tell me where i could learn how to implement this on my example?

You just need an HTML link (`a()` in shiny). If you look at the URLs on the normal buttons that go to the tabs, they look something like `http://127.0.0.1:4301/#tab-6088-1` (for me on tab1a). Also, `box` breaks the above for me, as that function is for adding to plots, not HTML. — alistaire, Apr 04 '16 at 22:25
This had the most helpful answer I found: https://groups.google.com/g/shiny-discuss/c/fZORQAqkKsQ — Rich Pauloo, Aug 06 '21 at 16:45

score 8 · Accepted Answer · answered Apr 05 '16 at 12:21

This answer is purely JavaScripted, but very minimal, I guess. Since Shiny creates tabs with random number Ids, and does not give access to the Ids it used, this has do be done client-sided. But there is no knowledge of JavaScript needed to implement this to other scenarios. The JavaScript part is just for Copy/Paste and the trigger command is easy to understand.

What did I do? I installed a function, that finds the Navbar link corresponding to the desired tab, and just clicks it. This utility can be added to any element with the "onclick" attribute. There are no special tags (e.g. no "a" tag) required.

The code below should make it easy to customize this solution to fit your needs.

Note: I used the original Code with the box, although it does not have any visual effect.

Code:

library(shiny)
library(shinydashboard)

ui = shinyUI(

  navbarPage("Header",
    tabPanel("home",
      tags$head(tags$script(HTML('
        var fakeClick = function(tabName) {
          var dropdownList = document.getElementsByTagName("a");
          for (var i = 0; i < dropdownList.length; i++) {
            var link = dropdownList[i];
            if(link.getAttribute("data-value") == tabName) {
              link.click();
            };
          }
        };
      '))),
      fluidPage(
        fluidRow(box("this 1st box should lead me to tab1a", onclick = "fakeClick('tab1a')")),
        fluidRow(box("this 2nd box should lead me to tab1b", onclick = "fakeClick('tab1b')")),
        fluidRow(box("this 2nd box should lead me to tab2", onclick = "fakeClick('tab2')"))
      )
    ), 
    navbarMenu("tab1",
      tabPanel("tab1a", "Some Text inside Tab 1a."),
      tabPanel("tab1b", "Some Text inside Tab 1b.")
    ),

    tabPanel("tab2", "Some Text inside Tab 2.")
  )
)

server = function(input, output, session){}

runApp(shinyApp(ui, server), launch.browser = TRUE)

Have fun!

Thank you very much, this works perfectly! i couldn't understand all steps of you function, but i'll keep studying it ;) — mihasa, Apr 05 '16 at 13:14

[Shiny]: Add link to another tabPanel in another tabPanel

1 Answers1

Linked