<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/building-shiny-app-exercises-part-8/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2017/03/24/building-shiny-app-exercises-part-8/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-8"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><a target="_blank" rel="nofollow" href="http://r-exercises.com/wp-content/uploads/2017/02/screenshot-127.0.0.1-6525-2017-02-06-21-12-26.png?x61433"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-4466" src="https://i2.wp.com/r-exercises.com/wp-content/uploads/2017/02/screenshot-127.0.0.1-6525-2017-02-06-21-12-26-150x150.png?resize=150%2C150" data-recalc-dims="1"></a></p>
<p><strong>Transform your App into Dashboard</strong></p>
<p>Now that we covered the basic staff that you need to know in order to build your App it is time to enhance its appearance and its functionality. The interface is very important fot the user as it must not only be friendly but also easy to use.</p>
<p>At this part we will transform your Shiny App into a beautiful Shiny Dashboard. Firstly we will create the interface and then step by step we will “move” the App you built in the previous parts into this. In part 8 we will move the app step by step into your dashboard and in the last two parts we will enhance its appearance even more and of course deploy it.</p>
<p>Read the examples below to understand the logic of what we are going to do and then test yous skills with the exercise set we prepared for you. Lets begin!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/03/24/building-shiny-app-solutions-part-8/">here</a>.</p>
<p><strong>INSTALLATION</strong></p>
<p>The packages that we are going to use is <code>shinydashboard</code> and <code>shiny </code>. To install, run:</p>
<p><code>install.packages(&quot;shinydashboard&quot;)<br>
install.packages(&quot;shiny&quot;)</code></p>
<div>
<aside><img src="http://r-exercises.com/2017/03/24/building-shiny-app-exercises-part-8/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-8"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a target="_blank" rel="nofollow" href="http://r-exercises.com/product/r-shiny-interactive-web-apps/">R Shiny Interactive Web Apps – Next Level Data Visualization</a>. In this course you will learn how to create advanced Shiny web apps; embed video, pdfs and images; add focus and zooming tools; and many other functionalities (30 lectures, 3hrs.).</div>
</div>
<p><strong>Exercise 1</strong></p>
<p>Install the package <code>shinydashboard</code> and the package <code>shiny</code> in your working directory.</p>
<p><strong>BASICS</strong></p>
<p>A dashboard has three parts: a header, a sidebar, and a body. Here’s the most minimal possible UI for a dashboard page.</p>
<p>## ui.R ##<br>
<code>library(shinydashboard)
<p>dashboardPage(<br>
dashboardHeader(),<br>
dashboardSidebar(),<br>
dashboardBody()<br>
)</p>
<p><strong>Exercise 2</strong></p>
<p>Add a <code>dashboardPage</code> and then Header, Sidebar and Body into your UI. HINT: Use <code>dashboardPage</code>, <code>dashboardHeader</code>, <code>dashboardSidebar</code>, <code>dashboardBody</code>.</p>
<p>First of all we should name it with <code>title</code> like below:<br>
## ui.R ##<br>
<code>library(shinydashboard)
<p>dashboardPage(<br>
dashboardHeader(title=&quot;Dashboard),<br>
dashboardSidebar(),<br>
dashboardBody()<br>
)</p>
<p><strong>Exercise 3</strong></p>
<p>Name your dashboard “Shiny App”. HINT: Use <code>title</code>.</p>
<p>Next, we can add content to the <code>sidebar</code>. For this example we’ll add menu items that behave like tabs. These function similarly to Shiny’s <code>tabPanels</code>: when you click on one menu item, it shows a different set of content in the main body.</p>
<p>There are two parts that need to be done. First, you need to add <code>menuItems</code> to the sidebar, with appropriate <code>tabNames</code>.<br>
## Sidebar content<br>
<code>dashboardSidebar(<br>
    sidebarMenu(<br>
      menuItem(&quot;Dashboard&quot;, tabName = &quot;dashboard&quot;, icon = icon(&quot;dashboard&quot;)),<br>
      menuItem(&quot;Widgets&quot;, tabName = &quot;widgets&quot;, icon = icon(&quot;th&quot;))<br>
    )<br>
  )</code></p>
