4

I'm trying to find a way to check whether a Shiny Dashboard Box is collapsed or expanded.

By reading the great reply by @daattali in How to manually collapse a box in shiny dashboard I know it is possible to collapse the box from the server side by using the shinyjs package, as illustrated in the code below

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

jscode <- "
shinyjs.collapse = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
"

ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jscode),
    actionButton("bt1", "Collapse box1"),
    actionButton("bt2", "Collapse box2"),
    br(), br(),
    box(id = "box1", collapsible = TRUE, p("Box 1")),
    box(id = "box2", collapsible = TRUE, p("Box 2"))
  )
)

server <- function(input, output) {
  observeEvent(input$bt1, {
    js$collapse("box1")
  })
  observeEvent(input$bt2, {
    js$collapse("box2")
  })
}

shinyApp(ui, server)

By inspecting the UI HTML I see that answer to my problem could be solved by accessing icon class (to see whether it is fa fa-plus or fa fa-minus), but I have no idea how to do that.

Any help would be greatly appreciated.

Cheers

Prradep
  • 5,506
  • 5
  • 43
  • 84
JesperHansen
  • 437
  • 1
  • 4
  • 16

1 Answers1

6

You can create a new input, triggered when the user collapse the box, with something like this :

collapseInput <- function(inputId, boxId) {
  tags$script(
    sprintf(
      "$('#%s').closest('.box').on('hidden.bs.collapse', function () {Shiny.onInputChange('%s', true);})",
      boxId, inputId
    ),
    sprintf(
      "$('#%s').closest('.box').on('shown.bs.collapse', function () {Shiny.onInputChange('%s', false);})",
      boxId, inputId
    )
  )
}

With you example :

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

jscode <- "
shinyjs.collapse = function(boxid) {
$('#' + boxid).closest('.box').find('[data-widget=collapse]').click();
}
"
collapseInput <- function(inputId, boxId) {
  tags$script(
    sprintf(
      "$('#%s').closest('.box').on('hidden.bs.collapse', function () {Shiny.onInputChange('%s', true);})",
      boxId, inputId
    ),
    sprintf(
      "$('#%s').closest('.box').on('shown.bs.collapse', function () {Shiny.onInputChange('%s', false);})",
      boxId, inputId
    )
  )
}


ui <- dashboardPage(
  dashboardHeader(),
  dashboardSidebar(),
  dashboardBody(
    useShinyjs(),
    extendShinyjs(text = jscode),
    actionButton("bt1", "Collapse box1"),
    actionButton("bt2", "Collapse box2"),
    br(), br(),
    box(id = "box1", collapsible = TRUE, p("Box 1")),
    box(id = "box2", collapsible = TRUE, p("Box 2")),
    collapseInput(inputId = "iscollapsebox1", boxId = "box1"),
    verbatimTextOutput(outputId = "res")
  )
)

server <- function(input, output) {
  observeEvent(input$bt1, {
    js$collapse("box1")
  })
  observeEvent(input$bt2, {
    js$collapse("box2")
  })

  output$res <- renderPrint({
    input$iscollapsebox1
  })
}

shinyApp(ui, server)

You can change true/false by 'collapse'/'expanded' in function collapseInput when it call Shiny.onInputChange if you want.

Victorp
  • 13,636
  • 2
  • 51
  • 55