<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/custom-javascript-css-and-html-in-shiny/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.listendata.com/2018/12/javascript-shiny-r.html"> ListenData</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<div dir="ltr">
<div dir="ltr">In this tutorial, I will cover how to include custom JavaScript, CSS and HTML code in your R shiny app. By including them, you can make a very powerful professional web app using R.
<p><b><span>First let’s understand basics of a Webpage</span></b></p>
<p>In general, web page contains the following section of details.</p>
<ol>
<li>Content (Header, Paragraph, Footer, Listing)</li>
<li>Font style, color, background, border</li>
<li>Images and Videos</li>
<li>Popups, widgets, special effects etc.</li>
</ol>
<div>
<div></div>
<div><b><span>HTML, CSS and JavaScript</span></b></div>
<div></div>
<div>These 3 web programming languages in conjunction  take care of all the information webpage contains (from text to adding special effects).</div>
<div>
<ol>
<li><b><span>HTML </span>determines the content and structure of a page (header, paragraph, footer etc.)</b></li>
<li><b><span>CSS </span>controls how webpage would look like (color, font type, border etc.)</b></li>
<li><b><span>JavaScript </span>decides advanced behaviors such as pop-up, animation etc.</b></li>
</ol>
</div>
</div>
<table cellspacing="0" align="center" cellpadding="0">
<tbody>
<tr>
<td><a rel="nofollow" href="https://i2.wp.com/3.bp.blogspot.com/-7pXla4gYcSU/XB-aQElY_zI/AAAAAAAAHTA/soP-84BDatwdPyeo3jrwtQxQAvzbQIbUgCLcBGAs/s1600/js_css_html.png?ssl=1" target="_blank"><img border="0" src="https://i2.wp.com/3.bp.blogspot.com/-7pXla4gYcSU/XB-aQElY_zI/AAAAAAAAHTA/soP-84BDatwdPyeo3jrwtQxQAvzbQIbUgCLcBGAs/s1600/js_css_html.png?resize=386%2C203&ssl=1" data-original-width="386" alt="Make JavaScript, CSS work for Shiny" data-original-height="203" title="" data-recalc-dims="1"></a></td>
</tr>
<tr>
<td>Fundamentals of Webpage</td>
</tr>
</tbody>
</table>
<blockquote><p>One of the most common web development term you should know : <b>rendering</b>. It is the act of putting together a web page for presentation.</p></blockquote>
<p><b><span>Shiny Dashboard Syntax</span></b></p>
<p>In this section, I am using syntax of shinydashboard library. The structure of shinydashboard syntax is similar to shiny library. Both requires <code>ui</code> and <code>server </code>components. However, functions are totally different. Refer the code below. Make sure to install library before using the following program.</p>
<pre># Load Library<br>library(shinydashboard)<br><br># User Interface<br>ui = <br>  dashboardPage(<br>    dashboardHeader(title = &quot;Blank Shiny App&quot;),<br>    dashboardSidebar(),<br>    dashboardBody() <br>    )<br><br># Server<br>server = function(input, output) { }<br><br># Run App<br>runApp(list(ui = ui, server = server), launch.browser =T)<br></pre>
<p><b><span>Example : Create Animation Effect</span></b></p>
<p>The program below generates animation in the web page. To test it, you can check out this <b><a rel="nofollow" href="https://codepen.io/anon/pen/vvmmJM" target="_blank">link</a>.</b> When user hits <b>“Click Me”</b> button, it will trigger <b>demojs() JavaScript</b> which will initiate animation. It’s a very basic animation. You can edit the code and make it as complex as you want.</p>
<div>
<div>
<h2>HTML</h2>
<p></div></div></div></div>