Shiny tips & tricks for improving your apps and solving common problems

Dear 丶 2022-07-17 03:38 14阅读 0赞

This document contains a collection of various Shiny tricks that I commonly use or that I know many people ask about. Each link contains a complete functional Shiny app that demonstrates how to perform a non trivial task in Shiny. The complete up-to-date list of tips, along with all the code, is [on GitHub][].

[Click here to see the most up-to-date list of tips][on GitHub]

Since I first learned about [Shiny][] 2 years ago, I was always looking for ways to push Shiny to its limits and I enjoyed finding ways to work around common problems people were having (the harder the problem, the better!). I’ve built [many Shiny apps][] over these 2 years, both for myself and as a contractor for other people/companies, and throughout this time I developed a handy list of Shiny design patterns and tricks, some of which I present here.

This also seems like an appropriate place to mention that I am available for hire, so if you need some help with anything Shiny, feel free to [contact me][].

### Table of contents ###

*  [Prereq: How to hide/show something in Shiny? How to disable an input? How do I reset an input?][Prereq_ How to hide_show something in Shiny_ How to disable an input_ How do I reset an input]
 *  [Show a spinning “loading” animation while a plot is recalculating][Show a spinning _loading_ animation while a plot is recalculating] ([code][])
 *  [Hide a tab][] ([code][code 1])
 *  [Hide/show shinydashboard sidebar programmatically][Hide_show shinydashboard sidebar programmatically] ([code][code 2])
 *  [Loading screen][] ([code][code 3])
 *  [Automatically stop a Shiny app when closing the browser tab][]([code][code 4])
 *  [Close the window (and stop the app) with a button click][Close the window _and stop the app_ with a button click]([code][code 5])
 *  [Select input with more breathing room][] ([code][code 6])
 *  [Select input with groupings of options][] ([code][code 7])
 *  [Getting the value of an object in a running Shiny app without access to a debugger][] ([code][code 8])
 *  [Pre-populate Shiny inputs when an app loads based on URL parameters][] ([code][code 9])
 *  [Split app code across multiple files (when codebase is large)][Split app code across multiple files _when codebase is large]([code][code 10])
 *  [Use a variable from the server in a UI `conditionalPanel()`][Use a variable from the server in a UI_conditionalPanel]([code][code 11])
 *  [Show user a generic error message when a Shiny error occurs in an output][] ([code][code 12])
 *  [Fix filenames of files uploaded via fileInput()][Fix filenames of files uploaded via fileInput] ([code][code 13])
 *  [Shiny app with sequence of pages][] ([code][code 14])
 *  [Toggle a UI element (alternate between show/hide) with a button][Toggle a UI element _alternate between show_hide_ with a button] ([code][code 15])
 *  [Send a message from R to JavaScript][] ([code][code 16])
 *  [Send a message from JavaScript to R][] ([code][code 17])
 *  [Send a message from JavaScript to R – force repetitive messages to get sent][Send a message from JavaScript to R _ force repetitive messages to get sent] ([code][code 18])
 *  [Press the Enter key to simulate a button press][] ([code][code 19])
 *  [Serve files (images/text files/etc) instead of webpages from a Shiny app][Serve files _images_text files_etc_ instead of webpages from a Shiny app] ([code][code 20])
 *  [Update multiple Shiny inputs without knowing input type][]([code][code 21])
 *  [“Busy…” / “Done!” / “Error” feedback after pressing a button][Busy_ _ _Done_ _ _Error_ feedback after pressing a button] ([code][code 22])
 *  [Simple AJAX system for Shiny apps (JS -> R -> JS communication)][Simple AJAX system for Shiny apps _JS -_ R -_ JS communication] ([code][code 23])
 *  [Navigation in a Shiny app (forward/backwards in history)][Navigation in a Shiny app _forward_backwards in history]([code][code 24])
 *  [Sharing images on Facebook][] ([code][code 25])
 *  [Facebook login through JavaScript in Shiny][] ([code][code 26])
 *  [Multiple scrollspy on same page – basic][Multiple scrollspy on same page _ basic] ([code][code 27])
 *  [Multiple scrollspy on same page – advanced][Multiple scrollspy on same page _ advanced] ([code][code 28])

