Epoxy HTML Output for Shiny

Expermimental. An glue-like output for Shiny. epoxyHTML() lets you use placeholders in your HTML such as "{{height}}", that are provided values from the server by giving renderEpoxyHTML() a height value.

Usage

epoxyHTML(
  .id,
  ...,
  .class = NULL,
  .class_item = NULL,
  .container = "div",
  .container_item = "span",
  .placeholder = "",
  .sep = "",
  .open = "{{",
  .close = "}}",
  .na = "",
  .null = "",
  .literal = FALSE,
  .trim = FALSE
)

Arguments

.id

The output id

...

UI elements or text (that will be treated as HTML), containing template variables. Use named values to provide initial placeholder values.

.class

Classes added to the output div, in addition to .epoxy-html

.class_item

Classes added to the .container wrapping each template variable.

.container

The name of the HTML element to be used for the output element, by default "div".

.container_item

The name of the HTML element to be used for each template item, by default "span".

.placeholder

Default placeholder if a template variable placeholder isn't provided.

.sep

[character(1): ‘""’]
Separator used to separate elements.

.open

Opening template variable delimiter

.close

Closing template variable delimiter

.na

[character(1): ‘NA’]
Value to replace NA values with. If NULL missing values are propagated, that is an NA result will cause NA output. Otherwise the value is replaced by the value of .na.

.null

[character(1): ‘character()’]
Value to replace NULL values with. If character() whole output is character(). If NULL all NULL values are dropped (as in paste0()). Otherwise the value is replaced by the value of .null.

.literal

[boolean(1): ‘FALSE’]
Whether to treat single or double quotes, backticks, and comments as regular characters (vs. as syntactic elements), when parsing the expression string. Setting .literal = TRUE probably only makes sense in combination with a custom .transformer, as is the case with glue_col(). Regard this argument (especially, its name) as experimental.

.trim

[logical(1): ‘TRUE’]
Whether to trim the input template with trim() or not.

Value

An HTML object.

HTML Markup

By default, placeholders are inserted into a <span> element in your UI, with the classes specified in .class_item.

epoxyHTML() also supports an HTML markup syntax similar to pug (an HTML preprocessor). With the markup syntax, "{{h3.example.basic%basic-three demo}}" creates a demo placeholder inside an <h3 id="basic-three" class="example basic"></h3> tag.

The placeholder template string follows the pattern {{<markup> <name>}}. The markup syntax comes first, separated from the placeholder name by a space. The HTML element is first, followed by classes prefixed with . or and ID prefixed with #. The template markup can contain only one element and one ID, but many classes can be specified.

See also

renderEpoxyHTML

Examples

ui <- shiny::fluidPage(
  shiny::h2("epoxyHTML demo"),
  epoxyHTML(
    .id = 'test',
    .class_item = "inner",
    shiny::fluidRow(
      shiny::tags$div(
        class = "col-xs-4",
        shiny::selectInput(
          inputId = "thing",
          label = "What is this {{color}} thing?",
          choices = c("apple", "banana", "coconut", "dolphin")
        )
      ),
      shiny::tags$div(
        class = "col-xs-4",
        shiny::selectInput(
          inputId = "color",
          label = "What color is the {{thing}}?",
          c("red", "blue", "black", "green", "yellow")
        )
      ),
      shiny::tags$div(
        class = "col-xs-4",
        shiny::sliderInput(
          inputId = "height",
          label = "How tall is the {{color}} {{thing}}?",
          value = 5,
          min = 0,
          max = 10,
          step = 0.1,
          post = "ft"
        )
      )
    ),
    shiny::tags$p(class = "big", "The {{color}} {{thing}} is {{height}} feet tall."),
    # Default values for placeholders above.
    thing = "THING",
    color = "COLOR",
    height = "HEIGHT"
  ),
  shiny::tags$style(shiny::HTML(
    '.big { font-size: 1.5em; }
    .inner:not(.epoxy-item__placeholder) { background-color: rgba(254, 233, 105, 0.5)}
    .epoxy-item__placeholder { color: #999999; }'
  ))
)

server <- function(input, output, session) {
  output$test <- renderEpoxyHTML(
    thing = input$thing,
    color = input$color,
    height = input$height
  )
}

if (interactive()) {
  shiny::shinyApp(ui, server)
}