Creating a UI using HTML

We have covered some of the basics of HTML tags in the previous section. Here, we will be using the same tags to create an entire application using HTML. Let's review the previous sample application, which was created using pure Shiny:

As you can see in the preceding screenshot, there are two drop-down boxes—one to select a movie title and one to select its genre. There is also a textbox, which is used to give a name to the graph. We will not be creating a range slider since producing a range slider using Shiny is much easier than using raw HTML. Here, our final output will be a graph, bold text, some links, and a table with some formatted code. Let's get started with the code part.

We will be adding the following three links in the head section; these are required to run the page correctly. You can add extra JavaScript and CSS links if you wish to use them in the application:

<script src="shared/jquery.js" type="text/javascript"></script> 
<script src="shared/shiny.js" type="text/javascript"></script> 
<link rel="stylesheet" type="text/css" href="shared/shiny.css"/>

The following link is a reference to the Bootstrap CSS, which is required to make columns and row div classes work correctly:

<link href="shared/bootstrap/css/bootstrap.min.css" rel="stylesheet"> 

We will be using more CSS later in this chapter.

Once the links are added, we will move on to the main body of the HTML. Add the following code block inside the body tag:

<h1>Minimal HTML UI</h1> 
 
<div class="container-fluid"> 
<div class="row"> 
 
<div class="col-sm-4"> 
<h3>Control panel</h3> 
 
<div id="listMovies" class="shiny-html-output"></div> 
 
Title:<input type="text" name="title"><br> 
 
<select name = "genre" class = "form-control"> 
    <option value="Action">Action</option> 
    <option value="Animation">Animation</option> 
    <option value="Comedy">Comedy</option> 
    <option value="Drama">Drama</option> 
    <option value="Documentary">Documentary</option> 
    <option value="Romance">Romance</option> 
    <option value="Short">Short</option> 
</select> 
 
</div> 

Firstly, we mentioned the heading for the page in the h1 tag. Moving forward, we will be creating our first input, which is the list of movies in the application. It is unusual input, as the output is dynamically rendered. This input is assigned to the shiny-html-output class, which refers to the function that renders the UI dynamically. To help you out here, the UI definition can be wrapped in the rendered UI on the server side and then rendered on the UI side, allowing the user interface element to change in response to the user input. The following code block shows the function used in the server.r file:

output$listMovies = renderUI({ 
 
selectInput("pickMovie", "Pick a movie",  
choices = moviesSubset() %>%

sample_n(10) %>% 
select(title) 
    ) 
}) 

Next, we will be creating the text control that is given the name title:

Title:<input type="text" name="title"><br> 

This name is then referred to input$title on the server side. Next, we will be creating the combo box and giving it the name genre, which is also referred to input$genre on the server side:

<select name = "genre" class = "form-control"> 
    <option value="Action">Action</option> 
    <option value="Animation">Animation</option> 
    <option value="Comedy">Comedy</option> 
    <option value="Drama">Drama</option> 
    <option value="Documentary">Documentary</option> 
    <option value="Romance">Romance</option> 
    <option value="Short">Short</option> 
</select> 

We can use standard HTML input in Shiny as well. The output is handled using the div tag, which is assigned an ID and is referred to as a function in the server.r file. For example, we have assigned budgetYear as an ID to the div tag and class as shiny-plot-output, along with information about the width and height, which tells Shiny it is a plot and what its size is:

<div id="budgetYear" class="shiny-plot-output" style="width: 100%; height: 400px"></div> 

The next few HTML lines show equivalents of the links, text formatting, and code block tag examples that we defined previously using Shiny commands:

<p>For more information about <strong>Shiny</strong> look at the 
<a href="http://shiny.rstudio.com/articles/">documentation.</a> 
</p> 
<hr> 
<p>If you wish to write some code you may like to use the pre() function like this:</p> 
<pre>sliderInput("year", "Year", min = 1893, max = 2005, value = c(1945, 2005), sep = "")</pre>

Next, we will have Shiny HTML output. It is similar to the previous Shiny output we created earlier, but this time we use this output to render a table:

<div id = "moviePicker" class = "shiny-html-output"></div> 

This creates the output we required at the start of the section. Isn't it easy to create an application using HTML?

Adding HTML using the tag() function

Shiny provides a helper function to use basic HTML tags to create your application. However, if there are some HTML tags that are not included in the function, we can use the tag function. To find out about the tag function, you can simply type names (tags) in the console. This will give you all the functions that are available, as seen in the following screenshot:

To use the function, we can simply use tags$name, where the name is the function required. The name argument becomes the argument within the HTML tag. As you can see in the following screenshot, the first example, tags$script, will yield an output of the script html tag followed by the named argument type. The arguments that do not have names are used as the body of the tag. As seen in the second example, the named argument becomes href, whereas the unamed argument, This is an example, becomes the body of the HTML tag:

As seen in the previous example, the unnamed arguments are used as the body of the tags. We can use this to nest tags. Let's consider the following example:

Here, we are using tags$head and we are using a series of other tags separated by commas. In the example, we are using the links that we added at the beginning of the HTML Shiny UI definition that we created in the previous section. The output is the following HTML with the title, scripts, and style sheet all nested within the head section:

There may be some arguments that contain characters that can affect the output in R. In such cases, we will use backticks (`) around the text.