## Prereq: How to hide/show something in Shiny? How to disable an input? How do I reset an input? ##

A few very common questions in Shiny are “how do I hide/show something”, “how do I disable an input”, and “how do I reset an input”. Many of the code samples in this document also rely on being able to do these things, so I wanted to start by saying that I will be using the [shinyjs][] package to do all that. (Yes, I know it looks like I’m shamelessly advertising shinyjs by saying this… but it is going to be useful for many concepts here)

## Show a spinning “loading” animation while a plot is recalculating ##

**[Link to code][code]**

When a Shiny plot is recalculating, the plot gets grayed out. This app shows how you can add a spinner wheel on top of the plot while it is recalculating, to make it clear to the user that the plot is reloading. There can be many different ways to achieve a similar result using different combinations of HTML/CSS, this example is just the simplest one I came up with.

[![Demo][]][code]

## Hide a tab ##

**[Link to code][code 1]**

This app demonstrates how `shinyjs` can be used to hide/show a specific tab in a `tabsetPanel`. In order to use this trick, the`tabsetPanel` must have an id. Using this id and the value of the specific tab you want to hide/show, you can call`shinyjs::hide()`/`shinyjs::show()`/`shinyjs::toggle()`.

[![Demo][Demo 1]][code 1]

## Hide/show shinydashboard sidebar programmatically ##

**[Link to code][code 2]**

A common question regarding `shinydashboard` is how to programmatically hide/show the sidebar. This can very easily be done using the [shinyjs][] package, as demonstrated here.

[![Demo][Demo 2]][code 2]

## Loading screen ##

**[Link to code][code 3]**

This simple app shows how to add a “Loading…” screen overlaying the main app while the app’s server is initializing. The main idea is to include an overlay element that covers the entire app (using CSS), hide the main app’s UI, and at the end of the server function show the UI and hide the overlay.

[![Demo][Demo 3]][code 3]

## Automatically stop a Shiny app when closing the browser tab ##

**[Link to code][code 4]**

When developing a Shiny app and running the app in the browser (as opposed to inside the RStudio Viewer), it can be annoying that when you close the browser window, the app is still running and you need to manually press “Esc” to kill it. By adding a single line to the server code `session$onSessionEnded(stopApp)`, a Shiny app will automatically stop running whenever the browser tab (or any session) is closed.

## Close the window (and stop the app) with a button click ##

**[Link to code][code 5]**

This simple example shows how you can have a button that, when clicked, will close the current browser tab and stop the running Shiny app (you can choose to do only one of these two actions).

## Select input with more breathing room ##

**[Link to code][code 6]**

One common CSS question in Shiny is how to make the select input dropdown menu have some more whitespace. It’s actually very easy to do with just two CSS rules, as demonstrated in this example.

[![Demo][Demo 4]][code 6]

## Select input with groupings of options ##

**[Link to code][code 7]**

This isn’t really a trick as much as an [undocumented feature][] in Shiny that not many people know about. Usually when people write dropdowns in Shiny, all the options are just provided as one long list. But it is possible to have groups of items, and it’s very easy to do.

[![Demo][Demo 5]][code 7]

## Getting the value of an object in a running Shiny app without access to a debugger ##

**[Link to code][code 8]**

Sometimes you may need to know the value of some variable/function call in a Shiny app when you don’t have easy access to debugging tools. For example, suppose you deploy your shiny app on shinyapps.io and it’s running into a weird error there. You’re sure that it’s because one of the packages on the shinyapps.io server is not the version that you expect, but you want to make sure that your suspicion is correct. It’s a bit difficult to debug on shinyapps.io (one thing you could do is try to use the log files), but there’s a quick and easy way to see any value in a Shiny app in real-time.

## Pre-populate Shiny inputs when an app loads based on URL parameters ##

