<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-2/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2016/12/18/building-shiny-app-exercises-part-2/"> 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>
In the second part of our series you will see how to add control widgets in your Shiny app. Widget is a web element that your users can interact with. The widgets provided by Shiny are:</p>
<p><strong>FUNCTIONS</strong><br>
<code>actionButton</code>: Action Button<br>
<code>checkboxGroupInput</code>: A group of check boxes<br>
<code>checkboxInput</code>:	A single check box<br>
<code>dateInput</code>:	A calendar for date selection<br>
<code>dateRangeInput</code>:	A pair of calendars for selecting a date range<br>
<code>fileInput</code>:	A file upload control wizard<br>
<code>helpText</code>:	Help text that can be added to an input form<br>
<code>numericInput</code>:	A field to enter numbers<br>
<code>radioButtons</code>:	A set of radio buttons<br>
<code>selectInput</code>:	A box with choices to select from<br>
<code>sliderInput</code>:	A slider bar<br>
<code>submitButton</code>:	A submit button<br>
<code>textInput</code>:	A field to enter text</p>
<p><strong>ADDING WIDGETS</strong><br>
You can add widgets to your web page in the same way that you added other types of HTML content in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">part 1</a>.<br>
To add a widget to your app, place a widget function in <code>sidebarPanel</code> or in <code>mainPanel</code> in your ui.R file.<br>
The first two arguments for each widget are a name for the widget which will be a character string that the user will not see, but you can use it to change the widget’s value and a label which will appear with the widget in your app and it should be a character string too.<br>
The rest of the arguments vary from widget to widget, depending on what the widget needs to be functional. They may be initial values, ranges, and increments.<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 to our app, for educational reasons and later we will decide which of them is practical to keep.<br>
Note that we will just add the buttons in this part. Reactivity will be added to them in a few chapters. Lets begin!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/18/building-shiny-app-solutions-part-2/">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><strong>Exercise 1</strong></p>
<p>Open 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> and move the image from <code>sidebarPanel</code> to <code>mainPanel</code>, leave two rows under the <code>title</code> “Main”, put the image there and change its dimensions to: <code>height</code> = 150 and <code>width</code> = 200. HINT: Use <code>br</code>.</p>
<p><strong>BUTTONS</strong><br>
In the example below we create a UI with a <code>submitButton</code> and an <code>actionButton</code>. Please note that we use the function <code>fluidrow</code> to make sure that all the elements we are going to use will be in the same line as we are going to need this in the next parts:<br>
# ui.R<br>
shinyUI(fluidPage(<br>
titlePanel(“Widgets”),</p>
<p> fluidRow(h3(“Buttons”),<br>
actionButton(“action”, label = “Action”),<br>
br(),<br>
br(),<br>
submitButton(“Submit”))))</p>
<p># server.R<br>
shinyServer(function(input, output) {<br>
})</p>
<p><strong>Exercise 2</strong></p>
<p>Leave a row and place an <code>actionButton</code> under the title “Menu” in <code>sidebarPanel</code>, give it the title “Actionbutton”, <code>name</code> = “per” and <code>label</code> = “Perform”. HINT: Use <code>br</code> and <code>h4</code>.</p>
<p><strong>Exercise 3</strong></p>
<p>Leave a row from the <code>actionButton</code> you just placed and add a <code>submitButton</code> with <code>title</code> = “Submitbutton” and <code>name</code> = “Submit”. HINT: Use <code>br</code> and <code>h4</code>.</p>
<p><strong>SINGLE CHECKBOX</strong><br>
In the example below we create a UI with a single Checkbox:<br>
# ui.R<br>
shinyUI(fluidPage(<br>
titlePanel(“Widgets”),</p>
<p> fluidRow(h3(“Single checkbox”),<br>
checkboxInput(“checkbox”, label = “Choice A”, value = TRUE))))</p>
<p>#server.R<br>
shinyServer(function(input, output) {<br>
})</p>
<p><strong>Exercise 4</strong></p>
<p>Add a <code>checkboxInput</code> in the <code>sidebarPanel</code> under the <code>submitButton</code>, put as title “Single Checkbox”, name it “checbox”, name the <code>label</code> “Choice A” and set the <code>value</code> to “TRUE”. HINT: Use <code>h4</code>.</p>
<p><strong>Exercise 5</strong></p>
<p>Change the value to “FALSE” to understand the difference.</p>
<p><strong>CHECKBOX GROUP</strong><br>
In the example below we create a UI with a Checkbox Group:<br>
#ui.R<br>
shinyUI(fluidPage(<br>
checkboxGroupInput(“checkGroup”,<br>
label = h3(“Checkbox group”),<br>
choices = list(“Choice 1” = 1,<br>
“Choice 2” = 2, “Choice 3” = 3),<br>
selected = 2)<br>
))</p>
<p>#server.R<br>
shinyServer(function(input, output) {<br>
})</p>
<p><strong>Exercise 6</strong></p>
<p>Place a <code>checkboxGroupInput</code> under the <code>checkboxInput</code>, give it title “Checkbox Group”, name it “checkGroup”, name the <code>label</code> “Checkbox Group” and give it 3 <code>choices</code>. HINT: Use <code>h4</code></p>
<p><strong>Exercise 7</strong></p>
<p>Make the second of the <code>choices</code>the default one.</p>
<p><strong>DATE INPUT</strong><br>
In the example below we create a UI with a Date Input:<br>
#ui.R<br>
shinyUI(fluidPage(<br>
dateInput(“date”,<br>
label = h3(“Date input”),<br>
value = “2016-12-07”)<br>
))</p>
<p>#server.R<br>
shinyServer(function(input, output) {<br>
})</p>
<p><strong>Exercise 8</strong></p>
<p>Under the c<code>heckboxGroupInput</code> add a <code>dateInput</code> with <code>name</code> = “date”, <code>label</code> = “Date Input” and <code>value</code> = “2016-12-01”.</p>
<p><strong>DATE RANGE</strong><br>
In the example below we create a UI with a Date Range Input:<br>
#ui.R<br>
shinyUI(fluidPage(<br>
dateRangeInput(“dates”, label = h3(“Date range”))<br>
))</p>
<p>#server.R<br>
shinyServer(function(input, output) {<br>
})</p>
<p><strong>Exercise 9</strong></p>
<p>Under the <code>dateInput</code> place a <code>dateRangeInput</code> with <code>name</code> = “dates” and <code>label</code> = “Date Range”. HINT: Use <code>h4</code>.</p>
<p><strong>FILE INPUT</strong><br>
In the example below we create a UI with a File Input.<br>
#ui.R<br>
shinyUI(fluidPage(<br>
fileInput(“file”, label = h3(“File input”))<br>
))</p>
<p>#server.R<br>
shinyServer(function(input, output) {<br>
})</p>
<p><strong>Exercise 10</strong></p>
<p>Under the <code>dateRangeInput</code> place a <code>fileInput</code>. Name it “file” and give it the <code>label</code> “File Input”.</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/18/building-shiny-app-exercises-part-2/"> 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/P7w58OLmDpA"></a></div>