A R Shiny Box can be thought of as a visual container on the user interface. This container is what is able to hold the output from your Shiny code, whether it’s a graph or regular data output. To create a box as part of your interface, Shiny has a Box function which is able to make this very easy to do. The great thing about a Box is that it can be used to create an entire dashboard based from other Shiny code. These boxes can be considered to be the “building blocks” of a Shiny dashboard similarly to how they function in Tableau. If you’re building a r shiny app, consider using a series of boxes in order to create a much more intuitive and easy to understand interface.
Creating a R Shiny Box In Your Server Function
The Box function has 9 different parameters, including the actual content of the box. Remember that the content of the box is derived from other functions in your R code. You would store the output in a variable, and pass this variable directly to the box function when it’s time for the variable to be used. The box function is rendered to the User Interface directly on the Shiny server, and is directly included in the R file.
The 9 different parameters are able to be used in order to customize the look of the box according to your desired specifications.
Parameters
The first parameter is the contents of the box, which is either the variable or function that renders the output. The second two parameters (title = and footer =) are both optional, which are title and footer text which should be included in the box.
The next argument, status =, sets a background color. This is in case you would like to programmatically change the color of the box on the basis of a status. This can either be set to null, or primary, success, info, warning, or danger – corresponding to either nothing, blue, green, blue, orange, or red.
SolidHeader, is either set to true or false based on whether or not the header should have a solid background color. This is in case you would like the background color for the box header to be different from the rest of the box.
The default background color of the box is white. You would use the background parameter to change this to one of the 15 different colors which are available. The background color parameter is different from the status function because the status function is designed to be dynamically updated from the code, and background is designed to remain consistent.
Width and height are different from each other. Width of the box is based on Bootstrap, where you have a 12 column grid. If you would like the width to be 1/3 the width of the column, then you would set the value of this to 4. Otherwise, if you have the box in it’s own column – keep this at null as the width of the column is equal to the width of the boxplot. The height is fairly simpler, as you can adjust this to the typical units of pixels, millimeters, centimeters, or any other CSS unit.
You also have the option with r shiny to make the box element collapsible or even collapse it by default. If you set collapsible to true (collapsible=TRUE), then the user will have the option to collapse the box. There is also the option to set the box to collapsed as the default option (collapsed=TRUE). This gives you more control over the overall appearance of the user interface.
Examples
The fantastic part about using the box function is that you don’t need to use all of the parameters at once. If you’re looking to use a few of them to create a container, then you’re in luck.
A box() function offers a lot of customization ability. As a quick reminder, the box function is able to act as a container for data.
Here is an example of a box function which is at 66% of the screen width, has a blue background, and is used to hold a
box(
background = “blue”,
width = 8,
htmlOutput(“information”)
),
The function above would use data from a htmlOutput function with an ID of information. The htmlOutput function is able to pass data directly to the box function.
box(
background = “blue”,
width = 8,
htmlOutput(“information”)
)
Derived from Box Function Documentation, Here is another example of a box function using a plot output. This would create a box size the same width as the size of the chart that is included. Furthermore, this example includes the collapsible option to ensure that the user has the option to collapse the chart.
box(title = “My Chart”,
solidHeader = TRUE, collapsible = TRUE,
plotOutput(“plot”, height = 250)
)
Box functions are very powerful containers for creating analytics dashboards. They are typically included outside of the main body of the function that you are working with. Using these box functions is a great way to keep your UI organized and create great analytics dashboards.