**[Link to code][code 9]**

This simple app demonstrates how you can fill out certain input fields when a Shiny app loads based on URL parameters.

[![Demo][Demo 6]][code 9]

## Split app code across multiple files (when codebase is large) ##

**[Link to code][code 10]**

When creating Shiny apps with a lot of code and a complex UI, it can sometimes get very messy and difficult to maintain your code when it’s all in one file. What you can do instead is have one “main” UI and “main” server and split your UI and server code into multiple files. This can make your code much more manageable and easier to develop when it grows large. You can split the code however you want, but I usually like to split it logically: for example, if my app has 4 tabs then the UI for each tab would be in its own file and the server code for each tab would be in its own file. The example code here shows how to separate the code of an app with two tabs into 2 UI files and 2 server files (one for each tab).

## Use a variable from the server in a UI \`conditionalPanel()\` ##

**[Link to code][code 11]**

When using a conditional panel in the UI, the condition is usually an expression that uses an input value. But what happens when you want to use a conditional panel with a more complex condition that is not necessarily directly related to an input field? This example shows how to define an output variable in the server code that you can use in the UI. An alternative approach is to use the `show()` and`hide()` functions from the [shinyjs][] package.

## Show user a generic error message when a Shiny error occurs in an output ##

**[Link to code][code 12]**

When a Shiny output encounters an error, the exact error message will be shown to the user in place of the output. This is generally a good feature because it’s easier to debug when you know the exact error. But sometimes this is undesireable if you want to keep the specifics of what happened unknown to the user, and you prefer to just show the user a generic “Some error occurred; please contact us” message. This may sound counter intuitive, but you can actually do this with a tiny bit of CSS, as this example shows.

## Fix filenames of files uploaded via fileInput() ##

**[Link to code][code 13]**

When selecting files using a `fileInput()`, the filenames of the selected files are not retained. This is not usually a problem because usually you only care about the contents of a file and not its name. But sometimes you may actually need to know the original name of each selected file. This example shows how to write a simple function `fixUploadedFilesNames()` to rename uploaded files back to their original names.

## Shiny app with sequence of pages ##

**[Link to code][code 14]**

This app demonstrates how to write a Shiny app that has a sequence of different pages, where the user can navigate to the next/previous page. This can be useful in many scenarios that involve a multi-step process. This behaviour can also be achieved by simply using tabs, but when using tabs the user can freely move from any tab to any other tab, while this approach restricts the user to only move to the previous/next step, and can also control when the user can move on to the next page.

[![Demo][Demo 7]][code 14]

## Toggle a UI element (alternate between show/hide) with a button ##

**[Link to code][code 15]**

Sometimes you want to toggle a section of the UI every time a button is clicked. This app shows how to achieve very basic toggle functionality using `conditionalPanel()`. If you want anything more advanced, you can use the `toggle()` function from the[shinyjs][] package.

## Send a message from R to JavaScript ##

**[Link to code][code 16]**

While Shiny is very powerful, there are many things that cannot be achieved in R and must be done in JavaScript. When including JavaScript code in a Shiny app, you sometimes need to send a message or a value from R to the JavaScript layer. This example how this is done.

## Send a message from JavaScript to R ##

**[Link to code][code 17]**

In some shiny applications you may want to send a value from JavaScript to the R server. This can be useful in a variety of applications, for example if you want to capture a mouse click or a keyboard press of the user and tell R about it. This example shows how this is done.

## Send a message from JavaScript to R – force repetitive messages to get sent ##

**[Link to code][code 18]**

When you send a message from JS to R with the exact same value multiple times in a row, only the first time actually gets sent to Shiny. This can often be problematic, and this example shows a fairly simple workaround.

## Press the Enter key to simulate a button press ##

**[Link to code][code 19]**

This is a simple app with a tiny bit of JavaScript that shows you how to cause an Enter key press inside an input to trigger a click on a button.

## Serve files (images/text files/etc) instead of webpages from a Shiny app ##

