<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-9/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2017/04/01/building-shiny-app-exercises-part-9/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-9"> 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/01/shiny-1.png?x61433"><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 Overview</strong></p>
<p>In this part we will “dig deeper” to discover the amazing capabilities that a Shiny Dasboard provides.<br>
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/01/building-shiny-app-solutions-part-9/">here</a>.</p>
<p>The <code>dashboardPage</code> function expects three components: a header, sidebar, and body:<br>
#ui.R<br>
<code>dashboardPage(<br>
  dashboardHeader(),<br>
  dashboardSidebar(),<br>
  dashboardBody()<br>
)</code></p>
<p>For more complicated apps, splitting app into pieces can make it more readable:</p>
<p><code>header &lt;- dashboardHeader()
<p>sidebar &lt;- dashboardSidebar()</p>
<p>body &lt;- dashboardBody()</p>
<p>dashboardPage(header, sidebar, body)</p>
<p>Now we’ll look at each of the three main components of a <code>shinydashboard</code>.</p>
<p><strong>HEADER</strong></p>
<p>A header can have a <code>title</code> and dropdown menus. The dropdown menus are generated by the <code>dropdownMenu</code> function. There are three types of menus – messages, notifications, and tasks – and each one must be populated with a corresponding type of item.</p>
<p><strong>Message menus</strong></p>
<p>A <code>messageItem</code> contained in a message menu needs values for <code>from</code> and <code>message</code>. You can also control the <code>icon</code> and a notification time string. By default, the icon is a silhouette of a person. The time string can be any text. For example, it could be a relative date/time like “5 minutes”, “today”, or “12:30pm yesterday”, or an absolute time, like “2014-12-01 13:45”.<br>
#ui.R<br>
<code>dropdownMenu(type = &quot;messages&quot;,<br>
  messageItem(<br>
    from = &quot;Sales Dept&quot;,<br>
    message = &quot;Sales are steady this month.&quot;<br>
  ),<br>
  messageItem(<br>
    from = &quot;New User&quot;,<br>
    message = &quot;How do I register?&quot;,<br>
    icon = icon(&quot;question&quot;),<br>
    time = &quot;13:45&quot;<br>
  ),<br>
  messageItem(<br>
    from = &quot;Support&quot;,<br>
    message = &quot;The new server is ready.&quot;,<br>
    icon = icon(&quot;life-ring&quot;),<br>
    time = &quot;2014-12-01&quot;<br>
  )<br>
)</code></p>
<p><strong>Exercise 1</strong></p>
<p>Create a <code>dropdownMenu</code> in your <code>dashboardHeader</code> as the example above. Put date, time and generally text of your choice.</p>
<p><strong>Dynamic content</strong></p>
<p>In most cases, you’ll want to make the content dynamic. That means that the HTML content is generated on the server side and sent to the client for rendering. In the UI code, you’d use <code>dropdownMenuOutput</code> like this:</p>
<p><code>dashboardHeader(dropdownMenuOutput(&quot;messageMenu&quot;))</code></p>
<p><strong>Exercise 2</strong></p>
<p>Replace <code>dropdownMenu</code> with <code>dropdownMenuOutput</code> and the three <code>messageItem</code> with <code>messageMenu</code>.</p>
<p>The next step is to create some messages for this example.The code below does this work for us.<br>
# Example message data in a data frame<br>
<code>messageData &lt;- data.frame(<br>
  from = c(&quot;Admininstrator&quot;, &quot;New User&quot;, &quot;Support&quot;),<br>
  message = c(<br>
    &quot;Sales are steady this month.&quot;,<br>
    &quot;How do I register?&quot;,<br>
    &quot;The new server is ready.&quot;<br>
  ),<br>
  stringsAsFactors = FALSE<br>
)</code></p>
<p><strong>Exercise 3</strong></p>
<p>Put <code>messageData</code> inside your <code>server.r</code> but outside of the <code>shinyServer</code> function.</p>
<p>And on the server side, you’d generate the entire menu in a <code>renderMenu</code>, like this:<br>
<code>output$messageMenu &lt;- renderMenu({<br>
    # Code to generate each of the messageItems here, in a list. messageData<br>
    # is a data frame with two columns, 'from' and 'message'.<br>
    # Also add on slider value to the message content, so that messages update.<br>
    msgs &lt;- apply(messageData, 1, function(row) {<br>
      messageItem(<br>
        from = row[[&quot;from&quot;]],<br>
        message = paste(row[[&quot;message&quot;]], input$slider)<br>
      )<br>
    })
<p> dropdownMenu(type = &quot;messages&quot;, .list = msgs)<br>
})</p>
<p><strong>Exercise 4</strong></p>
<p>Put the code above(<code>output$messageMenu</code>) in the <code>shinyServer</code> of <code>server.R</code>.</p>
<p>Hopefully you have understood by now the logic behind the dynamic content of your Menu. Now let’s return to the static one in order to describe it a little bit more. So make the proper changes to your code in order to return exactly to the point we were after exercise 1.</p>
<p><strong>Notification menus</strong></p>
<p>A <code>notificationItem </code>contained in a notification contains a text notification. You can also control the <code>icon</code> and the <code>status</code> color. The code below gives an example.<br>
#ui.r<br>
<code>dropdownMenu(type = &quot;notifications&quot;,<br>
  notificationItem(<br>
    text = &quot;20 new users today&quot;,<br>
    icon(&quot;users&quot;)<br>
  ),<br>
  notificationItem(<br>
    text = &quot;14 items delivered&quot;,<br>
    icon(&quot;truck&quot;),<br>
    status = &quot;success&quot;<br>
  ),<br>
  notificationItem(<br>
    text = &quot;Server load at 84%&quot;,<br>
    icon = icon(&quot;exclamation-triangle&quot;),<br>
    status = &quot;warning&quot;<br>
  )<br>
)</code></p>
<p><strong>Exercise 5</strong></p>
<p>Create a <code>dropdownMenu</code> for your notifications like the example. Use text of your choice. Be careful of the <code>type</code> and the <code>notificationItem</code>.</p>
<p><strong>Task menus</strong></p>
<p>Task items have a progress bar and a text label. You can also specify the color of the bar. Valid colors are listed in <code>?validColors</code>. Take a look at the example below.<br>
#ui.r<br>
<code>dropdownMenu(type = &quot;tasks&quot;, badgeStatus = &quot;success&quot;,<br>
  taskItem(value = 90, color = &quot;green&quot;,<br>
    &quot;Documentation&quot;<br>
  ),<br>
  taskItem(value = 17, color = &quot;aqua&quot;,<br>
    &quot;Project X&quot;<br>
  ),<br>
  taskItem(value = 75, color = &quot;yellow&quot;,<br>
    &quot;Server deployment&quot;<br>
  ),<br>
  taskItem(value = 80, color = &quot;red&quot;,<br>
    &quot;Overall project&quot;<br>
  )<br>
)</code></p>
<p><strong>Exercise 6</strong></p>
<p>Create a <code>dropdownMenu</code> for your tasks like the example above. Use text of your choice and create as many <code>taskItem</code> as you want. Be carefull of the <code>type</code> and the <code>taskItem</code>.</p>
<p><strong>Disabling the header</strong></p>
<p>If you don’t want to show a header bar, you can disable it with:</p>
<p><code>dashboardHeader(disable = TRUE)</code></p>
<p><strong>Exercise 7</strong></p>
<p>Disable the header.</p>
<p>Now enable it again.</p>
<p><strong>Body</strong></p>
<p>The body of a dashboard page can contain any regular Shiny content. However, if you’re creating a dashboard you’ll likely want to make something that’s more structured. The basic building block of most dashboards is a <code>box</code>. Boxes in turn can contain any content.</p>
<p><strong>Boxes</strong></p>
<p>Boxes are the main building blocks of dashboard pages. A basic box can be created with the <code>box</code> function, and the contents of the <code>box</code> can be (most) any Shiny UI content. We have already created some boxes in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/03/24/building-shiny-app-exercises-part-8/">part 8</a> so lets enhance theis appearance a little bit.<br>
Boxes can have titles and header bar colors with the <code>title</code> and <code>status</code> options. Look at the examples below.</p>
<p><code>box(title = &quot;Histogram&quot;, status = &quot;primary&quot;,solidHeader = TRUE, plotOutput(&quot;plot2&quot;, height = 250)),
<p>box(<br>
title = &quot;Inputs&quot;, status = &quot;warning&quot;,<br>
&quot;Box content here&quot;, br(), &quot;More box content&quot;,<br>
sliderInput(&quot;slider&quot;, &quot;Slider input:&quot;, 1, 100, 50),<br>
textInput(&quot;text&quot;, &quot;Text input:&quot;)<br>
)</p>
<p><strong>Exercise 8</strong></p>
<p>Give a title of your choice to all the <code>box</code> you have created in your dashboard except of the three widgets’ <code>box</code>.</p>
<p><strong>Exercise 9</strong></p>
<p>Change the status of the first three <code>box</code> to “primary” and the last three to “warning”.</p>
<p><strong>Exercise 10</strong></p>
<p>Transform the headers of your first three <code>box</code> to solid headers.</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 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 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 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/04/01/building-shiny-app-exercises-part-9/?utm_source=rss&utm_medium=rss&utm_campaign=building-shiny-app-exercises-part-9"> 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/ERbLQftMow8"></a></div></code></code></code>