Including a HTML file rendered from RMarkdown in R Shiny apps using shinydashboard is causing tabItems to break

Hi all,

Problem

When including a HTML document rendered from RMarkdown in a ShinyApp using shinydashboard, the HTML document is only rendered correctly when the setting "self_contained:" in the YAML chunk of the RMarkdown file is set to true. However, doing this causes you to be unable to select tabItems from the sidebarMenu in shinydashboard.

Conversely, when the setting "self_contained:" is set to false, elements of the HTML document such as plots and a floating table of contents
are missing (non-HTML elements present in the additional files), but you are able to select tabItems from the sidebarMenu, and the rest of the app works fine.

Ideally, you would be able to include a fully functioning HTML file rendered from RMarkdown in shinydashboard, whilst retaining functionality in the rest of the app.

Please find a minimum reproducible example below.

Minimum reproducible example

RMarkdown file

RMarkdownFile.Rmd

    ---
    title: "RMarkdownFile"
    author: "Test Author"
    date: "15/10/2020"
    output: 
      html_document:
        toc: true
        toc_float: true
        number_sections: true
        self_contained: true
    bibliography: bibliography.bib
    link-citations: yes
    ---
    
    ```{r setup, include=FALSE}
    knitr::opts_chunk$set(echo = FALSE)
    
    library(ggplot2)
    
    ```
    
    
    # Statement
    
    ggplot2 [@wickham2016ggplot2] is a great package!
    
    ```{r plot, message=FALSE}
    
    ggplot2::ggplot(data = mpg) + 
      ggplot2::geom_point(mapping = aes(x = displ, y = hwy))
      
    ```
    
    ## References

Bibliography

bibliography.bib

@book{wickham2016ggplot2,
  title={ggplot2: elegant graphics for data analysis},
  author={Wickham, Hadley},
  year={2016},
  publisher={springer}
}

Shiny app

app.R

library(shiny)
library(shinydashboard)
library(rmarkdown)

rmarkdown::render("RMarkdownFile.Rmd")

ui <- dashboardPage(
  
  dashboardHeader(title = "Test"),
  
  dashboardSidebar(
    sidebarMenu(id = "sidebarmenu",
                
                menuItem("Test Section 1", tabName = "testitem1",
                         menuSubItem("Test Section 1a", tabName = "testitem1a"),
                         menuSubItem("Test Section 1b", tabName = "testitem1b")
                         ),
                
                menuItem("Test Section 2", tabName = "testitem2",
                         menuSubItem("Test Section 2a", tabName = "testitem2a"),
                         menuSubItem("Test Section 2b", tabName = "testitem2b")
                         ),
                
                menuItem("Test Section HTML", tabName = "testitemhtml"
                         )
                )
    ),
  
  dashboardBody(
    
    tabItems(
    
      tabItem(tabName = "testitem1a",
              fluidRow(
                box(title = "Test Section 1a",
                    width = 12))
              ),
              
      tabItem(tabName = "testitem1b",
              fluidRow(
                box(title = "Test Section 1b",
                    width = 12))
              ),
              
      tabItem(tabName = "testitem2a",
              fluidRow(
                box(title = "Test Section 2a",
                    width = 12))
              ),
              
      tabItem(tabName = "testitem2b",
              fluidRow(
                box(title = "Test Section 2b",
                    width = 12))
              ),
              
      tabItem(tabName = "testitemhtml",
              fluidPage(
                box(title = "Test Section HTML",
                    width = 12,
                    includeHTML("RMarkdownFile.html")))
              )
      )
    )
)
  
  
  

server <- function(input, output) { }

shinyApp(ui, server)

This is a cross-post from Stack Overflow (https://stackoverflow.com/questions/64385529/including-a-html-file-rendered-from-rmarkdown-in-r-shiny-apps-using-shinydashboa) so i'll be sure to keep both threads updated.

Any help in solving this problem would be greatly appreciated!

This problem has now been solved in Stack Overflow. Please find a working minimum reproducible example below.

library(shiny)
library(shinydashboard)
library(rmarkdown)

rmarkdown::render("RMarkdownFile.Rmd")

ui <- dashboardPage(
  
  dashboardHeader(title = "Test"),
  
  dashboardSidebar(
    sidebarMenu(id = "sidebarmenu",
                
                menuItem("Test Section 1", tabName = "testitem1",
                         menuSubItem("Test Section 1a", tabName = "testitem1a"),
                         menuSubItem("Test Section 1b", tabName = "testitem1b")
                         ),
                
                menuItem("Test Section 2", tabName = "testitem2",
                         menuSubItem("Test Section 2a", tabName = "testitem2a"),
                         menuSubItem("Test Section 2b", tabName = "testitem2b")
                         ),
                
                menuItem("Test Section HTML", tabName = "testitemhtml"
                         )
                )
    ),
  
  dashboardBody(
    
    tabItems(
    
      tabItem(tabName = "testitem1a",
              fluidRow(
                box(title = "Test Section 1a",
                    width = 12))
              ),
              
      tabItem(tabName = "testitem1b",
              fluidRow(
                box(title = "Test Section 1b",
                    width = 12))
              ),
              
      tabItem(tabName = "testitem2a",
              fluidRow(
                box(title = "Test Section 2a",
                    width = 12))
              ),
              
      tabItem(tabName = "testitem2b",
              fluidRow(
                box(title = "Test Section 2b",
                    width = 12))
              ),
              
      tabItem(tabName = "testitemhtml",
              fluidPage(
                htmltools::tags$iframe(src = "RMarkdownFile.html", width = '100%',  height = 1000,  style = "border:none;"))
              )
      )
    )
)
  
  
  

server <- function(input, output) { }

shinyApp(ui, server)

Note that the "RMarkdownFile.html" file must be placed in the "www" folder in the Shiny app directory manually, unless it is rendered there directly.

This topic was automatically closed 54 days after the last reply. New replies are no longer allowed.

If you have a query related to it or one of the replies, start a new topic and refer back with a link.