Basic Multipage Routing Tutorial for Shiny Apps: shiny.router

Reading time:

time

min

November 24, 2020

<h2>Basic Routing for Shiny Web Applications</h2> Web applications couldn't exist without routing. Think about it in terms of the Appsilon website - you've visited our home page, navigated to the blog, and opened this particular article. That's routing in a nutshell - matching UI components to a URL. Appsilon released the open source <code>shiny.router</code> package back in <a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-router-package/" target="_blank" rel="noopener noreferrer">late 2018</a>, and just recently version 0.2.0 went live on CRAN. This version fixed some bugs, augmented existing functionality a bit, and made a few important changes. In this article, we'll walk you through the version 0.2.0 update and show you how to create navbars using shiny.router. You can download the source code for this article <a href="https://appsilon.com/wp-content/uploads/2020/11/shiny_router_code.zip" target="_blank" rel="noopener noreferrer">here</a>. <ul><li><a href="#introduction">Introducing shiny.router</a></li><li><a href="#create-navbars">Creating Navigation Bars with shiny.router</a></li><li><a href="#styling">Styling Navigation Bars</a></li><li><a href="#conclusion">Conclusion</a></li></ul> To learn more about Appsilon's open source packages, see our new <a class="editor-rtfLink" href="http://shiny.tools/" target="_blank" rel="noopener noreferrer">Open Source Landing Page:</a> <a href="http://shiny.tools"><img class="size-large wp-image-5332" src="https://wordpress.appsilon.com/wp-content/uploads/2020/09/Screen-Shot-2020-09-23-at-5.02.14-PM-1024x504.png" alt="Appsilon's shiny.tools landing page for our open source packages." width="1024" height="504" /></a> Appsilon's shiny.tools landing page for our open source packages. <h2 id="introduction">Introducing shiny.router</h2> At Appsilon, we routinely build <a class="editor-rtfLink" href="http://demo.appsilon.ai/" target="_blank" rel="noopener noreferrer">Shiny applications</a> for Global 2000 companies. The problem of routing is one of the first ones we encounter on every project. It made sense to develop an open-source package that handles it with ease. After all, routing is a common component of any web application and behaves identically in most projects. Displaying the app's content on multiple pages can be achieved via tabsets, subpages of a dashboard. There was no easy way to direct users to a specific subpage via URL for a long time. Recently some <a class="editor-rtfLink" href="https://twitter.com/_ColinFay/status/1325833800090324992?s=19" target="_blank" rel="noopener noreferrer">alternative</a> solutions started to emerge, but the <code>shiny.router</code> remains the easiest one. We have used <code>shiny.router</code> in many commercial projects, so we can confirm it is a field-tested solution. Also, many large organizations have adopted it as a solution on their own. The latest version of the package is available on <a class="editor-rtfLink" href="https://cran.r-project.org/web/packages/shiny.router/index.html" target="_blank" rel="noopener noreferrer">CRAN</a>, so the installation couldn't be any easier: <pre><code class="language-r">install.packages("shiny.router")</code></pre> The new version (0.2.0) was released on the 30th October 2020, and it brought new documentation and functionalities and fixed existing issues. You can read the full changelog <a class="editor-rtfLink" href="https://github.com/Appsilon/shiny.router/blob/master/CHANGELOG.md" target="_blank" rel="noopener noreferrer">here</a>. <blockquote>See some impressive Example Shiny Apps in our <a href="http://demo.appsilon.ai" target="_blank" rel="noopener noreferrer">Shiny Demo Gallery</a></blockquote> <h2 id="create-navbars">Creating Navigation Bars with shiny.router</h2> To show how <code>shiny.router</code> works in practice, we'll develop a simple dashboard with a couple of routes. Every route will have a dummy text, showing us which route we're on. To start, we'll import both <code>shiny</code> and <code>shiny.router</code>: <pre><code class="language-r">library(shiny) library(shiny.router)</code></pre> Next, we will store content for three pages in three variables. Every page has a <code>shiny.titlePanel</code> and a paragraph: <pre><code class="language-r">home_page <- div( titlePanel("Dashboard"), p("This is a dashboard page") ) settings_page <- div( titlePanel("Settings"), p("This is a settings page") ) contact_page <- div( titlePanel("Contact"), p("This is a contact page") )</code></pre> We can then make a router and attach each of the pages with its corresponding route. The dashboard is located on the root page, so it will be the first one you see: <pre><code class="language-r">router <- make_router( route("/", home_page), route("settings", settings_page), route("contact", contact_page) )</code></pre> The rest of the Shiny app is more or less what you would expect. We have to declare the <code>UI</code>, which contains a list of routes that enable us to navigate between pages. The <code>server</code> function passes input, output, and session data to the router. Finally, the call to <code>shinyApp</code> brings these two components together. <pre><code class="language-r">ui <- fluidPage( tags$ul( tags$li(a(href = route_link("/"), "Dashboard")), tags$li(a(href = route_link("settings"), "Settings")), tags$li(a(href = route_link("contact"), "Contact")) ), router$ui ) server <- function(input, output, session) { router$server(input, output, session) } shinyApp(ui, server)</code></pre> As a result, we have the following web application: <img class="wp-image-6031 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b021a427d7e18d985649f6_001-1.gif" alt="Unstyled Shiny Router App" width="888" height="282" /> Unstyled Shiny Router App The application gets the job done but is quite basic with regards to the styling. Let's fix that next. <h2 id="styling">Styling Navigation Bars</h2> You can add styles to your Shiny applications <a href="https://appsilon.com/howto-css-and-shiny/" target="_blank" rel="noopener noreferrer">with CSS</a>. To do so, create a <code>www</code> folder where your R script is, and create a CSS file inside it. We've named ours <code>main.css</code>, but you can call yours whatever you want. To link the created CSS file with the Shiny app, we have to add a <code>theme</code> to <code>shiny.fluidPage</code>. Here's how: <pre><code class="language-r">ui <- fluidPage( theme = "main.css", tags$ul( tags$li(a(href = route_link("/"), "Dashboard")), tags$li(a(href = route_link("settings"), "Settings")), tags$li(a(href = route_link("contact"), "Contact")) ), router$ui )</code></pre> The value for the <code>theme</code> parameter must be identical to the name of the CSS file. If you were to run the app now, everything would look the same as before. That's because we haven't added any stylings yet. Copy the following code snippet to your CSS file: <pre><code class="language-r">ul { background-color: #0099f9; display: flex; justify-content: flex-end; list-style-type: none; } ul li a { color: #ffffff; display: block; font-size: 1.6rem; padding: 1.5rem 1.6rem; text-decoration: none; transition: all, 0.1s; } a:link, a:visited, a:hover, a:active { color: #ffffff; text-decoration: none; } ul li a:hover { background-color: #1589d1; color: #ffffff; }</code></pre> Save and rerun the application. You will see the following: <img class="wp-image-6032 size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b021a49bd6df84c7f5c409_002-2.gif" alt="Styled Shiny Router App" width="888" height="282" /> Styled Shiny Router App And that's how you can style <code>shiny.router</code> and Shiny apps in general. <h2 id="conclusion">Conclusion</h2> In this short hands-on guide, we've covered the intuition and logic behind the <code>shiny.router</code> package. We've seen how routing works, how to create navigation bars with routing, and how to style navigation bars. You can learn more about <code>shiny.router</code> and other Appsilon's open-source packages below: <ul><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-router-package/" target="_blank" rel="noopener noreferrer">Official Release of shiny.router and its New Features</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/rapid-internationalization-of-shiny-apps-shiny-i18n-version-0-2/" target="_blank" rel="noopener noreferrer">How to Add Multi-Language Support to Shiny Apps</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-dashboard-ui-crash-course/" target="_blank" rel="noopener noreferrer">Why is My Dashboard Ugly? A Crash Course in R Shiny UI</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/shiny-worker-package/" target="_blank" rel="noopener noreferrer">shiny.worker: Speed Up R Shiny Apps by Offloading Heavy Calculations</a></li><li><a class="editor-rtfLink" href="https://wordpress.appsilon.com/r-shiny-faster-updateinput-css-javascript/" target="_blank" rel="noopener noreferrer">Make R Shiny Dashboards Faster with updateInput, CSS, and JavaScript</a></li></ul> <a href="https://appsilon.com/careers/"><img class="aligncenter wp-image-5940 size-medium" src="https://wordpress.appsilon.com/wp-content/uploads/2020/11/appsilon.hiring0-600x338.jpg" alt="" width="600" height="338" /></a> Appsilon is hiring! We are primarily seeking a senior-level engineering manager who can mentor our junior developers. See our <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/" target="_blank" rel="noopener noreferrer">Careers</a> page for all new openings, including openings for a <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#project-manager" target="_blank" rel="noopener noreferrer">Project Manager</a> and <a class="editor-rtfLink" href="https://wordpress.appsilon.com/careers/#community-manager" target="_blank" rel="noopener noreferrer">Community Manager</a>.