EVOLUTION-MANAGER

Edit File: insertUI.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>R: Insert and remove UI objects</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="R.css" />
</head><body>

<table width="100%" summary="page for insertUI {shiny}"><tr><td>insertUI {shiny}</td><td style="text-align: right;">R Documentation</td></tr></table>

<h2>Insert and remove UI objects</h2>

<h3>Description</h3>

<p>These functions allow you to dynamically add and remove arbirary UI
into your app, whenever you want, as many times as you want.
Unlike <code><a href="renderUI.html">renderUI()</a></code>, the UI generated with <code>insertUI()</code> is persistent:
once it's created, it stays there until removed by <code>removeUI()</code>. Each
new call to <code>insertUI()</code> creates more UI objects, in addition to
the ones already there (all independent from one another). To
update a part of the UI (ex: an input object), you must use the
appropriate <code>render</code> function or a customized <code>reactive</code>
function.
</p>

<h3>Usage</h3>

<pre>
insertUI(
  selector,
  where = c("beforeBegin", "afterBegin", "beforeEnd", "afterEnd"),
  ui,
  multiple = FALSE,
  immediate = FALSE,
  session = getDefaultReactiveDomain()
)

removeUI(
  selector,
  multiple = FALSE,
  immediate = FALSE,
  session = getDefaultReactiveDomain()
)
</pre>

<h3>Arguments</h3>

<table summary="R argblock">
<tr valign="top"><td><code>selector</code></td>
<td>
<p>A string that is accepted by jQuery's selector
(i.e. the string <code>s</code> to be placed in a <code style="white-space: pre;">$(s)</code> jQuery call).
</p>
<p>For <code>insertUI()</code> this determines the element(s) relative to which you
want to insert your UI object. For <code>removeUI()</code> this determine the
element(s) to be removed. If you want to remove a Shiny input or output,
note that many of these are wrapped in <code style="white-space: pre;">&lt;div&gt;</code>s, so you may need to use a
somewhat complex selector &mdash; see the Examples below. (Alternatively, you
could also wrap the inputs/outputs that you want to be able to remove
easily in a <code style="white-space: pre;">&lt;div&gt;</code> with an id.)</p>
</td></tr>
<tr valign="top"><td><code>where</code></td>
<td>
<p>Where your UI object should go relative to the selector:
</p>

<dl>
<dt><code>beforeBegin</code></dt><dd><p>Before the selector element itself</p>
</dd>
<dt><code>afterBegin</code></dt><dd><p>Just inside the selector element, before its
first child</p>
</dd>
<dt><code>beforeEnd</code></dt><dd><p>Just inside the selector element, after its
last child (default)</p>
</dd>
<dt><code>afterEnd</code></dt><dd><p>After the selector element itself</p>
</dd>
</dl>

<p>Adapted from <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML">https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML</a>.</p>
</td></tr>
<tr valign="top"><td><code>ui</code></td>
<td>
<p>The UI object you want to insert. This can be anything that
you usually put inside your apps's <code>ui</code> function. If you're inserting
multiple elements in one call, make sure to wrap them in either a
<code>tagList()</code> or a <code>tags$div()</code> (the latter option has the
advantage that you can give it an <code>id</code> to make it easier to
reference or remove it later on). If you want to insert raw html, use
<code>ui = HTML()</code>.</p>
</td></tr>
<tr valign="top"><td><code>multiple</code></td>
<td>
<p>In case your selector matches more than one element,
<code>multiple</code> determines whether Shiny should insert the UI object
relative to all matched elements or just relative to the first
matched element (default).</p>
</td></tr>
<tr valign="top"><td><code>immediate</code></td>
<td>
<p>Whether the UI object should be immediately inserted
or removed, or whether Shiny should wait until all outputs have been
updated and all observers have been run (default).</p>
</td></tr>
<tr valign="top"><td><code>session</code></td>
<td>
<p>The shiny session. Advanced use only.</p>
</td></tr>
</table>

<h3>Details</h3>

<p>It's particularly useful to pair <code>removeUI</code> with <code>insertUI()</code>, but there is
no restriction on what you can use on. Any element that can be selected
through a jQuery selector can be removed through this function.
</p>

<h3>Examples</h3>

<pre>
## Only run this example in interactive R sessions
if (interactive()) {
# Define UI
ui &lt;- fluidPage(
  actionButton("add", "Add UI")
)

# Server logic
server &lt;- function(input, output, session) {
  observeEvent(input$add, {
    insertUI(
      selector = "#add",
      where = "afterEnd",
      ui = textInput(paste0("txt", input$add),
                     "Insert some text")
    )
  })
}

# Complete app with UI and server components
shinyApp(ui, server)
}

if (interactive()) {
# Define UI
ui &lt;- fluidPage(
  actionButton("rmv", "Remove UI"),
  textInput("txt", "This is no longer useful")
)

# Server logic
server &lt;- function(input, output, session) {
  observeEvent(input$rmv, {
    removeUI(
      selector = "div:has(&gt; #txt)"
    )
  })
}

# Complete app with UI and server components
shinyApp(ui, server)
}
</pre>

<hr /><div style="text-align: center;">[Package <em>shiny</em> version 1.5.0 <a href="00Index.html">Index</a>]</div>
</body></html>