<p><strong>Exercise 4</strong></p>
<p>Create three <code>menuItem</code>, name them “DATA TABLE”, “SUMMARY” and “K-MEANS” respectively. Make sure to use distict <code>tabName</code> for each one of them. The <code>icon</code> is of your choise. HINT: Use <code>menuItem</code>, <code>tabName</code> and <code>icon</code>.</p>
<p>In the body, add <code>tabItems</code> with corresponding values for <code>tabName</code>:<br>
## Body content<br>
<code>dashboardBody(<br>
    tabItems(<br>
      tabItem(tabName = &quot;dashboard&quot;,<br>
              h2(&quot;Dashboard&quot;),<br>
              fluidRow(<br>
                box()<br>
              )<br>
              ),<br>
      tabItem(tabName = &quot;widgets&quot;,<br>
              h2(&quot;WIDGETS&quot;)<br>
      ),<br>
  )<br>
)</code></p>
<p><strong>Exercise 5</strong></p>
<p>Add <code>tabItems</code> in <code>dashboardBody</code>. Be sure to give the same <code>tabName</code> to each one to get them linked with your <code>menuItem</code>. HINT: Use <code>tabItems</code>, <code>tabItem</code>, <code>h2</code>.</p>
<p>Obviously, this dashboard isn’t very useful. We’ll need to add components that actually do something. In the body we can add boxes that have content.</p>
<p>Firstly let’s create a <code>box</code> for our <code>dataTable</code> in the <code>tabItem</code> with <code>tabName</code> “dt”.<br>
## Body content<br>
<code>dashboardBody(<br>
    tabItems(<br>
      tabItem(tabName = &quot;dashboard&quot;,<br>
              h2(&quot;Dashboard&quot;),<br>
              fluidRow(<br>
                box()<br>
              )<br>
              ),<br>
      tabItem(tabName = &quot;widgets&quot;,<br>
              h2(&quot;WIDGETS&quot;)<br>
      ),<br>
  )<br>
)</code></p>
<p><strong>Exercise 6</strong></p>
<p>Specify the <code>fluidrow</code> and create a <code>box</code> inside the “DATA TABLE” <code>tabItem</code>. HINT: Use <code>fluidrow</code> and <code>box</code>.</p>
<p><strong>Exercise 7</strong></p>
<p>Do the same for the other two <code>tabItem</code>. Create one <code>fluidrow</code> and one <code>box</code> in the “SUMMARY” and another <code>fluidrow</code> with four <code>box</code>in the “K-MEANS”.</p>
<p>Now just copy and paste the code below, which you used in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/02/19/building-shiny-app-exercises-part-7/">part 7</a> to move your <code>dataTable</code> inside the “DATA TABLE” <code>tabItem</code>.<br>
#ui.R<br>
<code>dataTableOutput(&quot;Table&quot;),width = 400<br>
#server.R<br>
output$Table &lt;- renderDataTable(<br>
    iris,options = list(<br>
      lengthMenu = list(c(10, 20, 30,-1),c('10','20','30','ALL')),<br>
      pageLength = 10))</code></p>
<p><strong>Exercise 8</strong></p>
<p>Place the sample code above in the right place in order to add the <code>dataTable</code> “Table” inside the “DATA TABLE” <code>tabItem</code>.</p>
<p>Now just copy and paste the code below, which you used in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/02/19/building-shiny-app-exercises-part-7/">part 7</a> to move the <code>dataTable</code> “Table2” inside the “SUMMARY” <code>tabItem</code>.<br>
#ui.R<br>
<code>dataTableOutput(&quot;Table2&quot;),width = 400
<p>#server.R<br>
sumiris&lt;-as.data.frame.array(summary(iris))<br>
output$Table2 &lt;- renderDataTable(sumiris)</p>
<p><strong>Exercise 9</strong></p>
<p>Place the sample code above in the right place in order to add the <code>dataTable</code> “Table2” inside the “SUMMARY” <code>tabItem</code>.</p>
<p>Do the same for the last exercise as you just have to put the code from <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/02/19/building-shiny-app-exercises-part-7/">part 7</a> inside the “K-MEANS” tabItem.</p>
<p><strong>Exercise 10</strong></p>
<p>Place the K-Means <code>plot</code> and the three widgets from <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/02/19/building-shiny-app-exercises-part-7/">part 7</a> inside the four <code>box</code> you created before.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a title="Building Shiny App exercises part 1" target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">Building Shiny App exercises part 1 </a></li>
<li><a title="Building Shiny App exercises part 2" target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/18/building-shiny-app-exercises-part-2/">Building Shiny App exercises part 2 </a></li>
<li><a title="Building Shiny App exercises part 3" target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/25/building-shiny-app-exercises-part-3/">Building Shiny App exercises part 3 </a></li>
<li><a target="_blank" rel="nofollow" href="http://r-exercises.com/start-here-to-learn-r/">Explore all our (>1000) R exercises</a></li>
<li><a target="_blank" rel="nofollow" href="http://r-exercises.com/r-courses/">Find an R course using our R Course Finder</a> directory</li>
</ol>
</div>

<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://r-exercises.com/2017/03/24/building-shiny-app-exercises-part-8/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-8"> R-exercises</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/CbGqSKZEjUI"></a></div></code></code></code>