Hello all,
This is an update on the issue of linking other pages and tabs in a shiny app. We took the discussion offline and recently solved the problem. I've also created a demo app for those who are interested in creating internal links to specific pages or tabs (a link is provided at the end).
Background
To make this work you will need three things.
1. Manually assign a value for each tab
tabPanel("My Tab Name", value = "tab-value", ...)
2. JS function
The following function loops through all a elements and looks for a matching tab name (as defined above). When a match is found, the code will simulate a mouse click using click(); (this will advance the screen to the desired tab).
Place this code in a new file and store it in the www directory.
var customHref = function(tabName) {
var dropdownList = document.getElementsByTagName( class="value">"a");
for (var i = 0; i < dropdownList.length; i++) {
var link = dropdownList[i];
if(link.getAttribute("data-value") == tabName) {
link.click();
}
}
};
Load the file using includeScript or tags$script.
shinyUI(
tagList(
# head
tags$head(
tags$script("src"="func.js")
),
# body
...
)
)
3. Assign an onclick event for each navigation link.
The function customHref takes one input and that is the target location (the tab you want to go to). If you are using tabsetPanel with navbarPage and want to go to a specific tab on another page, make two calls to the function customHref. The first is to the page the tab is located on and the second is to the tab itself.
# nav to another page
tags$a("Go back to the 'Home' page.", onclick="customHref('page-home')")
# nav to a specific tab on another page
tags$a("Go to Page 2 Tab 2", onclick="customHref('page-2'); customHref('tab-2');")
Known Issues
On mobile devices, the navigation menu may remain open after a link is clicked. This seems to be a common issue with Bootstrap and can be corrected with a few lines of js (github/bootstrap/issues/12852).
Demo App
The demo shiny app can be found on github:
davidruvolo51/shinyAppTutorials/Internal-Links-Demo
Hope this helps!
