CODEWITHSUNDEEP
htmlrshiny
j_5chneider
j_5chneider

Reputation: 420

R Shiny: use HTML within functions (like textInput, checkboxGroupInput)

I'm trying to include HTML in a shiny textInput() function. More specific I want to include an image right next to text that is displayed within the widgets. The following was written in ui.R:

shinyUI(navbarPage("Page Title",theme = shinytheme("united"),
  tabPanel("Panel title",          
     sidebarLayout(
       sidebarPanel(

         textInput("textInputObject", c("Input Header", tags$span(HTML("<img src='http://www2.psd100.com/ppp/2013/10/0401/Blue-question-mark-icon-1004195336.png', title='help', alt='' />"))), value = "put text here"),

         checkboxGroupInput("checkbInp", "Checkbox Header",
                            c("Checkbox1 [?]"           = "check1"            , 
                              "Checkbox2 [?]"           = "check2"          , 
                              "Checkbox3 [?]"           = "check3")          , 
                            selected = c("check1"))
  )
)

This gives me:

enter image description here

There are 2 Problems:

  1. I was able to include the image in the header of the textInput. However, it should only show "Input Header" and then the image. As you see in the picture, "span" from tags$span is also shown. How can I solve this?

  2. I have no idea how to include the image in the checkboxGroupInput. It is supposed to replace the "[?]" (see image)

Thanks!

Upvotes: 2

Views: 999

Answers (2)

Pork Chop
Pork Chop

Reputation: 29387

for #1 you can easily fix this by using list before the HTML call. For #2 is a bit trickier as you would probably need to write the entire checkbox yourself. Perhaps if you could declare separate ones as I did, would that be ok?

rm(list = ls())
library(shiny)
library(shinythemes)

ui <- navbarPage("Page Title",theme = shinytheme("united"),
                 tabPanel("Panel title",          
                          sidebarLayout(
                            sidebarPanel(
                              textInput("textInputObject", 
                                        c("Input Header",list(HTML("<img src='http://www2.psd100.com/ppp/2013/10/0401/Blue-question-mark-icon-1004195336.png'/>"))), value = "put text here"),
                              checkboxInput("checkbInp",c("Checkbox1",list(HTML("<img src='http://www2.psd100.com/ppp/2013/10/0401/Blue-question-mark-icon-1004195336.png'/>"))), value = T),
                              checkboxInput("checkbInp2",c("Checkbox2",list(HTML("<img src='http://www2.psd100.com/ppp/2013/10/0401/Blue-question-mark-icon-1004195336.png'/>")))),
                              checkboxInput("checkbInp3",c("Checkbox3",list(HTML("<img src='http://www2.psd100.com/ppp/2013/10/0401/Blue-question-mark-icon-1004195336.png'/>"))))
                            ),
                          mainPanel())
                 )
)
server <- function(input, output) {}
shinyApp(ui, server)

enter image description here

Upvotes: 3

Nicolae
Nicolae

Reputation: 191

If span tag is not required, just try like this:

textInput("textInputObject", c("Input Header", tags$img(src = "http://www2.psd100.com/ppp/2013/10/0401/Blue-question-mark-icon-1004195336.png", title = "help", alt = ""), value = "put text here")

Upvotes: 0

Related Questions