<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/step-up-your-dashboard-with-shinydashboard-part-1-exercises/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="https://www.r-exercises.com/2018/09/10/step-up-your-dashboard-with-shinydashboard-part-1-exercises/"> R-exercises</a></strong>, and kindly contributed to <a rel="nofollow" href="https://www.r-bloggers.com/">R-bloggers)</a> </div>
<p><a rel="nofollow" href="https://i0.wp.com/www.r-exercises.com/wp-content/uploads/2018/09/car-dashboard-2667434_1280.jpg?ssl=1" target="_blank"><img sizes="(max-width: 300px) 100vw, 300px" src="https://i2.wp.com/www.r-exercises.com/wp-content/uploads/2018/09/car-dashboard-2667434_1280-300x200.jpg?resize=300%2C200&ssl=1" alt="" width="300" class="wp-image-11905" data-recalc-dims="1" height="200"></a></p>
<p>The shinydashboard package provides a well-designed dashboard theme for Shiny apps and allows for an easy assembly of a dashboard from a couple of basic building blocks. The package is widely used in commercial environments as well, due to its neat features for building convenient and robust layouts.</p>
<p>This exercise set will help you practice all of the main features of this great package. By completing the two parts of the exercise series, you’ll know that you’re ready to start building well-designed Shiny apps. We will make some minimal use of the built-in data-set <code>datasets::CO2</code> (specific description of the data-set is irrelevant, but you can check it out by typing <code>?datasets::CO2</code>). Each exercise is adding some more features/functionalities to the code of the previous exercise, so be sure to not discard the code until after you’re done with all of the exercises. Answers to these exercises are available <a rel="nofollow" href="https://r-exercises.com/2018/09/10/step-up-your-dashboard-with-shinydashboard-solutions-part-1/" target="_blank">here</a>.</p>
<p>In the solutions page, you’ll first find only the relevant components of each exercise. Then, at the end of the page, you will find the entire Shiny app code that contains all of the different components together. It is advised to use the following template to get started with the exercises:<br>
<code><br>
header &lt;- dashboardHeader(...)<br>
sidebar &lt;- dashboardSidebar(...)<br>
body &lt;- dashboardBody(...)<br>
ui &lt;- dashboardPage(...)<br>
server &lt;- function(input, output, session) {}<br>
shinyApp(ui = ui, server = server)<br>
</code></p>
<p>For other parts of the series, follow the tag <a rel="nofollow" href="http://r-exercises.com/tags/shinydashboard" target="_blank">shinydashboard</a>.</p>
<p><strong>Exercise 1</strong><br>
Set the title of the dashboard to be “Practicing shinydashboard.”<br>
The font-family should be “Tahoma” and the font-weight should be “bold.”</p>
<p><strong>Exercise 2</strong><br>
Since the title that we chose is a bit long, set the header and sidebar width to 300 pixels.</p>
<p><strong>Exercise 3</strong><br>
Select a black skin to the dashboard.</p>
<p><strong>Exercise 4</strong><br>
Select a title for the browser tab, which is different than the dashboard title.</p>
<p><strong>Exercise 5</strong><br>
Add two menu items to the sidebar: one named “data” and one named “about.”<br>
Change the font-size of the menu items to 20 pixels.</p>
<p><strong>Exercise 6</strong><br>
Add icons of your choice next to the two menu items that you added.</p>
<p><strong>Exercise 7</strong><br>
Add a yellow badge which says “New” next to the “data” menu item.</p>
<p><strong>Exercise 8</strong><br>
Under the “about” menu item, add two sub-items: one named “licences” and one named “contact us.”</p>
<p><strong>Exercise 9</strong><br>
Add a search box at the top of the sidebar with the label “What are you looking for?”<br>
Hint: use <code>sidebarSearchForm()</code>.</p>
<p><strong>Exercise 10</strong><br>
Add a <code>selectInput</code> under the search box you just added.<br>
The input ID should be <code>plant</code> and the choices should be <code>unique(CO2$Plant)</code>.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a rel="nofollow" href="https://www.r-exercises.com/2017/11/29/spatial-data-analysis-introduction-to-raster-processing-part-1/" title="Spatial Data Analysis: Introduction to Raster Processing (Part 1)" target="_blank">Spatial Data Analysis: Introduction to Raster Processing (Part 1) </a></li>
<li><a rel="nofollow" href="https://www.r-exercises.com/2017/10/21/mathematical-expressions-in-r-plots-tutorial/" title="Mathematical Expressions in R Plots: Tutorial" target="_blank">Mathematical Expressions in R Plots: Tutorial </a></li>
<li><a rel="nofollow" href="https://www.r-exercises.com/2017/08/03/parallel-computing-exercises-snow-and-rmpi-part-3/" title="Parallel Computing Exercises: Snow and Rmpi (Part-3)" target="_blank">Parallel Computing Exercises: Snow and Rmpi (Part-3) </a></li>
<li><a rel="nofollow" href="http://www.r-exercises.com/start-here-to-learn-r/" target="_blank">Explore all our (>1000) R exercises</a></li>
<li><a rel="nofollow" href="http://www.r-exercises.com/r-courses/" target="_blank">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="https://www.r-exercises.com/2018/09/10/step-up-your-dashboard-with-shinydashboard-part-1-exercises/"> 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 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/xp5hzJawsIg" height="1"></a></div>