Integrate another Shiny app via iframe

[dominikendemann]

Description

Hello,
I would like to integrate another Shiny app (with data in a reactable and a pdf) into a survey. The Surveydown survey is also hosted on my Shiny server (Ubuntu). When I host the Shiny app on my Ubuntu Shiny server or on shinyapps.io and integrate it via iframe, it is not displayed correctly in the survey. The reactable is not displayed at all and the pdf files are all displayed one below the other.

The Shinyapp runs on its own without any problems when I host it in shinyapps.io or on my server. Everything is displayed correctly.
The survey (with embedded Shinyapp) runs locally on Windows / RStudio without any problems and the embedded Shiny App works.
Otherwise Surveydown also works on my Ubuntu Shiny server.
If I host the survey on Shinyapps.io and the embedded app also on Shinyapps.io I have no problems with the display. However, I would like to host the survey on my own server and not on Shinyapps.io

I also tried to integrate the shinyapp differently and include it in survey.qmd as R-chunk like this: shiny::runApp("/srv/shiny-server/app2/app.R”
Unfortunately, this does not work either.

On the Ubuntu server ( Ubuntu 24.04.1 LTS) I have installed Surveydown 0.5.1

Does anyone have an idea where the problem might be?

Thanks a lot!

[jhelvy]

Hi! Thanks for giving surveydown a try.

I'm having a hard time understanding what you're trying to do. It sounds like you're trying to run two different shiny apps at the same time from the same server? Every surveydown survey runs as a shiny app, so you should only have one call to shiny::runApp() or shiny::shinyApp(). If the shiny app that you are trying to embed does not depend on anything the respondent does in your survey, then it should work to just host that shiny app somewhere and then inside your survey.qmd file insert an iframe to embed that app. Then when you render your surveydown survey, it should render with the embedded shiny app in the page that you inserted the iframe in.

It would help if you could provide code for a simple example of what you're trying to do.

[dominikendemann]

Hi! Thanks for your quick reply!

It´s like you wrote it. Both, the survey and another Shiny app are running on a server. The embedded shiny app does not depend on anything the respondent does in the survey. And I have embedded it into the survey.qmd via iframe

::: {.sd-page}
### Shiny App
<iframe align="mid" src="https://datalit.shinyapps.io/Stimuli_Tabformat/" 
title="Mat" width="100%" height="600" sandbox="allow-scripts allow-same-origin"></iframe>

#### Which type of penguin do you like the best?
```{r}
sd_question(
  type  = 'mc',
  id    = 'fr',
  label = "Which type of penguin do you like the best?",
  option = c(
    'Adélie'    = 'adelie',
    'Chinstrap' = 'chinstrap',
    'Gentoo'    = 'gentoo',
    'Schüler 5' = 'schtler4'
  ),
  width = "100%", 
  height = "100px"
)
:::

If I host both on Shinyapp.io it works (https://datalit.shinyapps.io/test2_integriert/).
If I host it on my server the embedded Shiny app is not displayed correctly. Even if I host the survey.qmd on my ubuntu server and the embedded Shiny app via Shinyapps.io it does not work. -> The tabs are not displayed correctly (see picture).

I don't think it's a problem with Surveydown, but maybe you have an idea what the problem could be.

[jhelvy]

Okay, I think there might be a couple different things here, making it a bit complicated to figure out how tot fix this. Let me break them apart.

1. When I view your demo hosted on shinyapps.io, the tabs appear to work, but the pdf inside the tabs are not present. I get a blank page. Only the tab with the table in it is rendering properly. When I use Brave browser, the pdfs are blocked by Brave. When I view it through Mac Safari, it's just blank for the pdfs. The table always works. So there is some security issue probably preventing the pdfs from being shown on different browsers.

2. The issue about the tabs rendering as links instead of tabs is perhaps something else. My guess is that it's working on shinyapps.io because it probably has Quarto installed as well as pandoc and any and all other dependencies those packages need (it's run by posit, so I'm sure they keep everything up to date). If it's not rendering properly on your ubuntu server, it's probably some dependency missing on the system to render the tabs properly. So I don't think this is a surveydown issue and it's probably just some dependency issue on your ubuntu system.

So issue 1) is I think the bigger challenge because even if you get things running on your ubuntu server with all the dependencies installed, you still might run into issues where the pdfs don't show on all browsers. I'm wondering if there is a different way to achieve this though. I think you could get a fully working setup to show pdfs and the table all within Quarto. That is, I don't think you need a shiny app at all for that. So long as your pdfs are viewable from some url, you should be able to embed them and embed a data table inside quarto using quarto tabs directly in surveydown. You can first experiment with just rendering the qmd file to see if it renders properly. That would be my first suggestion - try rendering that locally and see if it works to view the content in the tabs directly within Quarto. If it works locally, then the issue is figuring out what needs to be on your ubuntu server.

[jhelvy]

Just to demonstrate that you can do this all inside surveydown, here is a simple example. It embeds a pdf hosted somewhere on the web (I use my CV as a demo), and a data table from the DT package.

survey.qmd file:

---
format: html
echo: false
warning: false
---

```{r}
library(surveydown)
```

::: {#page1 .sd-page}

# Demo survey of embedded pdf and table in Quarto tabs

::: {.panel-tabset}

### PDF

<iframe width="780" height="600" src="https://nbviewer.org/github/jhelvy/cv/blob/main/cv-jph.pdf" title="Information"></iframe>

### Table

```{r}
sd_output('table')
```

:::

Here's a survey question:

```{r}
sd_question(
  type   = "mc",
  id     = "like_apple",
  label  = "Do you like apples?",
  option = c(
    "Yes" = "yes",
    "No"  = "no"
  )
)
```

:::

app.R file:

library(surveydown)

server <- function(input, output, session) {

  # Make data table output widget
  output$table <- shiny::renderUI({
    DT::renderDataTable({
      mtcars |>
        DT::datatable()
    })
  })

  # Run the surveydown server
  sd_server()

}

shiny::shinyApp(ui = sd_ui(), server = server)

One important point to highlight - the creation of the data table widget has to be done inside a call to shiny::renderUI(). This is a unique aspect of surveydown and it's something we've been working to try to remove (we should in theory be able to directly use DT::renderDataTable()...but we can't and we haven't figured out why not). So the table object is created like this:

output$table <- shiny::renderUI({
  DT::renderDataTable({
    mtcars |>
      DT::datatable()
  })
})

In the survey.qmd file, we display the table using sd_output('table').

I haven't tested if this works when served live on shinyapps.io or elsewhere, but it runs locally.

[dominikendemann]

Hi John,
thank you very much!
I embedded the data table and the PDFs (iframe) using quarto tabs in surveydown. That works great.

The table is a reactable and I had no problems embedding it.
That's how I did it:
survey.qmd

::: {.panel-tabset}
### PDF1
<iframe align="mid" src= "www/KRM.pdf"width="100%" height="500"></iframe>

### Table
```{r}
reactableOutput("tabelle")
:::

app.R

library(reactable)
server <- function(input, output, session) {

sd_skip_if()
  sd_show_if()
  sd_server(
    db = db,
    required_questions = c("agree") 
    )
daten1 <- read.table(text = daten_text, sep = ";", header = TRUE, quote = "")
  
  output$tabelle <- renderReactable({
    
    reactable(
      daten1,
      filterable = TRUE  )
   )})
 }

In January, a knowledge test using SurveyDown will be conducted with around 300 participants. I am excited to see how well it works with SurveyDown.

[jhelvy]

Oh wow that's great! I just tried it and yes, reactable seems to work just fine. How you've set this up is actually how I had intended to use html widgets in surveydown, but for some reason not all of them work. For example, if you change to using a DT table as in my example, you can't use the DT::dataTableOutput("table") function in the survey.qmd file. It just won't render. Instead I had to use sd_output(). But it appears reactable works with using reactableOutput() directly in the survey.qmd file!

Glad to hear you'll be using this in January, please do let us know how it goes!