How to use shiny.router to link URL address with "tabItem" in "shinydashboard" package ?

[andirey]

I would like to use "shiny.router" to link URL address with "tabItem" of "dashboardBody" when using "shinydashboard" package. It will be great to see some examples how to do it. Thanks :)

[filipstachura]

Hi @andirey!

Just a few, quick thoughts, as I only have several minutes to check this out. It looks like shinydashboard influences javascript a lot. When I create minimal app (source below) I get some sort of routing but: Problem 1) it does not change dynamically - so when I click on the sidebar URL the address in the browser does not change Problem 2) you cannot access each tab by requesting its URL. If you go to http://127.0.0.1:[PORT]/#shiny-tab-widgets you still get the main tab.

What are your options:

• Add Admin LTE dependency on your own + add shiny.router to that (almost sure that this will work, it might be quite a lot of work though). Just please make sure that problem 1) does not happen with pure Admin LTE without Shiny!
• Try to still use shinydashboard but without using dashboardPage, dashboardBody, etc. They might attach some javascript that influence routing.
• Consider using some other UI's. One option might be created by us shiny.semantic https://github.com/Appsilon/shiny.semantic . We are able to create very complex UI's with it. But this might be hard and might not be an option for you.

Having said that we'll definitely look into that and would love to implement this as a feature in the future. We know a lot of Shiny developers use shinydashboard.

minimal app source code:

library(shiny)
library(shinydashboard)

ui <- dashboardPage(
  dashboardHeader(title = "Basic dashboard"),
  dashboardSidebar(
    sidebarMenu(
      menuItem("Dashboard", tabName = "dashboard", icon = icon("dashboard")),
      menuItem("Widgets", tabName = "widgets", icon = icon("th"))
    )
  ),
  dashboardBody(
    tabItems(
      tabItem(tabName = "dashboard", h2("tab A")),
      tabItem(tabName = "widgets", h2("tab B"))
    )
  )
)

shinyApp(ui, shinyServer(function(input, output) {}))

[andirey]

Hi, @filipstachura ! Thanks for the detailed answer. I will try to use "fluidPage" and will be glad to see "dashboardPage()" case ! andrii

[pink-sh]

Hi, I made this small solution to route the shinydashboard page to a sub item if you try to access the application with an anchor to that subitem in the URL.

in the dashboardBody section I added a new custom.js script

tags$head(tags$script(type="text/javascript", src="custom.js"))

then the custom.js file would look like this

$(document).ready(
  function(){
    if (window.location.hash) {
      var hash_val = '#' + window.location.hash.replace('#','');
      $('a', $('.sidebar')).each(function() {
          if(this.getAttribute('href') == hash_val) {
            this.click();
          };
      });
    }
})

this function runs on every page load and checks for any anchor tags in the URL, if found it goes through all the menu items and if a match is found it forces the click.

Downside is that the menu item does not get "active" with this trick.

[ismirsehregal]

This recently came up on SO again. For those interested here is a workaround.