If you’ve built a Shiny app with R you’ll know how exciting it feels to get your first app up and running. Shiny is an amazing tool for R users, but how do you take it to the next level? This post with outline five easy ways to make Shiny apps more professional.
Add a Progress Wheel
I’ll start with the progress wheel because it is the easiest and most impactful change to make. Oftentimes, Shiny apps involve calculations that take more than one second to execute. It can be a frustrating experience for the user to interact with an application and wait without knowing what is happening. Is the application busy doing some calculation? Did the user select the correct button? Is the server down? You have likely been in this situation yourself as a user of the web. There are a few different ways to implement a progress indicator, but I have found the simplest and most effective solution already in the
shinysky package. The
busyIndicator() function allows you to specify a custom message and wait time before the progress wheel appears.
busyIndicator(text = "Calculation in progress ... ", wait = 0)
Create a www Folder
www that is located in the same directory as the
server.R files. The
www folder is the main location for all web resources in your application. If you would like to enforce a global standard of styling, then create a
.css file containing the CSS stylesheet language for formatting. If you would like to add images or GIFs to your Shiny app, then place them in the www folder as well. Shiny supports most image file formats such as
.js file containing any functions or variables that you would like to execute. Again, place this file inside the
www folder. Note that you must explicitly reference these files inside the
<head> tag of your app. The best way to add to your app is by using
tags$link() like this:
tags$head( tags$link(rel = "stylesheet", type = "text/css", href = "style.css") )
You can even give your app a bookmark icon using the link tag instead of the head tag!
tags$link(rel = "shortcut icon", type = "image/x-icon", href = "my-shortcut-icon.ico")
Style with CSS
If you are deploying your Shiny apps in a professional setting, it is a best practice to format and style your apps using rules defined by the CSS stylesheet language. This will reduce the amount of time and effort to style new applications and provide a clean and consistent experience so that users quickly become familiar with how elements of your apps function based on a consistent appearance. Using CSS in Shiny apps is no different from styling a traditional web page, so any resource teaching CSS will help, such as, the W3Schools CSS Tutorial available at http://www.w3schools.com/css/. A Shiny CSS guide is also available at http://shiny.rstudio.com/articles/css.html
Use a global.R file
It is good practice when coding software to place commonly used pieces of logic in a central location. You can put this concept into practice by creating a
global.R file for your Shiny app. The
global.R file is not a requirement for a Shiny app, but it will reduce redundant code and increase the app’s speed by re-using logic and variables from a global scope among concurrent app users. The
global.R file should be located in the same directory as the
server.R files. Whenever a Shiny app is first used, the
global.R file makes its logic available to the
server.R files. This speeds up your app because it is only runs once (when the app is first launched). Typically,
global.R is a good place for loading libraries, sourcing R functions or variables needed by your app, and setting options like
stringsAsFactors = FALSE.
Encourage Data Downloading
A big part of Shiny’s value proposition in the enterprise is promoting data democracy and the free sharing of information for use to further benefit the company. Shiny app users may prefer other tools, such as Excel or Tableau or Python. Empower your users and allow them the flexibility to intergrate into their preferred tool. The best way to facilitate that is to allow downloads of the data. The best package by far for displaying data and allowing for downloads is the
datatable package. The following code snippet creates a row for your download button and then the datatable. I recommend pulling the button to the right of the screen using
float: right; in your CSS so the button is naturally placed at the top right of your table and ready for the user to click.
fluidRow( column(12, downloadButton("downloadDataFromTable", "Download Table Data")) ) fluidRow( column(12, DT::dataTableOutput("campaign_table", width = "100%")) )