**[Link to code][code 20]**

It is possible to serve an image or another file directly from your Shiny app instead of a webpage. The method shown here is a simple proof-of-concept of how to achieve this functionality. It also supports passing GET parameters to the file-generating logic so that the file can be parameterized.

[![Demo][Demo 8]][code 20]

## Update multiple Shiny inputs without knowing input type ##

**[Link to code][code 21]**

Shiny allows you to update an input element only if you know the type of input. Furthermore, Shiny only allows you to update input elements one by one. This Shiny app shows how you can update an input only using its ID and without knowing its type, and how to update multiple inputs together.

## “Busy…” / “Done!” / “Error” feedback after pressing a button ##

**[Link to code][code 22]**

When the user clicks on a button, it usually results in some R code being run. Sometimes the resulting code is short and quick and the user doesn’t even notice any delay, but sometimes the button click initialiates some long process or computation that can take more than 1 second to complete. In those cases, it might be a bit confusing to the user if there is no immediate feedback notifying that the action is being performed. For example, if the user clicked a button to load data from a database and it takes 3 seconds to connect to the database, it can be useful to show a “Connecting…” and then a “Done!” (or “Error”) message, instead of just letting the user wait without seeing any message. Of course when the wait time is only 2-3 seconds it’s not a big deal, but you can imagine that for a 20-second process, the user might think that something went wrong if there is no feedback. This example shows how to add some immediate feedback to the user after a button is clicked, including disabling/enabling the button and showing a success/error message when appropriate.

[![Demo][Demo 9]][code 22]

## Simple AJAX system for Shiny apps (JS -> R -> JS communication) ##

**[Link to code][code 23]**

Sometimes it’s useful to be able to call an R function from JavaScript and use the return value from R back in JavaScript. This sort of communication is usually done with AJAX in JavaScript. This app shows how to implement a simple and ultra lightweight AJAX-like system in Shiny, to be able to call functions in R.

## Navigation in a Shiny app (forward/backwards in history) ##

**[Link to code][code 24]**

Sometimes it’s nice to be able to support navigation within a Shiny app, especially when there are multiple tabs or some other form of “multiple pages” in a Shiny app. Since Shiny apps are a single page, the browser nagivation buttons (previous/next page) don’t work when “navigating” within a Shiny app. You also can’t bookmark a certain “page” in a Shiny app – every time you go to an app, you will be shown the initial state of the app. This app shows how to implement basic navigation in Shiny apps.

[![Demo][Demo 10]][code 24]

## Sharing images on Facebook ##

**[Link to code][code 25]**

There are two ways to share images on Facebook: either using an image URL and a popup dialog, or by programmatically supplying the Facebook API with a base64 encoded image. This example shows both.

## Facebook login through JavaScript in Shiny ##

**[Link to code][code 26]**

This app shows how you can use the [AJAX-like system][code 23] in Shiny to authorize a user using Facebook’s JavaScript library and pass the user’s information to R for processing.

## Multiple scrollspy on same page – basic ##

**[Link to code][code 27]**

The Bootstrap *scrollspy* plugin does not support multiple scrollspy objects per page. This Shiny app demonstrates how to support scrollspy on multiple tabs by having one common scrollspy control that gets updated via JavaScript whenever a tab is changed to reflect the contents of the new tab.

## Multiple scrollspy on same page – advanced ##

**[Link to code][code 28]**

The Bootstrap *scrollspy* plugin does not support multiple scrollspy objects per page.  
This Shiny app demonstrates how to support scrollspy on multiple tabs by allowing each tab to have its own independent scrollspy control and using JavaScript to ensure only the scrollspy on the current tab is activated.

