How to Use R Code to Create Custom Formatted Outputs

Introduction

This article describes how to format an R calculation, including the coloring, placement of text, and the icon using code. You will need to learn some HTML if you want to do format objects like this beyond the example provided below.

Requirements

A Displayr document.

Method

1. From the toolbar, go to Insert a Calculation > Custom Code.
2. In the R CODE area at the top of the screen, paste the following code and click Calculate in the Object Inspector:

library(rhtmlMetro)
number <- 45
icon <- '

<div style="flex: 1 1 30%; display: flex; align-items: center;"><font color="red" style="font-size: 48pt"><i class="fas fa-ambulance"></i></font></div>

'
description <- 'Injuries per day'
text_wrapper <- paste('

<div style="flex: 1 1 50%; color: white; display: flex; flex-direction: column; padding: 12pt">

<div style="font-size: 32pt; font-weight: bold">', toString(number), '</div>


<div>', description, '</div>

</div>

')
box_color <- '#61A1E9'
box_html <- paste('

<div style="height:100%;', 'background:', box_color, ';display:flex">', text_wrapper, icon, '</div>

')
fontawesome_css <- '<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">'
html <- paste(fontawesome_css, box_html)
Box(text = html, text.as.html = TRUE)

You are able to change the color, shape format, and icon by modifying the code above using HTML.

You can read more about adding icons to dashboards here.

[INSERT LINK HERE: Adding Icons to Dashboards Using Font Awesome documentation]

See Also

[INSERT LINK HERE: Adding Icons to Dashboards Using Font Awesome documentation]