<p><div><div><div><div data-width="100" data-show-faces="false" data-send="true" data-layout="button_count" data-height="21" data-href="https://www.r-bloggers.com/customising-shiny-server-html-pages/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.mango-solutions.com/wp/2017/03/customising-shiny-server-html-pages/"> Mango Solutions » R Blog</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<div>Mark Sellors<br>
Head of Data Engineering</div>
<p>At Mango we work with a great many clients using the <a target="_blank" rel="nofollow" href="https://shiny.rstudio.com/">Shiny</a> framework for R. Many of those use <a target="_blank" rel="nofollow" href="https://www.rstudio.com/products/shiny/shiny-server/">Shiny Server</a> or Shiny Server Pro to publish their shiny apps within their organisations. Shiny Server Pro in particular is a great product, but some of the stock html pages are a little plain, so I asked the good folks at RStudio if it was possible to customise them to match corporate themes and so on. It turns out that it’s a documented feature that’s been available for around 3 years now!</p>
<p><a target="_blank" rel="nofollow" href="https://i0.wp.com/www.mango-solutions.com/wp/wp-content/uploads/2017/03/customising-shiny-server-login-original.png"><img alt="customising-shiny-server-login-original" class="wp-image-6770" src="https://i2.wp.com/www.mango-solutions.com/wp/wp-content/uploads/2017/03/customising-shiny-server-login-original-1024x485.png?w=450" data-recalc-dims="1"></a><em>The stock Shiny Server Pro login screen</em></p>
<p>If you want to try this yourself, check out the &lt;a href=”http://docs.rstudio.com/shiny-server/#custom-templates”>Shiny Server Admin Guide&lt;/a>, but it’s pretty simple to do. My main point of interest in this is to customise the Shiny Server Pro login screen, but you can customise several other pages too. Though it’s worth noting that if you create a custom 404, it will not be available from within an application, only in places where it would be rendered by Shiny Server rather than by Shiny itself.</p>
<p>To get a feel for how this works, I asked Mango’s resident web dev, Ben, to rustle me up a quick login page for a fake company and I then set about customising that to fit the required format. The finished article can be seen below and we hope you’ll agree, it’s a marked improvement on the stock one. (Eagle eyed readers and sci-fi/film-buffs will hopefully recognise the <a target="_blank" rel="nofollow" href="https://en.wikipedia.org/wiki/RoboCop_(franchise)#Omni_Consumer_Products">OCP</a> logo!)</p>
<p><a target="_blank" rel="nofollow" href="https://i1.wp.com/www.mango-solutions.com/wp/wp-content/uploads/2017/03/customising-shiny-server-login-custom.png"><img alt="customising-shiny-server-login-custom" class="wp-image-6769" src="https://i1.wp.com/www.mango-solutions.com/wp/wp-content/uploads/2017/03/customising-shiny-server-login-custom-1024x490.png?w=450" data-recalc-dims="1"></a><em>Our new, customised Shiny Server Pro login screen</em></p>
<p>This new login screen works exactly like the original and is configured for a single app only on the server, rather than all apps. We do have an additional “Forgot” button, that could be used to direct users to a support portal or to mail an administrator or similar.</p>
<p>Customisations are very simple, and use the reasonably common handlebars/mustache format. A snippet of our custom page is below. Values placed within handlebars, like `{{value}}`, are actually variables that Shiny Server will replace with the correct info when it renders the page. I stripped out some stuff from the original template that we didn’t need, like some logic to use if the server is using different authentication mechanisms to keep things simple.</p>
<p><code><br>
&lt;form action=&quot;{{url}}&quot; method=&quot;POST&quot;><br>
    &lt;input id=&quot;successUrl&quot; name=&quot;success_url&quot; type=&quot;hidden&quot; value=&quot;{{success_url}}&quot; /><br>
    &lt;input id=&quot;username&quot; name=&quot;username&quot; required=&quot;required&quot; type=&quot;text&quot; value=&quot;{{username}}&quot; /><br>
    &lt;input id=&quot;password&quot; name=&quot;password&quot; required=&quot;required&quot; type=&quot;password&quot; value=&quot;Password&quot; /><br>
    &lt;button><br>
        &lt;i class=&quot;fa fa-question-circle&quot;>&lt;/i> Forgot<br>
    &lt;/button><br>
    &lt;button type=&quot;submit&quot;><br>
        &lt;i class=&quot;fa fa-sign-in&quot;>&lt;/i> Login<br>
    &lt;/button><br>
&lt;/form><br>
</code></p>
<p>Hopefully this post has inspired you to check out this feature. It’s an excellent way to provide custom corporate branding, especially as it can be applied on an app-by-app basis. It’s worth knowing that this feature is not yet available in RStudio Connect, but hopefully it will arrive in a future update. If you do create any customisations of your own be sure to let us know! You’ll find us on twitter <a target="_blank" rel="nofollow" href="https://twitter.com/mangothecat">@MangoTheCat</a>.</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="http://www.mango-solutions.com/wp/2017/03/customising-shiny-server-html-pages/"> Mango Solutions » 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 title="The R Project for Statistical Computing" rel="nofollow" href="https://www.r-project.org/">R</a> news and <a title="R tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/tutorial">tutorials</a> on topics such as: <a title="Data science" rel="nofollow" href="https://www.r-bloggers.com/search/data%20science">Data science</a>, <a title="Big Data" rel="nofollow" href="https://www.r-bloggers.com/search/Big%20Data">Big Data, <a title="R jobs" rel="nofollow" href="https://www.r-users.com/">R jobs</a>, visualization (<a title="ggplot and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/ggplot2">ggplot2</a>, <a title="Boxplots using lattice and ggplot2 tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/boxplot">Boxplots</a>, <a title="Maps and gis" rel="nofollow" href="https://www.r-bloggers.com/search/map">maps</a>, <a title="Animation in R" rel="nofollow" href="https://www.r-bloggers.com/search/animation">animation</a>), programming (<a title="RStudio IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/RStudio">RStudio</a>, <a title="Sweave and literate programming" rel="nofollow" href="https://www.r-bloggers.com/search/sweave">Sweave</a>, <a title="LaTeX in R" rel="nofollow" href="https://www.r-bloggers.com/search/LaTeX">LaTeX</a>, <a title="SQL and databases" rel="nofollow" href="https://www.r-bloggers.com/search/SQL">SQL</a>, <a title="Eclipse IDE for R" rel="nofollow" href="https://www.r-bloggers.com/search/eclipse">Eclipse</a>, <a title="git and github, Version Control System" rel="nofollow" href="https://www.r-bloggers.com/search/git">git</a>, <a title="Large data in R using Hadoop" rel="nofollow" href="https://www.r-bloggers.com/search/hadoop">hadoop</a>, <a title="Web Scraping of google, facebook, yahoo, twitter and more using R" rel="nofollow" href="https://www.r-bloggers.com/search/Web+Scraping">Web Scraping</a>) statistics (<a title="Regressions and ANOVA analysis tutorials" rel="nofollow" href="https://www.r-bloggers.com/search/regression">regression</a>, <a title="principal component analysis tutorial" rel="nofollow" href="https://www.r-bloggers.com/search/PCA">PCA</a>, <a title="Time series" rel="nofollow" href="https://www.r-bloggers.com/search/time+series">time series</a>, <a title="finance trading" rel="nofollow" href="https://www.r-bloggers.com/search/trading">trading</a>) and more...
<img height="1" alt="" width="1" src="http://feeds.feedburner.com/~r/RBloggers/~4/0TXWB91XOmA"></a></div>