<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-10/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.r-exercises.com/2017/04/11/building-shiny-app-exercises-part-10/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-10"> 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="https://i0.wp.com/r-exercises.com/wp-content/uploads/2017/01/shiny-1.png"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-4236" src="https://i1.wp.com/r-exercises.com/wp-content/uploads/2017/01/shiny-1-150x150.png?resize=150%2C150" data-recalc-dims="1"></a></p>
<p><strong>SHINY DASHBOARD STRUCTURE &amp; APPEARANCE</strong></p>
<p>Finally we reached in the final part of our series. At this part we will see how to improve the structure and the appearance of our dashboard even more, according to our preferences and of course make it more attractive to the user. Last but not least we will see the simplest and easiest way to 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/04/11/building-shiny-app-solutions-part-10/">here</a>.</p>
<p><strong>infoBox</strong></p>
<p>There is a special kind of box that is used for displaying simple numeric or text values, with an icon.The example code below shows how to generate <code>infoBox</code>. The first row of <code>infoBox</code> uses the default setting of <code>fill=FALSE</code>.</p>
<p>Since the content of an <code>infoBox</code> will usually be dynamic, <code>shinydashboard</code> contains the helper functions <code>infoBoxOutput</code> and <code>renderInfoBox</code> for dynamic content.<br>
#ui.R<br>
<code>library(shinydashboard)
<p>dashboardPage(<br>
dashboardHeader(title = &quot;Info boxes&quot;),<br>
dashboardSidebar(),<br>
dashboardBody(<br>
# infoBoxes with fill=FALSE<br>
fluidRow(<br>
# A static infoBox<br>
infoBox(&quot;New Orders&quot;, 10 * 2, icon = icon(&quot;credit-card&quot;)),<br>
# Dynamic infoBoxes<br>
infoBoxOutput(&quot;progressBox&quot;),<br>
infoBoxOutput(&quot;approvalBox&quot;)<br>
)))<br>
#server.R<br>
<code> shinyServer(function(input, output) {<br>
  output$progressBox &lt;- renderInfoBox({<br>
    infoBox(<br>
      &quot;Progress&quot;, paste0(25 + input$count, &quot;%&quot;), icon = icon(&quot;list&quot;),<br>
      color = &quot;purple&quot;<br>
    )<br>
  })<br>
  output$approvalBox &lt;- renderInfoBox({<br>
    infoBox(<br>
      &quot;Approval&quot;, &quot;80%&quot;, icon = icon(&quot;thumbs-up&quot;, lib = &quot;glyphicon&quot;),<br>
      color = &quot;yellow&quot;<br>
    )<br>
  })<br>
 })</code></p>
