Add a popup with error, warning to shiny

Question

Is there any way to add a popup (a closable window) with a warning or other message in Shiny - the R package I use to build my web application?

Answer 1

Bolaka is right, install and load the shinyBS package, then run bsExample("Alerts") to see an example with code you can copy and paste.

Answer 2

There is this new R package out there - shinyBS which brings many twitter bootstrap functionality into shiny like alerts, tooltips, popovers, modal dialogs, progress bars etc...

shinyBS

Answer 3

Although I don't think there is anything natively available in shiny, you can try adding jQueryUI to your application and using the Dialog widget. See http://jqueryui.com/dialog/.

(Un?)fortunately, you'll be forced to write some JavaScript to make it work.

---

Per @GSee's suggestion, here's a very minimal example of what it takes to make it work.

You'll need to download jQueryUI and set up a shiny project with a structure like so:

.
├── server.R
├── ui.R
└── www
    ├── css
    │   └── jquery-ui.css
    ├── images
    │   ├── animated-overlay.gif
    │   ├── ui-bg_flat_0_aaaaaa_40x100.png
    │   ├── ui-bg_flat_75_ffffff_40x100.png
    │   ├── ui-bg_glass_55_fbf9ee_1x400.png
    │   ├── ui-bg_glass_65_ffffff_1x400.png
    │   ├── ui-bg_glass_75_dadada_1x400.png
    │   ├── ui-bg_glass_75_e6e6e6_1x400.png
    │   ├── ui-bg_glass_95_fef1ec_1x400.png
    │   ├── ui-bg_highlight-soft_75_cccccc_1x100.png
    │   ├── ui-icons_222222_256x240.png
    │   ├── ui-icons_2e83ff_256x240.png
    │   ├── ui-icons_454545_256x240.png
    │   ├── ui-icons_888888_256x240.png
    │   └── ui-icons_cd0a0a_256x240.png
    └── js
        └── jquery-ui.js

(all of the image icons come part of jQueryUI)

Next, add a file called scripts.js (or whatever you like) to the www/js folder, containing the following

$( function() {
  $("#dialog").dialog();
})

This calls the jQueryUI dialog initializer on the element with id dialog.

Next, have a server.R and ui.R as follows:

server.R
--------
library(shiny)
shinyServer( function(input, output, session) {

  ## a very unsafe, basic access to the R console
  output$dialog <- renderPrint({

    code <- input$console
    output <- eval( parse( text=code ) )
    return(output)

  })

})

and

ui.R
----

library(shiny)

shinyUI(bootstrapPage(
  includeCSS("www/css/jquery-ui.css"),  

  includeScript("www/js/jquery-ui.js"),
  includeScript("www/js/scripts.js"),

  textInput("console", "Enter an R Command"),
  uiOutput("dialog")

))

Now, if you do runApp(), you should see the results of evaluation of any code you write into the text input console appearing in the dialog box.

Now, the question is, how can we minimize it, or only show it when, say, error code is produced? That I'll have to leave for you, because I think it'll be tricky. Some options:

1. Figure out how to get our R code to send, or trigger, some JavaScript to show or hide the element. An example (not mine) using this to temporarily disable a button is here.

2. Attach a (JavaScript) observer or trigger to the output produced, and if you see an error (or output otherwise conforming in some way), show the box; otherwise hide it.

3. Generate an actual Shiny input/output pair to handle behavior as desired. (Brief tutorial at http://rstudio.github.io/shiny/tutorial/#building-inputs)

If you want to get a bit more out of your jQueryUI dialog, you can also try the extension jQuery-dialogextend here.

And, disclaimer: the console here is only for demonstrative purposes; please don't put any shiny apps that run unsanitized code from the user into the wild!