Solution for "Shiny And R Markdown - Passing A sidebarPanel?"

Hello all,

I posted a topic 2 months ago that unfortunately got locked due to inactivity:

As someone who has Google'd solutions and found many a barren thread with no answers, I didn't want to contribute to that landscape - but I've only found a simple solution to this problem just recently. I'd prefer this as a response in my original, now-locked thread, but since that is not possible, I will post it here and consider it as having done my due dilligence on this matter.

My solution is as follows:

If we try to pass Shiny input elements (such as my desired sidebarPanel()) directly from the app to RMD, we get this fatal error:
Warning: Error in : path for html_dependency not provided
[No stack trace available]

The HTML/JS/Shiny dependencies inherent to the Shiny panel code can apparently be resolved using a method in the 'htmltools' package called renderTags().

So, at long last, a solution to our problem is basically

In Shiny:

> library(htmltools)
> rx_vals <- reactiveValues()
> input_pan <- <insert desired Shiny UI elements here>
> rx_vals$input_pan_rendtags <- htmltools::renderTags(input_pan)

In RMD:

> ```{r sidebar, echo=FALSE, results='asis'}
> suppressMessages(library(htmltools))
> rx_vals$input_pan_rendtags$html
> ```

Simple solution, but a nightmare to get to it if you don't know about the package. Oh well, better late and with fewer strands of hair attached to my head than never.

A few notes on this:

  1. “runtime: shiny” is NOT necessary in the YAML header with this method. Just "output: html_document"

  2. dateRangeInput() will not render the input dates properly in the pure HTML form, for whatever reason. To address this, I just changed the dateRangeInput() into two textInput()'s showing the start and end date.

  3. Without any further changes, doing this causes the panel to appear on top of the "main" content. To get my sidebar panel to actually render properly as a sidebar in HTML, side by side with the main content, I needed to do some extra CSS manipulation to change the relative sizes of the elements:

> ```{css style, echo=FALSE}
> .column-left{
>   float: left;
>   width: 33%;
>   text-align: left;
>   padding: 5px;
>   background-color: #f5f5f5;
>   border-style: solid;
>   border-width: 1px;
>   border-color: grey;
> }
> .column-right{
>   float: right;
>   width: 66%;
>   text-align: left;
>   padding: 5px;
> }
> ```

Invoke .column-left on the RMD block containing the sidebar, and .column-right on the main panel, and change the sidebarPanel() to a fillPage() in the Shiny code.

Hope this helps!

1 Like