Standard UI layout

Create a standard UI layout with output on the right and an encoding panel on the left. This is the layout used by the teal modules.

Usage

standard_layout(
  output,
  encoding = NULL,
  forms = NULL,
  pre_output = NULL,
  post_output = NULL
)

Arguments

output

(shiny.tag)
object with the output element (table, plot, listing) such as for example returned by shiny::plotOutput().

encoding

(shiny.tag)
object containing the encoding elements. If this element is NULL then no encoding side panel on the right is created.

forms

(tagList)
for example shiny::actionButton() that are placed below the encodings panel

pre_output

(shiny.tag) optional,
with text placed before the output to put the output into context. For example a title.

post_output

(shiny.tag) optional, with text placed after the output to put the output into context. For example the shiny::helpText() elements are useful.

Value

an object of class shiny.tag with the UI code.

Examples

library(shiny)
standard_layout(
  output = white_small_well(tags$h3("Tests")),
  encoding = tags$div(
    tags$label("Encodings", class = "text-primary"),
    panel_item(
      "Tests",
      optionalSelectInput(
        "tests",
        "Tests:",
        choices = c(
          "Shapiro-Wilk",
          "Kolmogorov-Smirnov (one-sample)"
        ),
        selected = "Shapiro-Wilk"
      )
    )
  ),
  forms = tagList(
    verbatim_popup_ui("warning", "Show Warnings"),
    verbatim_popup_ui("rcode", "Show R code")
  )
)
#> <div class="row">
#>   <div class="col-md-3">
#>     <div class="well">
#>       <div>
#>         <label class="text-primary">Encodings</label>
#>         <div>
#>           <div id="_div" class="panel panel-default">
#>             <div class="panel-heading collapsed" data-toggle="collapse" href="#_panel_body_1290" aria-expanded="false">
#>               <i class="fas fa-angle-right dropdown-icon" role="presentation" aria-label="angle-right icon"></i>
#>               <label class="panel-title inline">Tests</label>
#>             </div>
#>             <div class="panel-collapse collapse " id="_panel_body_1290">
#>               <div class="panel-body">
#>                 <div>
#>                   <script>
#>         $(function() {
#>           $('#tests').on('change', function(e) {
#>             var select_concat = $(this).val().length ? $(this).val().join(', ') : 'NULL';
#>             $('#tests_selected_text').html(select_concat);
#>           })
#>         })</script>
#>                   <div>
#>                     <div id="tests_input" style="display: block;">
#>                       <div class="form-group shiny-input-container">
#>                         <label class="control-label" id="tests-label" for="tests">Tests:</label>
#>                         <select data-actions-box="false" data-none-selected-text="- Nothing selected -" data-max-options="1" data-show-subtext="true" data-live-search="false" data-state-input="true" id="tests" class="selectpicker form-control" autocomplete="off" multiple="multiple"><option value="Shapiro-Wilk" selected>Shapiro-Wilk</option>
#> <option value="Kolmogorov-Smirnov (one-sample)">Kolmogorov-Smirnov (one-sample)</option></select>
#>                       </div>
#>                     </div>
#>                     <div id="tests_fixed" style="display: none;">
#>                       <label class="control-label">Tests:</label>
#>                       <code id="tests_selected_text">Shapiro-Wilk</code>
#>                     </div>
#>                   </div>
#>                 </div>
#>               </div>
#>             </div>
#>           </div>
#>         </div>
#>       </div>
#>     </div>
#>     <div class="form-group">
#>       <button id="warning-button" type="button" class="btn btn-default action-button">Show Warnings</button>
#>       <button id="rcode-button" type="button" class="btn btn-default action-button">Show R code</button>
#>     </div>
#>   </div>
#>   <div class="col-md-9">
#>     <div class="well">
#>       <div class="pre-output"></div>
#>       <div class="output">
#>         <div class="well well-sm bg-white">
#>           <h3>Tests</h3>
#>         </div>
#>       </div>
#>       <div class="post-output"></div>
#>     </div>
#>   </div>
#> </div>