conditionalPanel
conditionalPanel(condition, ...)
Arguments
condition | A JavaScript expression that will be evaluated repeatedly to determine whether the panel should be displayed. |
---|---|
... | Elements to include in the panel. |
Description
Creates a panel that is visible or not, depending on the value of a JavaScript expression. The JS expression is evaluated once at startup and whenever Shiny detects a relevant change in input/output.
Details
In the JS expression, you can refer to input
and output
JavaScript objects that contain the current values of input and output. For
example, if you have an input with an id of foo
, then you can use
input.foo
to read its value. (Be sure not to modify the input/output
objects, as this may cause unpredictable behavior.)
Note
You are not recommended to use special JavaScript characters such as a
period .
in the input id's, but if you do use them anyway, for
example, inputId = "foo.bar"
, you will have to use
input["foo.bar"]
instead of input.foo.bar
to read the input
value.
Examples
sidebarPanel(
selectInput(
"plotType", "Plot Type",
c(Scatter = "scatter",
Histogram = "hist")),
# Only show this panel if the plot type is a histogram
conditionalPanel(
condition = "input.plotType == 'hist'",
selectInput(
"breaks", "Breaks",
c("Sturges",
"Scott",
"Freedman-Diaconis",
"[Custom]" = "custom")),
# Only show this panel if Custom is selected
conditionalPanel(
condition = "input.breaks == 'custom'",
sliderInput("breakCount", "Break Count", min=1, max=1000, value=10)
)
)
)
<div class="col-sm-4">
<form class="well">
<div class="form-group shiny-input-container">
<label class="control-label" for="plotType">Plot Type</label>
<div>
<select id="plotType"><option value="scatter" selected>Scatter</option>
<option value="hist">Histogram</option></select>
<script type="application/json" data-for="plotType" data-nonempty="">{}</script>
</div>
</div>
<div data-display-if="input.plotType == 'hist'">
<div class="form-group shiny-input-container">
<label class="control-label" for="breaks">Breaks</label>
<div>
<select id="breaks"><option value="Sturges" selected>Sturges</option>
<option value="Scott">Scott</option>
<option value="Freedman-Diaconis">Freedman-Diaconis</option>
<option value="custom">[Custom]</option></select>
<script type="application/json" data-for="breaks" data-nonempty="">{}</script>
</div>
</div>
<div data-display-if="input.breaks == 'custom'">
<div class="form-group shiny-input-container">
<label class="control-label" for="breakCount">Break Count</label>
<input class="js-range-slider" id="breakCount" data-min="1" data-max="1000" data-from="10" data-step="1" data-grid="true" data-grid-num="9.99" data-grid-snap="false" data-keyboard="true" data-keyboard-step="0.1001001001001" data-drag-interval="true" data-data-type="number" data-prettify-separator=","/>
</div>
</div>
</div>
</form>
</div>