shiny.router - a simple routing package for Shiny Dashboards

Reading time:

time

min

December 6, 2016

<blockquote>Update 22nd of October, 2018. We have updated shiny.router package and realeased it on <a href="https://cran.r-project.org/web/packages/shiny.router/index.html" target="_blank" rel="noopener noreferrer">R Cran</a> and <a href="https://github.com/Appsilon/shiny.router" target="_blank" rel="noopener noreferrer">GitHub</a>. <a href="https://appsilon.com/shiny-router-package/" target="_blank" rel="noopener noreferrer">Full post on shiny.router update with plenty of examples.</a></blockquote> The time has come to release the first of our internal tools we use on a regular basis when developing <a href="https://shiny.rstudio.com/" target="_blank" rel="noopener noreferrer">Shiny</a> apps for our customers. In just a few lines of code added to your project, you get a helpful routing mechanism that allows recreating a particular state of your app. <figure class="highlight"> <pre><code class="language-r" data-lang="r">make_router( route("<your_app_url>/main", main_page_shiny_ui), route("<your_app_url>/other", other_page_shiny_ui) )</code></pre> </figure> If you’re in a hurry just go directly to the project’s page: <a href="https://appsilon.github.io/shiny.router/" target="_blank" rel="noopener noreferrer">https://appsilon.github.io/shiny.router/ </a> <h2 id="benefits-of-routing">Benefits of routing</h2> Routing has been around in web frameworks for a while. Since this was something we were missing in Shiny so much we developed this package to simplify our development. Firstly, it’s possible to share a link like http://your-app-url/stats/dashboard and redirect a user to the specific state in-app. For instance, in our <a href="https://demo.appsilon.com/apps/router2/" target="_blank" rel="noopener noreferrer">shiny.router demo</a>, you can directly go to another page. Secondly, it’s easier to write clean code by separating UI into meaningful code blocks. <h2 id="how-do-you-integrate-it">How do you integrate it?</h2> First, make sure you have shiny.router dependency installed. This package is not yet available on CRAN, so you have to install it with <a href="https://github.com/hadley/devtools" target="_blank" rel="noopener noreferrer">devtools</a>: <figure class="highlight"> <pre><code class="language-r" data-lang="r"># install.packages("devtools") devtools::install_github("Appsilon/shiny.router")</code></pre> </figure> Second, you have to define a routing. <figure class="highlight"> <pre><code class="language-r" data-lang="r"># Creates router. We provide routing path and UI for this page. router <- make_router( route("/", root_page), route("/other", other_page) )</code></pre> </figure> This will create 2 reactive links: <ol><li>http://your-app-url redirecting to the Root page and</li><li>http://your-app-url/other redirecting to Other pages in your app.</li></ol> The first passed argument is also a default redirection for all invalid links(“/” in this case). You can also specify it explicitly via the “default” argument. <figure class="highlight"> <pre><code class="language-r" data-lang="r"># Creates router. We provide routing path and UI for this page. router <- make_router( default = route("/home", home_page), route("/", root_page), route("/other", other_page) )</code></pre> </figure> Next, make sure you bind and run your “router” object properly in your Shiny app source code. <figure class="highlight"> <pre><code class="language-r" data-lang="r"># Creat output for our router in main UI of Shiny app. ui <- shinyUI(fluidPage( # This line is important! router_ui() )) # Plug router into Shiny server. server <- shinyServer(function(input, output) { # This line is important! router(input, output) })</code></pre> </figure> Now it’s time for a live demo. Try clicking “Page” and “Other” menu links: <iframe src="https://demo.appsilon.com/apps/router2/_w_3f10f846/#!/" width="100%" height="250" frameborder="0" scrolling="no"></iframe> Here’s the complete code, if you want to try it out by yourself: <figure class="highlight"> <pre><code class="language-r" data-lang="r">library(shiny) #devtools::install_github("Appsilon/shiny.router") library(shiny.router) # This generates menu in user interface with links. menu <- ( tags$ul( tags$li(a(class = "item", href = "/", "Page")), tags$li(a(class = "item", href = "/other", "Other")) ) ) # This creates UI for each page. page <- function(title, content) { div( menu, titlePanel(title), p(content) ) } # Both sample pages. root_page <- page("Home page", "Welcome on sample routing page!") other_page <- page("Some other page", "Lorem ipsum dolor sit amet") # Creates router. We provide routing path and UI for this page. router <- make_router( route("/", root_page), route("/other", other_page) ) # Creat output for our router in main UI of Shiny app. ui <- shinyUI(fluidPage( router_ui() )) # Plug router into Shiny server. server <- shinyServer(function(input, output) { router(input, output) }) # Run server in a standard way. shinyApp(ui, server)</code></pre> </figure> <h2 id="next-steps">Next steps</h2> You might be wondering how we managed to make this nice-looking demo. This is a small preview of our next package using <a href="https://demo.appsilon.com/apps/visuarisk/" target="_blank" rel="noopener noreferrer">SemanticUI</a>. You can find it on our <a href="https://github.com/Appsilon/shiny.semantic" target="_blank" rel="noopener noreferrer">Github</a>. Side Note! You will have to install it to run a second repo example. Please stay tuned for our next blog post.