<p><strong>Exercise 1</strong></p>
<p>Create three <code>infoBox</code> with information icons and color of your choice and put them in the <code>tabItem</code> “dt” under the “DATA-TABLE”.</p>
<p>To fill them with a color follow the example below:<br>
#ui.R<br>
<code>library(shinydashboard)
<p>dashboardPage(<br>
dashboardHeader(title = &quot;Info boxes&quot;),<br>
dashboardSidebar(),<br>
dashboardBody(<br>
# infoBoxes with fill=FALSE<br>
fluidRow(<br>
# A static infoBox<br>
infoBox(&quot;New Orders&quot;, 10 * 2, icon = icon(&quot;credit-card&quot;),fill = TRUE),<br>
# Dynamic infoBoxes<br>
infoBoxOutput(&quot;progressBox&quot;),<br>
infoBoxOutput(&quot;approvalBox&quot;)<br>
)))<br>
#server.R<br>
shinyServer(function(input, output) {<br>
output$progressBox &lt;- renderInfoBox({<br>
infoBox(<br>
&quot;Progress&quot;, paste0(25 + input$count, &quot;%&quot;), icon = icon(&quot;list&quot;),<br>
color = &quot;purple&quot;,fill = TRUE<br>
)<br>
})<br>
output$approvalBox &lt;- renderInfoBox({<br>
infoBox(<br>
&quot;Approval&quot;, &quot;80%&quot;, icon = icon(&quot;thumbs-up&quot;, lib = &quot;glyphicon&quot;),<br>
color = &quot;yellow&quot;,fill = TRUE<br>
)<br>
})<br>
})</p>
<p><strong>Exercise 2</strong></p>
<p>Fill the <code>infoBox</code> with the <code>color</code> you selected in Exercise 1. HINT: Use <code>fill</code>.</p>
<p><strong>Exercise 3</strong></p>
<p>Now enhance the appearance of your <code>tabItem</code> named “km” by setting <code>height</code> = 450 in the four <code>box</code> you have there.</p>
<p><strong>Skins</strong></p>
<p>There are a number of color themes, or skins. The default is blue, but there are also black, purple, green, red, and yellow. You can choose which theme to use with <code>dashboardPage(skin = &quot;blue&quot;)</code>, <code>dashboardPage(skin = &quot;black&quot;)</code>, and so on.</p>
<p><strong>Exercise 4</strong></p>
<p>Change <code>skin</code> from blue to red.</p>
<p><strong>CSS</strong></p>
<p>You can add custom CSS to your app by adding code in the UI of your app like this:<br>
#ui.R<br>
<code>dashboardPage(<br>
  dashboardHeader(title = &quot;Custom font&quot;),<br>
  dashboardSidebar(),<br>
  dashboardBody(<br>
    tags$head(tags$style(HTML('<br>
      .main-header .logo {<br>
        font-family: &quot;Georgia&quot;, Times, &quot;Times New Roman&quot;, serif;<br>
        font-weight: bold;<br>
        font-size: 24px;<br>
      }<br>
    ')))<br>
  )<br>
)</code></p>
<p><strong>Exercise 5</strong></p>
<p>Change the font of your dashboard title by adding CSS code.</p>
<p><strong>Long titles</strong></p>
<p>In some cases, the title that you wish to use won’t fit in the default width in the header bar. You can make the space for the title wider with the <code>titleWidth</code> option. In this example, we’ve increased the width for the title to 450 pixels.<br>
#ui.R<br>
<code>dashboardPage(<br>
    dashboardHeader(<br>
      title = &quot;Example of a long title that needs more space&quot;,<br>
      titleWidth = 450<br>
    ),<br>
    dashboardSidebar(),<br>
    dashboardBody(
<p> )<br>
)<br>
#server.R<br>
<code>function(input, output) { }</code></p>
<p><strong>Exercise 6</strong></p>
<p>Set your<code> titlewidth</code> to “400” and then set it to the default value again.</p>
<p><strong>Sidebar width</strong></p>
<p>To change the width of the sidebar, you can use the <code>width </code>option. This example has a wider title and sidebar:</p>
<p>#ui.R<br>
<code>library(shinydashboard)</code><br>
<code>dashboardPage(<br>
    dashboardHeader(<br>
      title = &quot;Title and sidebar 350 pixels wide&quot;,<br>
      titleWidth = 350<br>
    ),<br>
    dashboardSidebar(<br>
      width = 350,<br>
      sidebarMenu(<br>
        menuItem(&quot;Menu Item&quot;)<br>
      )<br>
    ),<br>
    dashboardBody()<br>
  )</code><br>
#server.R<br>
<code>function(input, output) { }</code></p>
<p><strong>Exercise 7</strong></p>
<p>Set sidebar <code>width</code> to “400” and then return to the default one.</p>
<p><strong>Icons</strong></p>
<p>Icons are used liberally in <code>shinydashboard</code>. The icons used in <code>shiny</code> and <code>shinydashboard</code> are really just characters from special font sets, and they’re created with Shiny’s <code>icon()</code> function.</p>
<p>To create a calendar icon, you’d call:<br>
<code>icon(&quot;calendar&quot;)</code></p>
<p>The icons are from Font-Awesome and Glyphicons. You can see lists of all available icons here:</p>
<p> <a target="_blank" rel="nofollow" href="http://fontawesome.io/icons/"> http://fontawesome.io/icons/</a><br>
<a target="_blank" rel="nofollow" href="http://getbootstrap.com/components/#glyphicons"> http://getbootstrap.com/components/#glyphicons</a></p>
<p><strong>Exercise 8</strong></p>
<p>Change the<code> icon </code>of the three <code>menuItem</code> of your dashboard. Select whatever you like from the two lists above.</p>
<p><strong>Statuses and colors</strong></p>
<p>Many <code>shinydashboard </code>components have a <code>status</code> or <code>color</code> argument.</p>
<p>The <code>status</code> is a property of some Bootstrap classes. It can have values like <code>status=&quot;primary&quot;</code>, <code>status=&quot;success&quot;</code>, and others. </p>
<p>The <code>color</code> argument is more straightforward. It can have values like <code>color=&quot;red&quot;</code>, <code>color=&quot;black&quot;</code>, and others.</p>
<p>The valid statuses and colors are also listed in <code>?validStatuses</code> and <code>?validColors</code>.</p>
<p><strong>Exercise 9</strong></p>
<p>Change the <code>status</code> of the three widget<code> box</code> in the <code>tabItem</code> named “km” to “info”, “success” and “danger” respectively.</p>
<p><strong>Shinyapps.io</strong></p>
<p>The easiest way to turn your Shiny app into a web page is to use shinyapps.io, RStudio’s hosting service for Shiny apps.</p>
<p><a target="_blank" rel="nofollow" href="https://www.shinyapps.io/">shinyapps.io</a> lets you upload your app straight from your R session to a server hosted by RStudio. You have complete control over your app including server administration tools.</p>
<p>First of all you have to create an account in <a target="_blank" rel="nofollow" href="https://www.shinyapps.io/">shinyapps.io</a>.</p>
<p><strong>Exercise 10</strong></p>
<p>Publish your app through <a target="_blank" rel="nofollow" href="https://www.shinyapps.io/">Shinyapps.io</a></p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a title="Building Shiny App Exercises (part-8)" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/03/24/building-shiny-app-exercises-part-8/">Building Shiny App Exercises (part-8) </a></li>
<li><a title="Building Shiny App exercises part 2" target="_blank" rel="nofollow" href="http://www.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 1" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">Building Shiny App exercises part 1 </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://www.r-exercises.com/2017/04/11/building-shiny-app-exercises-part-10/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-10"> 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/9IgEkn0MCsk"></a></div></code></code></code>