Shiny: Trigger a popup by clicking a valueBox

Question

I want to display a table of data in a pop-up window by clicking on valueBox. The valueBox itself should work as an actionButton.

When I click on the valueBox it should render a table in pop-up window as in the picture below.

Can anyone help on this code?

My code:

library(shiny)
library(shinydashboard)

data <- iris

ui <- dashboardPage(
  dashboardHeader(title = "Telemedicine HP"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      valueBox( 60, subtitle = tags$p("Attended", style = "font-size: 200%;"),
                icon = icon("trademark"), color = "purple", width = 4,
                href = NULL))))

server <- function(input,output){
}

shinyApp(ui, server)

Answer 1

You can create an onclick event with shinyjs. Therefore you need to add useShinyjs() in your ui, which you can do by wrapping your ui in a tagList.

The onclick function is triggered in your server when an element with a given ID is clicked. So you also need to give the valueBox an ID. I decided to wrap it in a div with an ID.

Next part is to create a popup whenever the onclick event is triggered. You can do this by using the showModal function from shinyBS.

Working example

library(shiny)
library(shinydashboard)
library(shinyjs)
library(shinyBS)

data <- iris

ui <- tagList(
  useShinyjs(),
  dashboardPage(
    dashboardHeader(title = "Telemedicine HP"),
    dashboardSidebar(),
    dashboardBody(
      fluidRow(
        div(id='clickdiv',
            valueBox(60, subtitle = tags$p("Attended", style = "font-size: 200%;"), icon = icon("trademark"), color = "purple", width = 4, href = NULL)
        )
      )
    )
  )
)

server <-  function(input, output, session){
  onclick('clickdiv', showModal(modalDialog(
    title = "Your title",
    renderDataTable(data)
  )))
}

shinyApp(ui, server)

Answer 2

Here is another solution without shinyjs

library(shiny)
library(shinydashboard)
library(shinyBS)

data <- iris

ui <- tagList(
  dashboardPage(
    dashboardHeader(title = "Telemedicine HP"),
    dashboardSidebar(),
    dashboardBody(
      fluidRow(
        div(id='clickdiv',
            valueBox(60, subtitle = tags$p("Attended", style = "font-size: 200%;"), icon = icon("trademark"), color = "purple", width = 4, href = NULL)
        )
      ),
      bsModal("modalExample", "Data Table", "clickdiv", size = "large",dataTableOutput("table"))
    )
  )
)

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

  output$table <- renderDataTable({
    head(data)
  })

}

shinyApp(ui, server)