<p><div><div><div><div data-show-faces="false" data-height="21" data-width="100" data-layout="button_count" data-send="true" data-href="https://www.r-bloggers.com/shinyalert-easily-create-pretty-popup-messages-modals-in-shiny/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://deanattali.com/blog/shinyalert-package/"> Dean Attali's R Blog</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p>A brand new shiny package has entered the world yesterday: <a rel="nofollow" href="https://github.com/daattali/shinyalert/" target="_blank"><code>shinyalert</code></a>. It does only one thing, but does it well: show a message to the user in a modal (aka popup, dialog, or alert box). Actually, it can do one more thing: <code>shinyalert</code> can also be used to retrieve an input value from the user using a modal.</p>
<p>You can visit the <a rel="nofollow" href="https://github.com/daattali/shinyalert/" target="_blank">GitHub page</a> or check out a demo online for yourself:</p>
<div>
<a rel="nofollow" href="https://daattali.com/shiny/shinyalert-demo/" target="_blank">Check out a demo</a>
</div>
<p>I usually release packages at version <em>0.1</em>, but with <code>shinyalert</code> I decided to be optimistic (read: naive) and release version <em>1.0</em>. This package is fairly lightweight and I do not see it growing too much in terms of functionality, and because of its simplicity I don’t expect too many bugs. So I decided to start if off at <em>1.0</em> and my wishful thinking is that it could remain there without much ongoing maintenance.</p>
<h1>Table of contents</h1>
<ul>
<li><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#background" target="_blank">Background</a></li>
<li><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#overview" target="_blank">Overview</a></li>
<li><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#input-modals" target="_blank">Input modals</a></li>
<li><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#return-value" target="_blank">Modal return value</a></li>
<li><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#callbacks" target="_blank">Callbacks</a></li>
<li><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#shiny-comparison" target="_blank">Comparison with Shiny modals</a></li>
</ul>
<h2>Background</h2>
<p>The idea for this package has been on my mind for a very long time, and the basis for this package is a 10-liner that I wrote 2.5 years ago.</p>
<p>Back in mid 2015, when I was a graduate student spending 15 hours/day building Shiny apps and packages for fun, and maybe 15 minutes/day on my actual thesis (I will forever be grateful to <a rel="nofollow" href="https://twitter.com/JennyBryan" target="_blank">Jenny Bryan</a> for allowing me to get away with that), <a rel="nofollow" href="https://twitter.com/timelyportfolio" target="_blank">Kent Russell (@timelyportfolio)</a> built an htmlwidget called <code>sweetalertR</code>. It’s a port of the <a rel="nofollow" href="https://github.com/t4t5/sweetalert" target="_blank">sweetalert</a> JavaScript library, which is used to create simple pretty modals, to R.</p>
<p>Shortly after, <a rel="nofollow" href="https://twitter.com/thercast" target="_blank">Eric Nantz (@theRcast)</a> asked Kent if it’s possible to incorporate these modals in Shiny apps, and tagged me in his question. I’d never heard of sweetalert before, but I was intrigued, so in <a rel="nofollow" href="https://github.com/timelyportfolio/sweetalertR/issues/1#issuecomment-123564079" target="_blank">my response</a> I came up with a short piece of code to include sweetalert modals in Shiny apps.</p>
<p>Over the next year I noticed that I actually found these modals to be very nice so I started working on this package so that everyone could benefit from them. But it turned out that just a few weeks prior, Shiny released a great new version, which included support for modals! And so my motivation for the package quickly plummeted. I still wanted to release this package because I do believe it’s nicer and simpler than Shiny’s modals, and includes a few extra features. Last week, after a 16-month hiatus, I resumed its development.</p>
<p>And here we are!</p>
<h2>Overview</h2>
<p><code>shinyalert</code> uses the <a rel="nofollow" href="https://github.com/t4t5/sweetalert" target="_blank">sweetalert</a> JavaScript library to create simple and elegant modals in Shiny. Modals can contain text, images, OK/Cancel buttons, an input to get a response from the user, and many more customizable options. A modal can also have a timer to close automatically.</p>
<p>Simply call <code>shinyalert()</code> with the desired arguments, such as a title and text, and a modal will show up. In order to be able to call <code>shinyalert()</code> in a Shiny app, you must first call <code>useShinyalert()</code> anywhere in the app’s UI.</p>
<p><a rel="nofollow" href="https://i2.wp.com/raw.githubusercontent.com/daattali/shinyalert/master/inst/img/shinyalert-basic.gif?ssl=1" target="_blank"><img alt="basic modal" src="https://i2.wp.com/raw.githubusercontent.com/daattali/shinyalert/master/inst/img/shinyalert-basic.gif?w=456&ssl=1" data-recalc-dims="1"></a></p>
<p>Here is some minimal Shiny app code that creates the above modal:</p>
<div>
<div>
<pre><code><span>library</span><span>(</span><span>shiny</span><span>)</span><span>
</span><span>library</span><span>(</span><span>shinyalert</span><span>)</span><span>
</span><span>ui</span><span> </span><span>&lt;-</span><span> </span><span>fluidPage</span><span>(</span><span>
</span><span>useShinyalert</span><span>(),</span><span> </span><span># Set up shinyalert</span><span>
</span><span>actionButton</span><span>(</span><span>&quot;preview&quot;</span><span>,</span><span> </span><span>&quot;Preview&quot;</span><span>)</span><span>
</span><span>)</span><span>
</span><span>server</span><span> </span><span>&lt;-</span><span> </span><span>function</span><span>(</span><span>input</span><span>,</span><span> </span><span>output</span><span>,</span><span> </span><span>session</span><span>)</span><span> </span><span>{</span><span>
</span><span>observeEvent</span><span>(</span><span>input</span><span>$</span><span>preview</span><span>,</span><span> </span><span>{</span><span>
</span><span># Show a modal when the button is pressed</span><span>
</span><span>shinyalert</span><span>(</span><span>&quot;Oops!&quot;</span><span>,</span><span> </span><span>&quot;Something went wrong.&quot;</span><span>,</span><span> </span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;error&quot;</span><span>)</span><span>
</span><span>})</span><span>
</span><span>}</span><span>
</span><span>shinyApp</span><span>(</span><span>ui</span><span>,</span><span> </span><span>server</span><span>)</span><span>
</span></code></pre>
</div>
</div>
<h2>Input modals</h2>
<p>Usually the purpose of a modal is simply informative, to show some information to the user. However, the modal can also be used to retrieve an input from the user by setting the <code>type = &quot;input&quot;</code> parameter.</p>
<p><a rel="nofollow" href="https://i0.wp.com/raw.githubusercontent.com/daattali/shinyalert/master/inst/img/shinyalert-input.gif?ssl=1" target="_blank"><img alt="input modal" src="https://i0.wp.com/raw.githubusercontent.com/daattali/shinyalert/master/inst/img/shinyalert-input.gif?w=456&ssl=1" data-recalc-dims="1"></a></p>
<p>Only a single input can be used inside a modal. By default, the input will be a text input, but you can use other HTML input types by specifying the <code>inputType</code> parameter. For example, <code>inputType = &quot;number&quot;</code> will provide the user with a numeric input in the modal.</p>
<p>See the <em><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#return-value" target="_blank">Modal return value</a></em> and <em><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#callbacks" target="_blank">Callbacks</a></em> sections below for information on how to access the value entered by the user.</p>
<h2>Modal return value</h2>
<p>Modals created with <code>shinyalert</code> have a return value when they exit.</p>
<p>When there is an input field in the modal (<code>type=&quot;input&quot;</code>), the value of the modal is the value the user entered. When there is no input field in the modal, the value of the modal is <code>TRUE</code> if the user clicked the “OK” button, and <code>FALSE</code> if the user clicked the “Cancel” button.</p>
<p>When the user exits the modal using the Escape key or by clicking outside of the modal, the return value is <code>FALSE</code> (as if the “Cancel” button was clicked). If the <code>timer</code> parameter is used and the modal closes automatically as a result of the timer, no value is returned from the modal.</p>
<p>The return value of the modal can be accessed via <code>input$shinyalert</code> in the Shiny server’s code, as if it were a regular Shiny input. The return value can also be accessed using the <em><a rel="nofollow" href="https://deanattali.com/blog/shinyalert-package/#callbacks" target="_blank">modal callbacks</a></em>.</p>
<h2>Callbacks</h2>
<p>The return value of the modal is passed as an argument to the <code>callbackR</code> and <code>callbackJS</code> functions (if a <code>callbackR</code> or <code>callbackJS</code> arguments are provided). These are functions that get called, either in R or in JavaScript, when the modal exits.</p>
<p>For example, using the following <code>shinyalert</code> code will result in a modal with an input field. After the user clicks “OK”, a hello message will be printed to both the R console and in a native JavaScript alert box. You don’t need to provide both callback functions, but in this example both are used for demonstration.</p>
<div>
<div>
<pre><code><span>shinyalert</span><span>(</span><span>
</span><span>&quot;Enter your name&quot;</span><span>,</span><span> </span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;input&quot;</span><span>,</span><span>
</span><span>callbackR</span><span> </span><span>=</span><span> </span><span>function</span><span>(</span><span>x</span><span>)</span><span> </span><span>{</span><span> </span><span>message</span><span>(</span><span>&quot;Hello &quot;</span><span>,</span><span> </span><span>x</span><span>)</span><span> </span><span>},</span><span>
</span><span>callbackJS</span><span> </span><span>=</span><span> </span><span>&quot;function(x) { alert('Hello ' + x); }&quot;</span><span>
</span><span>)</span><span>
</span></code></pre>
</div>
</div>
<p>Notice that the <code>callbackR</code> function accepts R code, while the <code>callbackJS</code> function uses JavaScript code.</p>
<p>Since closing the modal with the Escape key results in a return value of <code>FALSE</code>, the callback functions can be modified to not print hello in that case.</p>
<div>
<div>
<pre><code><span>shinyalert</span><span>(</span><span>
</span><span>&quot;Enter your name&quot;</span><span>,</span><span> </span><span>type</span><span> </span><span>=</span><span> </span><span>&quot;input&quot;</span><span>,</span><span>
</span><span>callbackR</span><span> </span><span>=</span><span> </span><span>function</span><span>(</span><span>x</span><span>)</span><span> </span><span>{</span><span> </span><span>if</span><span>(</span><span>x</span><span> </span><span>!=</span><span> </span><span>FALSE</span><span>)</span><span> </span><span>message</span><span>(</span><span>&quot;Hello &quot;</span><span>,</span><span> </span><span>x</span><span>)</span><span> </span><span>},</span><span>
</span><span>callbackJS</span><span> </span><span>=</span><span> </span><span>&quot;function(x) { if (x !== false) { alert('Hello ' + x); } }&quot;</span><span>
</span><span>)</span><span>
</span></code></pre>
</div>
</div>
<h2>Comparison with Shiny modals</h2>
<p>Doesn’t Shiny already have support for modals?</p>
<p>Yes, it does.</p>
<p>And Shiny’s modals are more powerful in some ways than <code>shinyalert</code> modals: Shiny’s native modals (<code>showModal()</code>+<code>modalDialog()</code>) can contain multiple input fields and even outputs.</p>
<p>I created <code>shinyalert</code> for two reasons: first of all, I started working on it well before Shiny had modals (or so I thought). But I decided to keep working on it and release it even afterwards because I find <code>shinyalert</code> to be easier to use and to result in much nicer modals. There are also some extra features in <code>shinyalert</code>, such as the callback functions and the timer. But ultimately it’s a matter of convenience and aesthetics.</p>
	<p>