[on GitHub]: https://github.com/daattali/advanced-shiny#readme
[Shiny]: http://shiny.rstudio.com/
[many Shiny apps]: https://daattali.com/shiny/
[contact me]: http://deanattali.com/contact
[Prereq_ How to hide_show something in Shiny_ How to disable an input_ How do I reset an input]: http://deanattali.com/blog/advanced-shiny-tips/#shinyjs
[Show a spinning _loading_ animation while a plot is recalculating]: http://deanattali.com/blog/advanced-shiny-tips/#plot-spinner
[code]: https://github.com/daattali/advanced-shiny/tree/master/plot-spinner
[Hide a tab]: http://deanattali.com/blog/advanced-shiny-tips/#hide-tab
[code 1]: /images/20220717/e66367d47a4c4c8b9ef66aaa3e8a7aaf.png
[Hide_show shinydashboard sidebar programmatically]: http://deanattali.com/blog/advanced-shiny-tips/#shinydashboard-sidebar-hide
[code 2]: /images/20220717/da9f1e38315144669165ae9379d09c7a.png
[Loading screen]: http://deanattali.com/blog/advanced-shiny-tips/#loading-screen
[code 3]: /images/20220717/0d521a510f7a44c986cb2243248c23d5.png
[Automatically stop a Shiny app when closing the browser tab]: http://deanattali.com/blog/advanced-shiny-tips/#auto-kill-app
[code 4]: https://github.com/daattali/advanced-shiny/tree/master/auto-kill-app
[Close the window _and stop the app_ with a button click]: http://deanattali.com/blog/advanced-shiny-tips/#close-window
[code 5]: https://github.com/daattali/advanced-shiny/tree/master/close-window
[Select input with more breathing room]: http://deanattali.com/blog/advanced-shiny-tips/#select-input-large
[code 6]: /images/20220717/f322b75175204aea9e58ae0166f0f263.png
[Select input with groupings of options]: http://deanattali.com/blog/advanced-shiny-tips/#dropdown-groups
[code 7]: /images/20220717/84567d92eda34f8388cf708dd6dbd999.png
[Getting the value of an object in a running Shiny app without access to a debugger]: http://deanattali.com/blog/advanced-shiny-tips/#debug-value
[code 8]: https://github.com/daattali/advanced-shiny/tree/master/debug-value
[Pre-populate Shiny inputs when an app loads based on URL parameters]: http://deanattali.com/blog/advanced-shiny-tips/#url-inputs
[code 9]: /images/20220717/1abca4e74e294eafb52410c262593bb5.png
[Split app code across multiple files _when codebase is large]: http://deanattali.com/blog/advanced-shiny-tips/#split-code
[code 10]: https://github.com/daattali/advanced-shiny/tree/master/split-code
[Use a variable from the server in a UI_conditionalPanel]: http://deanattali.com/blog/advanced-shiny-tips/#server-to-ui-variable
[code 11]: https://github.com/daattali/advanced-shiny/tree/master/server-to-ui-variable
[Show user a generic error message when a Shiny error occurs in an output]: http://deanattali.com/blog/advanced-shiny-tips/#error-custom-message
[code 12]: https://github.com/daattali/advanced-shiny/tree/master/error-custom-message
[Fix filenames of files uploaded via fileInput]: http://deanattali.com/blog/advanced-shiny-tips/#upload-file-names
[code 13]: https://github.com/daattali/advanced-shiny/tree/master/upload-file-names
[Shiny app with sequence of pages]: http://deanattali.com/blog/advanced-shiny-tips/#multiple-pages
[code 14]: /images/20220717/0cba01874e014bec9dd16f9d2a150735.png
[Toggle a UI element _alternate between show_hide_ with a button]: http://deanattali.com/blog/advanced-shiny-tips/#simple-toggle
[code 15]: https://github.com/daattali/advanced-shiny/tree/master/simple-toggle
[Send a message from R to JavaScript]: http://deanattali.com/blog/advanced-shiny-tips/#message-r-to-javascript
[code 16]: https://github.com/daattali/advanced-shiny/tree/master/message-r-to-javascript
[Send a message from JavaScript to R]: http://deanattali.com/blog/advanced-shiny-tips/#message-javascript-r
[code 17]: https://github.com/daattali/advanced-shiny/tree/master/message-javascript-to-r
[Send a message from JavaScript to R _ force repetitive messages to get sent]: http://deanattali.com/blog/advanced-shiny-tips/#message-javascript-r-force
[code 18]: https://github.com/daattali/advanced-shiny/tree/master/message-javascript-to-r-force
[Press the Enter key to simulate a button press]: http://deanattali.com/blog/advanced-shiny-tips/#proxy-click
[code 19]: https://github.com/daattali/advanced-shiny/tree/master/proxy-click
[Serve files _images_text files_etc_ instead of webpages from a Shiny app]: http://deanattali.com/blog/advanced-shiny-tips/#serve-images-files
[code 20]: /images/20220717/9b578697974b45d5a818ecffe9f84e37.png
[Update multiple Shiny inputs without knowing input type]: http://deanattali.com/blog/advanced-shiny-tips/#update-input
[code 21]: https://github.com/daattali/advanced-shiny/tree/master/update-input
[Busy_ _ _Done_ _ _Error_ feedback after pressing a button]: http://deanattali.com/blog/advanced-shiny-tips/#busy-indicator
[code 22]: /images/20220717/45806cf2b4bd40c19674830f6ad4bb22.png
[Simple AJAX system for Shiny apps _JS -_ R -_ JS communication]: http://deanattali.com/blog/advanced-shiny-tips/#api-ajax
[code 23]: https://github.com/daattali/advanced-shiny/tree/master/api-ajax
[Navigation in a Shiny app _forward_backwards in history]: http://deanattali.com/blog/advanced-shiny-tips/#navigate-history
[code 24]: /images/20220717/92f4894cc49c4a008befc3746158df45.png
[Sharing images on Facebook]: http://deanattali.com/blog/advanced-shiny-tips/#fb-share-img
[code 25]: https://github.com/daattali/advanced-shiny/tree/master/fb-share-img
[Facebook login through JavaScript in Shiny]: http://deanattali.com/blog/advanced-shiny-tips/#fb-login
[code 26]: https://github.com/daattali/advanced-shiny/tree/master/fb-login
[Multiple scrollspy on same page _ basic]: http://deanattali.com/blog/advanced-shiny-tips/#multiple-scrollspy-basic
[code 27]: https://github.com/daattali/advanced-shiny/tree/master/multiple-scrollspy-basic
[Multiple scrollspy on same page _ advanced]: http://deanattali.com/blog/advanced-shiny-tips/#multiple-scrollspy-advanced
[code 28]: https://github.com/daattali/advanced-shiny/tree/master/multiple-scrollspy-advanced
[shinyjs]: https://github.com/daattali/shinyjs
[Demo]: /images/20220717/f8538f875b954c1aabefaf9bfd8f3635.png
[Demo 1]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/hide-tab/hide-tab.gif?zoom=2&w=456&ssl=1
[Demo 2]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/shinydashboard-sidebar-hide/shinydashboard-sidebar-hide.gif?zoom=2&w=456&ssl=1
[Demo 3]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/loading-screen/loading-screen.gif?zoom=2&w=456&ssl=1
[Demo 4]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/select-input-large/selectize-large.png?zoom=2&w=456&ssl=1
[undocumented feature]: https://github.com/rstudio/shiny/issues/1321
[Demo 5]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/dropdown-groups/dropdown-groups.png?zoom=2&w=456&ssl=1
[Demo 6]: https://i2.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/url-inputs/url-inputs.gif?zoom=2&w=456&ssl=1
[Demo 7]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/multiple-pages/multiple-pages.gif?zoom=2&w=456&ssl=1
[Demo 8]: https://i2.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/serve-images-files/serve-images-files.gif?zoom=2&w=456&ssl=1
[Demo 9]: https://i0.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/busy-indicator/busy-indicator.gif?zoom=2&w=456&ssl=1
[Demo 10]: https://i1.wp.com/raw.githubusercontent.com/daattali/advanced-shiny/master/navigate-history/navigate-history.gif?zoom=2&w=456&ssl=1