RenderUI issues with userBox

Question

I am attempting to create a userBox (package: ShinyDashboardPlus) in a RShiny dashboard using a uiOutput in the UI function. My primary issue is that I could like the userBox to update based on what athlete is selected in a selectInput. As a result, I would also like their picture to update.

Here is a brief sample of my data frame:

'''

 PlayerName <- c("Alexander Ovechkin", "Sidney Crosby")
 Position <- c("Forward", "Forward")
 ImageURL <- c("https://cms.nhl.bamgrid.com/images/headshots/current/168x168/8471214.jpg", "https://cms.nhl.bamgrid.com/images/headshots/current/168x168/8471675.jpg")

    DF <- data.frame (PlayerName, Position, ImageURL)

'''

Below is sample of my code:

UI

'''

  ui <-navbarPage(title=title, 

    tabPanel(title = "HOME",icon= icon("Home"),
      fluidPage(
      fluidRow(column(3,
                h4("Filter Data", align = "center"),
                    box(collapsible = FALSE,
                        width= 12,
                        selectInput( "Playernameinput", "Select Player", choices = DF$PlayerName)
),
              column(3, 
                h4("Selected Athlete", align = "center"),
                uiOutput("SelectedAthletePlaceHolder")

 )))

'''

Below is the Server:

'''

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

output$SelectedAthletePlaceHolder <- renderUI({
                                              req(input$Playernameinput)
  
                                              req(PlayerPositionFilter <- DF %>% 
                                                                          filter(`PlayerName` %in% input$Playernameinput),
                                                  PlayerPosition <- PlayerPositionFilter$Position)
                                              
                                              req(PlayerImageFilter <- DF %>%
                                                                       filter(`Playername` %in% input$Playernameinput),
                                                  PlayerImage <- PlayerImageFilter$ImageURL)
                                                
                                              userBox(title = userDescription(title=input$Playernameinput,
                                                                              subtitle = PlayerPosition,
                                                                              type=2, 
                                                                              background = "Red", 
                                                                              image= PlayerImage), 
                                                      width = 12)


 }

'''

This userBox so far works as expected with the Player Name and the Position updating in the title based on the input of the Playernameinput. However, the Image aspect does not update correctly. I have not noticed an error message, but a small question mark appears rather than the image its self. Note that if I hard code the URL into the image function, this works correctly.

I am sure I am missing a small factor.

Any assistance in this area of general input on my code would be very much appreciated! Thank you for your time and effort.

Answer 1

The following works for me.

PlayerName <- c("Alexander Ovechkin", "Sidney Crosby")
Position <- c("Forward", "Forward")
ImageURL <- c("https://cms.nhl.bamgrid.com/images/headshots/current/168x168/8471214.jpg", "https://cms.nhl.bamgrid.com/images/headshots/current/168x168/8471675.jpg")

DF <- data.frame(PlayerName, Position, ImageURL)

library(shinydashboardPlus)

ui <-navbarPage(title="My Title", 
                
                tabPanel(title = "HOME",icon= icon("Home"),
                         fluidPage(
                           fluidRow(column(3,
                                           h4("Filter Data", align = "center"),
                                           box(collapsible = FALSE,
                                               width= 12,
                                               selectInput( "Playernameinput", "Select Player", choices = DF$PlayerName)
                                           )),
                                           column(4, 
                                                  h4("Selected Athlete", align = "center"),
                                                  uiOutput("SelectedAthlete")
                                           ))
                         )
                )
)

server <- function(input, output, session) {
  
  output$SelectedAthlete <- renderUI({
    req(input$Playernameinput)

    df1 <- DF  %>% dplyr::filter(PlayerName %in% input$Playernameinput)
    PlayerPosition <- df1$Position
    PlayerImage <- df1$ImageURL

    userBox(title = userDescription(title=input$Playernameinput,
                                    subtitle = PlayerPosition,
                                    type=2,
                                    # background = "Red",
                                    image= PlayerImage
                                    ),
            status="info",
            width = 12)
  })
}

shinyApp(ui, server)