3

I used bsModal successfully in my code before. However, I can't seem to get a modal pop up to show just when the user visits an app's first page by default. I thought something like this would work, but not. Any idea how I can trigger a bsModal on page visit?

library(shiny)
library(shinyBS)

ui <- fluidPage(
  mainPanel(
    bsModal(id = 'startupModal', title = 'Dum Dum', trigger = '',
            size = 'large', p("here is my mumbo jumbo")),
    width = 12
  )
)

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

}

shinyApp(ui = ui, server = server)

I simply need to alert the user with a message when they visit the app and then allow them to close the modal pop up and navigate the rest of the app freely. I am using Shinydashboard. So, eventually, this has to work with that.

Gopala
  • 10,363
  • 7
  • 45
  • 77

2 Answers2

6

You can use toggleModal to manually trigger the popup from the server.

library(shiny)
library(shinyBS)

ui <- fluidPage(
  mainPanel(
    bsModal(id = 'startupModal', title = 'Dum Dum', trigger = '',
            size = 'large', p("here is my mumbo jumbo")),
    width = 12
  )
)

server <- function(input, output, session) {
  toggleModal(session, "startupModal", toggle = "open")
}

shinyApp(ui = ui, server = server)
Geovany
  • 5,389
  • 21
  • 37
  • Very interesting. It also only renders the modal pop-up once per session and not each time I land on the specific page I put it on. Are there any side effects I need to worry about, or code properly for? – Gopala Dec 06 '16 at 02:08
  • You can control when to show/close the pop-up using an `observer`. To close it use `toggle = "close"`. – Geovany Dec 06 '16 at 02:40
5

Here is a solution using JS to trigger bsModal when page load "onload" from ui without waiting for the server. Along with a solution proposed here to prevent end users from accidentally closing the modal by clicking outside the modal or press Esc

library(shiny)
library(shinyBS)
bsModalNoClose <-function(...) {
     b = bsModal(...)
     b[[2]]$`data-backdrop` = "static"
     b[[2]]$`data-keyboard` = "false"
  return(b)
}


ui <- fluidPage(
       sidebarLayout(
          sidebarPanel(
              bsModalNoClose("window", "Window",
                  title="Enter Login Details",size='small',
                  textInput('username', 'Username'),
                  passwordInput('pwInp', 'Password'),
                  actionButton('butLogin', 'Login', class = 'btn action-button btn-success', icon = icon('sign-in')),
                  footer = h4(actionLink('create_account','Create an account'),align='right'),
                  tags$head(tags$style("#window .modal-footer{display:none}
                                       .modal-header .close{display:none}"),
                            tags$script("$(document).ready(function(){
                                        $('#window').modal();
                                        });")
                            ))
                  )
        ,mainPanel()
  ))

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

shinyApp(ui, server)

I hope it may be helpful for future readers.

A. Suliman
  • 12,923
  • 5
  • 24
  • 37
  • WOW!! I was trying to do the same thing with shinyalert but this is too good! Also, if you could provide a guide on how to complete the authentication of username/password and the signup process, that would be really helpful. – enigma6174 Jun 22 '18 at 09:58
  • @enigma6174 I am glad you find it useful. I create a github repository [here](https://github.com/AbubakerSuliman/Shiny-login-page) for my login page which I made using different parts from different contributors in SO and github. However it need more future work. – A. Suliman Jun 23 '18 at 07:36
  • @A.Suliman, This solution was useful. I followed to your github but I don't see user credentials saved, how to setup the email delivery in R when you sign up ? – user5249203 Sep 26 '19 at 17:51
  • @user5249203 thanks. Users credentials will be saved in an SQlite DB called `users` at `www/sqlite` folder 'for production you may need more persistent location'. To send an Email install `rJava`, `mailR` then uncomment the following [part](https://github.com/AbubakerSuliman/Shiny-login-page/blob/9c8a83e60397b811e43df6231963074eb185b563/server.R#L153), finally provide a valid Gmail user name and pwd – A. Suliman Sep 26 '19 at 18:35