<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-4/"></div></div><div></div></div><div></div></div>
<div>
(This article was first published on <strong><a href="http://r-exercises.com/2017/01/01/building-shiny-app-exercises-part-4/"> 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>APPLICATION LAYOUT &amp; REACTIVITY</strong><br>
The fourth part of our series is “separated” into two “sub-parts”. In the first one we will start building the skeleton of our application by using <code>tabsetPanel</code>. This is how we will separate the sections of our app and also organize its structure better.<br>
In the second part you will learn hot to load your dataset in RStudio and finally in the third one we will give life to your Shiny App! Specifically, you are going to have your first contact with reactivity and learn how to build reactive output to display in your Shiny app in a form of a data table initially.<br>
Follow the examples below to understand the logic of the tools you are going to use and then enhance the app you started creating 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. Lets begin!</p>
<p>Answers to the exercises are available <a target="_blank" rel="nofollow" href="http://r-exercises.com/2017/01/01/building-shiny-app-solutions-part-4/">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>TABSET PANEL</strong><br>
In the example below you will see hot to add a <code>tabsetPanel</code> in your shiny app.</p>
<p># ui.R<br>
<code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;))<br>
    ))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 1</strong></p>
<p>Add a <code>tabsetPanel</code> to the <code>mainPanel</code> of your Shiny App.</p>
<p><strong>TAB PANEL</strong><br>
In the example below you will see how to add <code>tabPanel</code> in your <code>tabsetPanel</code>.</p>
<p># ui.R<br>
<code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;)<br>
    ))))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
})</code></p>
<p><strong>Exercise 2</strong></p>
<p>Place a <code>tabPanel</code> in the <code>tabsetPanel</code> you just added to your Shiny App. Name it “Data Table”.</p>
<p><strong>Exercise 3</strong></p>
<p>Put a second <code>tabPanel</code> next to the first one. Name it “Summary”.</p>
<p><strong>LOAD DATASET</strong><br>
Now it is time to give your app a purpose of existence. This can happen with only one way. To add some data into it! As we told in <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/12/12/building-shiny-app-exercises-part-1/">part 1</a> we will create an application based on the famous (Fisher’s or Anderson’s) iris data set which gives the measurements in centimeters of the variables sepal length and width and petal length and width, respectively, for 50 flowers from each of 3 species of iris. The species are Iris setosa, versicolor, and virginica.<br>
This is a “built in” dataset of RStudio that will help us create our first application.<br>
But normally you want to analyze your own datasets. The first thing you should do in order to perform any kind of analysis on them is to load them properly. We will now see how to load a dataset in txt form from a local file using RStudio. Let’s go!<br>
The process is quite simple. First of all you have to place the txt file that contains your dataset into the same directory that you are working, secondly press the “Import Dataset” button in RStudio and then “From Local File…”. Find the txt file in your computer and click “Open”, then press “Import”. That’s all! Your dataset is properly loaded in your directory and now you can work with it.<br>
Please note that the purpose of this series is not to teach how to form your dataset before you load it nor how to “clean” it. You can gain more information about this subject from <a target="_blank" rel="nofollow" href="http://r-exercises.com/2016/11/21/descriptive-analytics-part-4-data-manipulation/">here</a>. Our purpose is to teach you build your first Shiny App.</p>
<p><strong>Exercise 4</strong></p>
<p>Load the dataset you want to analyze (“something.txt”) from your computer to your directory with RStudio buttons.</p>
<p><strong>INTRODUCTION TO REACTIVITY</strong><br>
From this point you are going to enter in the “Kingdom of Reactivity”. Reactive output automatically responds when your user interacts with a widget. You can create reactive output by following two steps. Firstly, add an R object to your ui.R. and then tell Shiny how to build the object in server.R.</p>
<p><strong>1): Add an R object to the UI</strong></p>
<p>Shiny provides a variety of functions that transform R objects into output for your UI as you can see below:</p>
<p><code>htmlOutput</code>:	raw HTML<br>
<code>imageOutput</code>:	image<br>
<code>plotOutput</code>:	plot<br>
<code>tableOutput</code>:	table<br>
<code>textOutput</code>:	text<br>
<code>uiOutput</code>:	raw HTML<br>
<code>verbatimTextOutput</code>:	text</p>
<p>To add output to the UI place the <code>output</code> function inside <code>sidebarPanel</code> or <code>mainPanel</code> in the ui.R script.<br>
For example, the ui.R file below uses <code>tableOutput</code> to add a reactive line of text to “Tab Panel 1”. Nothing happens…for the moment!</p>
<p># ui.R<br>
<code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;,dataTableOutput(&quot;dt1&quot;)),<br>
              tabPanel(&quot;Tab Panel 2&quot;))<br>
    )))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
})</code></p>
<p>Notice that <code>datatableOutput</code> takes an argument, the character string “dt1”. Each of the *<code>Output</code> functions require a character string that Shiny will use as the name of your reactive element. Users cannot see it and you will understand its role later.</p>
<p><strong>Exercise 5</strong></p>
<p>Add a <code>datatableOutput</code> to “Data Table”, name its argument “Table”.</p>
<p><strong>2): Provide R code to build the object.</strong></p>
<p>The code should be placed in the function that appears inside <code>shinyServer</code> in your server.R script.<br>
This function is of great importance as it builds a list-like object named output that contains all of the code needed to update the R objects in your app. Be careful, each R object MUST have its own entry in the list.<br>
You can create an entry by defining a new element for output within the function. The element name should match the name of the reactive element that you created in ui.R.<br>
Each entry should contain the output of one of Shiny’s <code>render</code>* functions. Each <code>render</code>* function corresponds to a specific type of reactive object. You can find them below:</p>
<p><code>renderImage</code>:	images (saved as a link to a source file)<br>
<code>renderPlot</code>:	plots<br>
<code>renderPrint</code>:	any printed output<br>
<code>renderTable</code>:	data frame, matrix, other table like structures<br>
<code>renderText</code>:	character strings<br>
<code>renderUI</code>:	a Shiny tag object or HTML</p>
<p>Each <code>render</code>* function takes a single argument: an R expression which can either be one simple line of text, or it can involve many lines of code.<br>
In the example below “dt1” is attached to the <code>output</code> expression in server.R and gives us the Data Table of “iris” dataset inside “Tab Panel 1”.</p>
<p># ui.R<br>
<code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;,dataTableOutput(&quot;dt1&quot;)),<br>
              tabPanel(&quot;Tab Panel 2&quot;))<br>
    )))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
  output$dt1 &lt;- renderDataTable(<br>
    iris)<br>
  </code><br>
})</p>
<p><strong>Exercise 6</strong></p>
<p>Add the appropriate <code>render</code>* function to server.R in order to create the Data table of the “iris” dataset. Hint: Use the <code>output</code> expression.</p>
<p>The <code>dataTableOutput</code> is your first contact with reactivity, in the next parts of our series you will use the rest of the Output functions that Shiny provides. But for now let’s experiment a little bit on this.<br>
As you can see there is a text filter in your Data Table. You can deactivate it by setting <code>searching</code> to be “FALSE” as the example below.</p>
<p># ui.R<br>
<code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;,dataTableOutput(&quot;dt1&quot;)),<br>
              tabPanel(&quot;Tab Panel 2&quot;))<br>
    )))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
  output$dt1 &lt;- renderDataTable(<br>
    iris,options = list(searching=FALSE))<br>
})</code></p>
<p><strong>Exercise 7</strong></p>
<p>Disable the Text Filter of your Data Table. Hint: Use <code>options</code>, <code>list</code> and <code>searching</code>.</p>
<p>With the same logic you can disable the pagination that is displayed in your Data Table, as in the example below.</p>
<p># ui.R</p>
<p><code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;,dataTableOutput(&quot;dt1&quot;)),<br>
              tabPanel(&quot;Tab Panel 2&quot;))<br>
    )))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
  output$dt1 &lt;- renderDataTable(<br>
    iris,options = list(searching=FALSE,paging=FALSE))<br>
})</code></p>
<p><strong>Exercise 8</strong></p>
<p>Disable the Pagination of your Data Table. Hint: Use <code>options</code>, <code>list</code>, <code>paging</code>.<br>
Now you can see how to display an exact number of rows (15) and enable filtering again.</p>
<p># ui.R</p>
<p><code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;,dataTableOutput(&quot;dt1&quot;)),<br>
              tabPanel(&quot;Tab Panel 2&quot;))<br>
    )))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
  output$dt1 &lt;- renderDataTable(<br>
    iris,options = list(pageLength=15))<br>
})</code></p>
<p><strong>Exercise 9</strong></p>
<p>Enable filtering again and set the exact number of rows that are displayed to 10. Hint: Use <code>options</code>, <code>list</code>, <code>pageLength</code></p>
<p>We can also create a Length Menu in order to control totally the choices of the numbers of rows we want to be displayed. In the example below we assign every number to a menu label. 5 -> ‘5’, 10 -> ’10’, 15 -> ’15’,-1 -> ‘ALL’.</p>
<p># ui.R<br>
<code>library(shiny)<br>
fluidPage(<br>
  titlePanel(&quot;TabPanel&quot;),<br>
  sidebarLayout(<br>
    sidebarPanel(h3(&quot;Menu&quot;)),<br>
    mainPanel(h3(&quot;Main Panel&quot;),tabsetPanel(type = &quot;tabs&quot;,<br>
              tabPanel(&quot;Tab Panel 1&quot;,dataTableOutput(&quot;dt1&quot;)),<br>
              tabPanel(&quot;Tab Panel 2&quot;))<br>
    )))</code></p>
<p>#server.R<br>
<code>library(shiny)<br>
shinyServer(function(input, output) {<br>
  output$dt1 &lt;- renderDataTable(<br>
    iris,options = list(<br>
      lengthMenu = list(c(5, 15, 25,-1),c('5','15','25','ALL')),<br>
      pageLength = 15))<br>
})</code></p>
<p><strong>Exercise 10</strong></p>
<p>Create a Length Menu with values (10,20,30,-1) and assign each one ot the values to the appropriate menu label. Hint: Use <code>options</code>, <code>list</code>, <code>lengthMenu</code>,<code>pageLength</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/2017/01/01/building-shiny-app-exercises-part-4/"> 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/Oij4KGBt7xE"></a></div>