Embed a website in shiny app using flexdashboard: not working, not reactive

Question

I am trying to make a shinyapp using flexdashboard. The app takes as input a string of text, and then it outputs a website using that input text. I have an example of the app working in standard shiny. My problem is "translating" it to an app using flexdashboard. Here is my app in standard shiny:

library(shiny)

ui <- fluidPage(titlePanel("Testing"), 
                sidebarLayout(
                    sidebarPanel(
                        fluidRow(
                            column(9, selectInput("Color", label=h5("Choose a color"),choices=c('red', 'blue'))
                            ))),
                    mainPanel(fluidRow(
                        htmlOutput("frame")
                    )
                    )
                ))

server <- function(input, output) {
    observe({ 
        query <- input$Color
        test <<- paste0("https://en.wikipedia.org/wiki/",query)
    })
    output$frame <- renderUI({
        input$Color
        my_test <- tags$iframe(src=test, height=600, width=535, frameborder = "no")
        print(my_test)
        my_test
    })
}

shinyApp(ui, server)

Here is my attempt trying to get it to work using flexdashboards. I am having problem trying to get the input as a reactive expression to make my output dynamic. I am trying 2 different ways to get the output, but none work.

---
title: "Testing Colors"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(knitr)

lookup <- structure(c("r", "b"), .Names = c("Red", "Blue"))

Column {.sidebar}
-----------------------------------------------------------------------

```{r}
selectInput('Color', label = 'Select a color', choices = lookup, selected = "r")


Column {data-width=600}
-----------------------------------------------------------------------

### Color Web Page

```{r}
observeEvent(input$Color,{
    output$url <-renderUI(a(href=paste0("https://en.wikipedia.org/wiki/", input$Color)))
  })


Column {data-width=400}
-----------------------------------------------------------------------

### Another webpage

```{r}
selectedColor<- reactive({ 
  color <- input$Color 
  }) 
webpage <- renderUI({ 
  include_url(paste0("https://www.wikipedia.org/",selectedColor))
  })
webpage

I would certainly appreciate any comments or ideas.

Thanks!

Daniel Jachetta Daniel Jachetta · Accepted Answer · 2020-06-09T00:08:45

This code gave me a flexdashboard back with the selectInput, I think the alignment of spaces made for errors

---
title: "Testing Colors"
output: 
  flexdashboard::flex_dashboard:
    orientation: columns
    vertical_layout: fill
    runtime: shiny
---

```{r setup, include=FALSE}
library(flexdashboard)
library(knitr)

lookup <- structure(c("r", "b"), .Names = c("Red", "Blue"))


```

```{r,}
selectInput('Color', label = 'Select a color', choices = lookup, selected = "r")
```

Column {data-width=600}
-----------------------------------------------------------------------

### Color Web Page

```{r}
observeEvent(input$Color,{
    output$url <-renderUI(a(href=paste0("https://en.wikipedia.org/wiki/", input$Color)))
  })
```

Column {data-width=400}
-----------------------------------------------------------------------

### Another webpage

```{r}
selectedColor<- reactive({ 
  color <- input$Color 
  }) 
webpage <- renderUI({ 
  include_url(paste0("https://www.wikipedia.org/",selectedColor))
  })
webpage

Embed a website in shiny app using flexdashboard: not working, not reactive

1 Answers