<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/shiny-application-layouts-exercises-part-8/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://www.r-exercises.com/2017/05/13/shiny-application-layouts-exercises-part-8/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-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="https://i2.wp.com/www.r-exercises.com/wp-content/uploads/2017/04/unnamed-chunk-2-5.png"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-5236" src="https://i0.wp.com/www.r-exercises.com/wp-content/uploads/2017/04/unnamed-chunk-2-5-150x150.png?resize=150%2C150" data-recalc-dims="1"></a><strong>Shiny Application Layouts – Dynamic UI</strong></p>
<p>In the eightth part of our series we will see how we can build a user interface with dynamically generated components.</p>
<p>The UI components are generated on the server side with the use of <code>renderUI()</code> and are displayed with <code>uiOutput()</code> on the ui side. Every time a new command is sent by the user, it replaces the previous command.</p>
<p>This part can be useful for you in two ways. </p>
<p>First of all, you can see different ways to enhance the appearance and the utility of your shiny app. </p>
<p>Secondly you can make a revision on what you learnt in <a target="_blank" rel="nofollow" href="http://www.r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">“Building Shiny App”</a> series as we will build basic shiny staff in order to present it in the proper way.</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/05/13/shiny-applications-layouts-solutions-part-8/">here</a>.</p>
<p><strong>Application Context</strong>t</p>
<p>First of all let’s build the skeleton of our app like the example below.<br>
#ui.R<br>
<code>fluidPage(<br>
  titlePanel(&quot;Title&quot;),<br>
  fluidRow(
<p> column(4,wellPanel()),<br>
column(4,wellPanel()),<br>
column(4,wellPanel())))<br>
#server.R<br>
<code>function(input, output) {}</code></p>
<p><strong>Exercise 1</strong></p>
<p>Create the initial fluid Page with a title. <strong>HINT</strong>: Use <code>fluidPage()</code> and <code>titlePanel()</code>.</p>
<p><strong>Exercise 2</strong></p>
<p>Create a row, separate it with columns of size = 3 and add a well Panel in each one of them. <strong>HINT</strong>: Use <code>fluidRow()</code>, <code>column()</code> and <code>wellPanel()</code>.</p>
<p>Below is an example of a <code>selectInput()</code> from which the user is going to choose the dynamic component he wants.<br>
#ui.r<br>
<code>selectInput(&quot;input_type&quot;, &quot;Input type&quot;,<br>
                  c(&quot;slider&quot;, &quot;text&quot;, &quot;numeric&quot;, &quot;checkbox&quot;,<br>
                    &quot;checkboxGroup&quot;, &quot;radioButtons&quot;, &quot;selectInput&quot;,<br>
                    &quot;selectInput (multi)&quot;, &quot;date&quot;, &quot;daterange&quot;<br>
                  )<br>
      )</code></p>
<p><strong>Exercise 3</strong></p>
<p>Add a <code>selectInput()</code> in the first well Panel with: slider input, text input, numeric input, check box, radio buttons and date.</p>
<p>The <code>uiOutput()</code> generates the dynamic UI component.<br>
#ui.R<br>
<code>uiOutput(&quot;ui&quot;)</code></p>
<p><strong>Exercise 4</strong></p>
<p>In the second well Panel add the function that is going to generate your ui output.</p>
<p>In the third well Panel we are going to create two “boxes”. The first one will display the type of the input that the user chooses every time while the second the value of this input.<br>
Both of them will be displayed as text. So we have to use <code>verbatimTextOutput()</code> and use <code>tags</code> for the titles. Look at the ui side example below:<br>
#ui.R<br>
<code>tags$p(&quot;Title 1:&quot;),<br>
      verbatimTextOutput(&quot;input_title_1&quot;),<br>
      tags$p(&quot;Title 2:&quot;),<br>
      verbatimTextOutput(&quot;input_title_2&quot;)</code></p>
<div>
<aside><img src="http://www.r-exercises.com/2017/05/13/shiny-application-layouts-exercises-part-8/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-exercises-part-8"></aside>
<div><strong>Learn more</strong> about Shiny in the online course <a target="_blank" rel="nofollow" href="http://www.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 5</strong></p>
<p>In the third well panel should automatically be typed the type of the input of your choice as long as the value of this input. Create only the ui side. <strong>HINT</strong>: Use <code>verbatimTextOutput()</code>.</p>
<p><strong>Exercise 6</strong></p>
<p>Name the two components that you just created. <strong>HINT</strong>: Use <code>tags</code>.</p>
<p><strong>Reactivity</strong></p>
<p>Now let’s go to the server side to make things reactive like this:<br>
#server.R<br>
<code>output$ui &lt;- renderUI({})</code></p>
<p><strong>Exercise 7</strong></p>
<p>Put your app in a reactive context. <strong>HINT</strong>: Use <code>renderUI()</code>.</p>
<p>Now we have to connect the dynamic components we created in <strong>Exercise 3</strong> with their server side. Below is an example:<br>
#server.R<br>
<code>&quot;slider&quot; = sliderInput(&quot;dynamic&quot;, &quot;Dynamic&quot;,<br>
                                min = 1, max = 100, value = 50),<br>
         &quot;text&quot; = textInput(&quot;dynamic&quot;, &quot;Dynamic&quot;,<br>
                            value = &quot;EXAMPLE&quot;),<br>
         &quot;numeric&quot; =  numericInput(&quot;dynamic&quot;, &quot;Dynamic&quot;,<br>
                                   value = 10),<br>
         &quot;checkbox&quot; = checkboxInput(&quot;dynamic&quot;, &quot;Dynamic&quot;,<br>
                                    value = TRUE),<br>
         &quot;radioButtons&quot; = radioButtons(&quot;dynamic&quot;, &quot;Dynamic&quot;,<br>
                                       choices = c(&quot;Option 1&quot; = &quot;option1&quot;,<br>
                                                   &quot;Option 2&quot; = &quot;option2&quot;),<br>
                                       selected = &quot;option1&quot;<br>
         ),<br>
         &quot;date&quot; = dateInput(&quot;dynamic&quot;, &quot;Dynamic&quot;))</code></p>
<p><strong>Exercise 8</strong></p>
<p>Create the server side of the dynamic components you created in <strong>Exercise 3</strong>. Put values of your choise but make sure they are connected with the ui side.</p>
<p><strong>Exercise 9</strong></p>
<p>Display the name of the dynamic component of your choice. <strong>HINT</strong>: Use <code>renderText()</code>.</p>
<p><strong>Exercise 10</strong></p>
<p>Display the value of the dynamic component that you chose. <strong>HINT</strong>: Use <code>renderPrint()</code>.</p>
<div>
<h3>Related exercise sets:</h3>
<ol>
<li><a title="Building Shiny App exercises part 4" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/">Building Shiny App exercises part 4 </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 title="Shiny Application Layouts Exercises (Part-2)" target="_blank" rel="nofollow" href="http://www.r-exercises.com/2017/04/26/shiny-application-layout-exercises-part-2/">Shiny Application Layouts Exercises (Part-2) </a></li>
<li><a target="_blank" rel="nofollow" href="http://www.r-exercises.com/start-here-to-learn-r/">Explore all our (>1000) R exercises</a></li>
<li><a target="_blank" rel="nofollow" href="http://www.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/05/13/shiny-application-layouts-exercises-part-8/?utm_source=rss&utm_medium=rss&utm_campaign=shiny-application-layouts-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/vfzQuvpegKM"></a></div></code>