<div>
<div>To <strong>leave a comment</strong> for the author, please follow the link and comment on their blog: <strong><a href="https://deanattali.com/blog/shinyalert-package/"> Dean Attali's R Blog</a></strong>.</div>
<hr>
<a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers.com</a> offers <strong><a rel="nofollow" href="https://feedburner.google.com/fb/a/mailverify?uri=RBloggers">daily e-mail updates</a></strong> about <a rel="nofollow" href="https://www.r-project.org/" title="The R Project for Statistical Computing">R</a> news and <a rel="nofollow" href="https://www.r-bloggers.com/search/tutorial" title="R tutorials">tutorials</a> on topics such as: <a rel="nofollow" href="https://www.r-bloggers.com/search/data%20science" title="Data science">Data science</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data" title="Big Data">Big Data, <a rel="nofollow" href="https://www.r-users.com/" title="R jobs">R jobs</a>, visualization (<a rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2" title="ggplot and ggplot2 tutorials">ggplot2</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/boxplot" title="Boxplots using lattice and ggplot2 tutorials">Boxplots</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/map" title="Maps and gis">maps</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/animation" title="Animation in R">animation</a>), programming (<a rel="nofollow" href="https://www.r-bloggers.com/search/RStudio" title="RStudio IDE for R">RStudio</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/sweave" title="Sweave and literate programming">Sweave</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX" title="LaTeX in R">LaTeX</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/SQL" title="SQL and databases">SQL</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/eclipse" title="Eclipse IDE for R">Eclipse</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/git" title="git and github, Version Control System">git</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/hadoop" title="Large data in R using Hadoop">hadoop</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping" title="Web Scraping of google, facebook, yahoo, twitter and more using R">Web Scraping</a>) statistics (<a rel="nofollow" href="https://www.r-bloggers.com/search/regression" title="Regressions and ANOVA analysis tutorials">regression</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/PCA" title="principal component analysis tutorial">PCA</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/time+series" title="Time series">time series</a>, <a rel="nofollow" href="https://www.r-bloggers.com/search/trading" title="finance trading">trading</a>) and more...
<img width="1" alt="" src="http://feeds.feedburner.com/~r/RBloggers/~4/Ds2BT7zqoW8" height="1"></a></div>