daattali / shinyalert

🗯️ Easily create pretty popup messages (modals) in Shiny
https://daattali.com/shiny/shinyalert-demo/
Other
242 stars 26 forks source link

How to auto close Shinyalert #16

Closed BonnyRead closed 6 years ago

BonnyRead commented 6 years ago

Hi, dattali, First, thanks for the great tool you invented for shiny. I want to write a loading screen through shinyalert. The modal needs to be auto close and shows a success screen at the end. It can be done easily by showModal.

shinyApp( ui = basicPage( actionButton("show", "Show modal dialog") ), server = function(input, output) { observeEvent(input$show, { showModal(modalDialog( title = "Data processing" )) Sys.sleep(5) removeModal() showModal(modalDialog( title = "Done" )) }) } )

But it looks quite ugly. I try to use shinyalert package to replicate this method but It can't be done easily by me. I can't close the first shinyalert automatically. Here's my code. shinyApp( ui = basicPage( useShinyjs(), useShinyalert(), actionButton("show", "Show modal dialog") ), server = function(input, output) { observeEvent(input$show, { shinyalert("Data processing!", "", type = "info", inputId = "hidewhencomplete",html = T) Sys.sleep(5) removeModal()#cant close hide("hidewhencomplete")#cant close

replicate the method from close_alert but still can't close it

                    session <- shiny::getDefaultReactiveDomain()
                    session$sendCustomMessage(type = "shinyalert.close", message = "")
                    shinyalert("Done!", "", type = "success")
            })
    }

)

Thanks for your help.

Btw, I wonder if I can get a shinyalert type "loading" which showing a spinning "loading" animation, so I can use it and show the final result instead of showing them a type = "info" when it is processing.

daattali commented 6 years ago

To place a loading icon, find an image you want to use and use the imageUrl parameter (although I only ever tried using PNG images, I'm not sure if the library supports GIF as well, but you can try).

To auto-close after x seconds, use the timer parameter. Look up the documentation for shinyalert and read about the timer parameter to see how to use it

BonnyRead commented 6 years ago

Thanks for the reply. The timer can solve problems in this situation.But if I change the function Sys.sleep(5) to a complicated function and don't know when it will be done, the timer will be unsuitable.

daattali commented 6 years ago

That's right. There is no builtin native way to programatically close it. There used to be a function for that, but it sometimes introduced buggy behaviour, so I removed it because I prefer having less features but being correct rather than having features that don't work properly. If you want, you might be able to close the modal with javascript by running swal.close(); (you can use shinyjs::runjs() to do that)

BonnyRead commented 6 years ago

Thanks for your help!!

BonnyRead commented 6 years ago
shinyApp(
        ui = basicPage(
                useShinyjs(),
                useShinyalert(),
                actionButton("show", "Show modal dialog")
        ),
        server = function(input, output) {
                observeEvent(input$show, {
                        shinyalert("Data processing!", "", type = "info", inputId = "hidewhencomplete",timer = 6000)
                        Sys.sleep(5)
                        shinyjs::runjs("swal.close();")
                        shinyalert("Done!", "", type = "success")
                })
        }
)

It works perfectly,thanks again.

daattali commented 6 years ago

Great! But I would use shinyjs::delay instead of Sys.sleep so that the delay happens on the client side (in the browser) rather than server-side, because then it blocks only the current user instead of blocking everybody for 5 seconds

BonnyRead commented 6 years ago

Ok,But the use of "Sys.sleep" is to represent a computation time of a complicated process. I think I should some packages like promises to solve the problem that the process blocking everybody for a very long period of time. Thanks for your help.