<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-3/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2016/12/25/building-shiny-app-exercises-part-3/"> 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/2016/12/drop-of-water-432542_960_720.jpg?x61433"><img sizes="(max-width: 150px) 100vw, 150px" alt="" class="wp-image-3403" src="https://i2.wp.com/r-exercises.com/wp-content/uploads/2016/12/drop-of-water-432542_960_720-150x150.jpg?resize=150%2C150" data-recalc-dims="1"></a></p>
<p><strong>ADD CONTROL WIDGETS</strong><br>
Welcome to the third part of our series. In this part you will learn how to build and place inside your app the rest of the widgets which were mentioned in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/18/building-shiny-app-exercises-part-2/">part 2</a>.<br>
More specifically we will analyze: 1) <code>helptext</code>, 2) <code>numericInput</code>, 3) <code>radioButtons</code>, 4) <code>selectInput</code>, 5) <code>sliderInput</code> and 6) <code>textInput</code>.<br>
As you already know from <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/18/building-shiny-app-exercises-part-2/">part 2</a> reactivity will be added in the upcoming parts of our series so this is something that you do not have to worry about.<br>
Follow the examples below to understand the logic behind the widgets’ functions and then enhance the app you created in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">part 1</a> by practising with the exercise set we prepared for you.<br>
Firstly, we will add all the kinds of the widgets in our app, for educational reasons and later we will decide which of them is practical to keep.Let’s start!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/25/building-shiny-app-solutions-part-3/">here</a>.</p>
<p>If you obtained a different (correct) answer than those listed on the solutions page, please feel free to post your answer as a comment on that page.</p>
<p>To begin with let’s create the space inside our <code>sidebarPanel</code> in order to put in there the rest of our widgets.</p>
<p><strong>Exercise 1</strong></p>
<p>Use the function <code>fluidrow</code> to make sure that all the elements we are going to use will be in the same line. To do this put <code>fluidrow</code> just under the “Menu” in your sidebarPanel and close its parenthesis just before the <code>submibutton</code> (excluding the two<code> br</code>).</p>
<p><strong>HELP TEXT</strong></p>
<p>In the example below we create a UI with a <code>helpText</code>.<br>
# ui.R<br>
<code>shinyUI(fluidPage(<br>
  titlePanel(&quot;Widgets&quot;),<br>
         h3(&quot;Help Text&quot;),<br>
         helpText(&quot;Text that is used to provide some extra details to the user.&quot;)))</code></p>
<p># server.R<br>
<code>shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 2</strong></p>
<p>Place a <code>helpText</code> exactly under the <code>actionButton</code>, name it “Help Text” and as text add:”For help”. Hint: Use <code>h4</code>.</p>
<p><strong>Exercise 3</strong></p>
<p>Now use <code>column</code> function in order to decide the column width for every row and put the two widgets in the same line. To do this place the <code>column</code> function twice. Firstly place it just before the “Actionbutton” title with width = 6 and close its parenthesis exactly after the <code>label</code> “Perform”. Do the same for the <code>helpInput</code>. Both of the <code>column</code> functions must be inside the same <code>fluidrow</code>.</p>
<p><strong>NUMERIC INPUT</strong></p>
<p>In the example below we create a UI with a <code>numericInput</code>.<br>
# ui.R<br>
<code>shinyUI(fluidPage(<br>
  titlePanel(&quot;Widgets&quot;),<br>
  numericInput(&quot;num&quot;,<br>
               label = h3(&quot;Numeric Input&quot;),<br>
               value = 1)<br>
))</code></p>
<p># server.R<br>
<code>shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 4</strong></p>
<p>Put a <code>numericInput</code> under <code>helpText</code>,in the same row with <code>submitButton</code>. Name it “numer”, give it “Numeric Input” as <code>label</code> and <code>value</code> = 10. Hint: Use <code>h4</code>, <code>fluidrow</code> and <code>column</code>.</p>
<p><strong>RADIO BUTTONS</strong></p>
<p>In the example below we create a UI with a <code>radioButtons</code>.<br>
#ui.R<br>
<code>shinyUI(fluidPage(<br>
  titlePanel(&quot;Widgets&quot;),<br>
  radioButtons(&quot;radio&quot;, label = h3(&quot;Radio buttons&quot;),<br>
               choices = list(&quot;Choice 1&quot; = 1, &quot;Choice 2&quot; = 2,<br>
                              &quot;Choice 3&quot; = 3),selected = 1)<br>
))</code></p>
<p>#server.R<br>
<code>shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 5</strong></p>
<p>Add <code>radioButtons</code> under <code>numericInput</code>, in the same row with <code>checkBoxInput</code>. Name it “radiobuttons”, put as <code>label</code> “Radio Buttons” and give it two choices with no default. Hint: Use<code> h4</code>, <code>fluidrow</code>, <code>column</code> and <code>choices</code>.</p>
<p><strong>Exercise 6</strong></p>
<p>Now put “2” as the default of the choices. Hint: Use <code>selected</code>.</p>
<p><strong>SELECT INPUT</strong></p>
<p>In the example below we create a UI with a <code>selectInput</code>.<br>
# ui.R<br>
<code>shinyUI(fluidPage(<br>
  titlePanel(&quot;Widgets&quot;),<br>
  selectInput(&quot;select&quot;, label = h3(&quot;Select Box&quot;),<br>
              choices = list(&quot;Choice 1&quot; = 1, &quot;Choice 2&quot; = 2,<br>
                             &quot;Choice 3&quot; = 3), selected = 1)<br>
  ))</code></p>
