Sweetalert2 Text Input With Validation Of The Text With Javascript In R Shiny

I am upgrading from sweetalert to sweetalert2 in R shiny and so far have managed to get the regular response by the R shiny server to ok/cancel buttons in the alert messages workin

Solution 1:

As promised in the other post, here is a solution without shinyjs:

library(shiny)

js <- "
Shiny.addCustomMessageHandler('sweet',
  function(message) {
    swal({
      title : message.title, 
      html : message.html, 
      input : 'text', 
      showConfirmButton : true,
      confirmButtonText : 'Confirm',
      confirmButtonColor: '#00cc00',
      showCancelButton : true,
      cancelButtonText : 'Cancel',
      cancelButtonColor : '#339fff',
      allowOutsideClick: true,
      allowEscapeKey: true,
      inputValidator: function(value) {
        if(value === '') { 
          return 'You need to write something!'
        } else {
          var format = /\\`|\\~|\\!|\\@|\\#|\\$|\\%|\\^|\\&|\\*|\\(|\\)|\\+|\\=|\\[|\\{|\\]|\\}|\\||\\\\|\\'|\\<|\\,|\\.|\\>|\\?|\\/|\"|\\;|\\:/g;
          if(format.test(value)){   
            return 'Special characters are not allowed'
          } 
        }
      }
    })
    .then(function(result){
      if(result.dismiss === swal.DismissReason.cancel) {
        swal('failure');
      } else {
      swal('success');
        Shiny.setInputValue('option1', result.value, {priority: 'event'});
      }
    });
  }
);
"
ui <- basicPage(
  tags$head(tags$script(src = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.all.min.js"),
            tags$link(rel="stylesheet", type="text/css", href = "https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/7.29.2/sweetalert2.min.css"),
            tags$script(js)
  ),
  actionButton("messageButton", "Click me")

)

server <- function(input, output, session){
  observeEvent(input$messageButton, {
    session$sendCustomMessage(type = "sweet",
                              message = list(title = paste('<span style ="color:#339FFF;">An alert with an input text'),
                                             html = "Enter text"))
  })

  observe({print(input$option1)})
}

shinyApp(ui, server)