Passing dynamic picture url link to UI in shinydashboardPlus() not working

Question

Im using widgetUserBox() from shinydashboardPlus() and I'm trying to conditionally pass a url string from the server to the backgroundUrl option of widgetUserBox() in the UI, which displays an image as the background of the user box. This isn't working and the box just defaults to a black coloured background as opposed to following the url link to an image.

Im able to successfully pass text from the server to other elements of widgetUserBox ie. the title, subtitle & footer but am unable to get backgroundUrl to follow the link. I have tried using renderText() , renderUI() and verbatimTextOutput() to pass the url string to backgroundUrl, all with no luck. Is there a solution/workaround to be able to send a url string from the server to backgroundUrl?

I have an example of the issue below:

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui = dashboardPagePlus(

  header = dashboardHeaderPlus(),
  
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem("Tab 1", tabName = "Tab_1"))) , 
    
    body = dashboardBody(
      tabItems(
        tabItem(tabName = "Tab_1" ,
            fluidRow(
                 column(4,
                       textOutput("countText") , 
                         
                       br() , 
                       br() , 
                       
                       actionButton('push','Push Me'),
                       
                       br() , 
                       br() , 
                       
                       widgetUserBox( 
                           title =  textOutput("titleText") , 
                           subtitle = textOutput("subtitleText") ,
                           type = 2,
                           width = 12,
                           background = T,
                           backgroundUrl = textOutput("urlText") ,
                           closable = F,
                           collapsible = F , 
                           textOutput("footerText"))
                       ))
                       ))
                       ))
    

server = function(input, output,session) {
 
  counter <- reactiveValues(value = 1)
  
  output$titleText <- renderText({ "Can pass text to title" })
  output$subtitleText <- renderText({ "and to subtitle" })
  output$footerText <- renderText({ "and to footer" })
  output$countText <- renderText({ paste0(counter$value) })

  
  observeEvent(input$push, {
    
    # Add to count
    counter$value <- counter$value + 1
    
    # Arbitrary condition to evaluate which text to output (if counter value is odd, display 1st image, if even then the second)
    if ((counter$value %% 2) == 0) {
      
      output$urlText <- renderText({ paste0("https://i.ibb.co/7CVQ1Vk/Carlton-Blues-Banner4.png") })
      
    } else {
      
      output$urlText <- renderText({ paste0("https://i.ibb.co/3C8dc71/Brisbane-Lions-Banner.png") })
      
      
    }
  
  })

   
}
    
shinyApp(ui = ui, server = server)

Answer 1

Here is a solution that renders the widgetUserBox on the server side.

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

ui = dashboardPagePlus(
  
  header = dashboardHeaderPlus(),
  
  sidebar = dashboardSidebar(
    sidebarMenu(
      menuItem("Tab 1", tabName = "Tab_1"))) , 
  
  body = dashboardBody(
    tabItems(
      tabItem(tabName = "Tab_1" ,
              fluidRow(
                column(4,
                       textOutput("countText") , 
                       
                       br() , 
                       br() , 
                       
                       actionButton('push','Push Me'),
                       
                       br() , 
                       br() , 
                       uiOutput("my_box")
                ))
      ))
  ))


server = function(input, output,session) {
  
  counter <- reactiveValues(value = 1)
  my_url <- reactiveVal()

  output$countText <- renderText({ paste0(counter$value) })
  
  output$my_box <- renderUI({
    widgetUserBox( 
      title =   "Can pass text to title" , 
      subtitle = "and to subtitle" ,
      type = 2,
      width = 12,
      background = T,
      backgroundUrl = my_url() ,
      closable = F,
      collapsible = F , 
      "and to footer")
  })
  
  
  observeEvent(input$push, {
    
    # Add to count
    counter$value <- counter$value + 1
    
    # Arbitrary condition to evaluate which text to output (if counter value is odd, display 1st image, if even then the second)
    if ((counter$value %% 2) == 0) {
      
      my_url("https://i.ibb.co/7CVQ1Vk/Carlton-Blues-Banner4.png")
      
    } else {
      
      my_url("https://i.ibb.co/3C8dc71/Brisbane-Lions-Banner.png")
      
      
    }
    
  })
  
  
}

shinyApp(ui = ui, server = server)

---

Edit

I'm actually not sure if you can reach a solution with the pattern you've used. If you look into the source code of widgetUserBox , backgroundUrl is used in the following way:

backgroundStyle <- paste0("background: url('", 
                              backgroundUrl, "') center center;")

and this is later used to generate a div tag. However, textOutput wraps the text in a span or div tag (see the container argument), so it's not plain text anymore.