<p>#server.R<br>
<code>shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 7</strong><br>
Place under <code>radiobuttons</code> and in the same row with <code>checkBoxGroupInput</code> a <code>selectinput</code>. Its <code>name</code> should be “select”, its <code>label</code> “Select Box” and you should give it two <code>choices</code> with the second one as default. Hint: Use <code>h4</code>, <code>fluidrow</code>, <code>column</code>, <code>choices</code> and <code>selected</code>.</p>
<p><strong>SLIDER INPUT</strong></p>
<p>In the example below we create a UI with two <code>sliderInput</code>.<br>
# ui.R<br>
<code>shinyUI(fluidPage(<br>
  titlePanel(&quot;Widgets&quot;),<br>
  sliderInput(&quot;slider1&quot;, label = h3(&quot;Sliders&quot;),<br>
              min = 0, max = 10, value = 5),<br>
  sliderInput(&quot;slider2&quot;, &quot;&quot;,<br>
              min = 0, max = 10, value = c(3, 7))<br>
))</code></p>
<p>#server.R<br>
<code>shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 8</strong></p>
<p>Under the <code>selectInput</code> and in the same row with the <code>dateInput</code> place a <code>sliderInput</code> with <code>name</code> = slider1, <code>label</code> = “Sliders”, <code>min</code> = 0, <code>max</code> = 100 and <code>value</code> =50. Hint: Use <code>fluidrow</code>, <code>columns</code> and <code>h4</code>.</p>
<p><strong>Exercise 9</strong></p>
<p>Replace the <code>value</code> with a default range “10-90” and see the difference.</p>
<p><strong>TEXT INPUT</strong></p>
<p>In the example below we create a UI with a <code>textInput</code>.<br>
# ui.R<br>
<code>shinyUI(fluidPage(<br>
  titlePanel(&quot;Widgets&quot;),<br>
  textInput(&quot;text&quot;, label = h3(&quot;Text Input&quot;),<br>
            value = &quot;Text...&quot;))<br>
  )</code></p>
<p>#server.R<br>
<code>shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 10</strong></p>
<p>Finally put a <code>textInput</code> under <code>sliderInput</code> and in the same row with the <code>dateRangeInput</code>. Name it “text”, put as <code>label</code> “Text Input” and as <code>value</code> “Some Text”. Hint: Use <code>fluidrow</code>, <code>column</code> and <code>h4</code>.</p>
<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/2016/12/25/building-shiny-app-exercises-part-3/"> 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/-d_t7RVZNTA"></a></div>