Sweet Alert 2

[ale1981]

Are there any plans to update to the Sweet Alert 2 https://sweetalert2.github.io/ package or let users choose which to use?

[karandatwani92]

Hey @ale1981,

Currently, it is not in our plan but please help us by giving some info on Sweet Alert 2, a brief comparison would help us to consider it!

Thanks, Ale

[ale1981]

Hi @karandatwani92

I believe the current package is no longer actively developed?
SweetAlert2 is heavier in terms of size but offers more functionality and customisation, such as different types of modals, input validations, and animation effects.

SweetAlert2 allows you to create custom modals beyond basic alerts. For instance, you can create a modal with a progress indicator:

Swal.fire({
  title: 'File Upload',
  html: 'Uploading...',
  timerProgressBar: true,
  onBeforeOpen: () => {
    Swal.showLoading()
    // Perform file upload logic here
  },
  onClose: () => {
    // Handle modal closing event
  }
}).then((result) => {
  if (result.dismiss === Swal.DismissReason.timer) {
    // Handle modal closed due to timeout
  }
});

SweetAlert2 enables you to create input modals with validation, allowing users to input data and validate it before proceeding:

Swal.fire({
  title: 'Enter your email',
  input: 'email',
  inputPlaceholder: 'Enter your email address',
  inputAttributes: {
    autocapitalize: 'off',
    autocorrect: 'off'
  },
  showCancelButton: true,
  confirmButtonText: 'Submit',
  showLoaderOnConfirm: true,
  preConfirm: (email) => {
    // Validate email logic
    return fetch(`/validateEmail?email=${email}`)
      .then(response => {
        if (!response.ok) {
          throw new Error(response.statusText)
        }
        return response.json()
      })
      .catch(error => {
        Swal.showValidationMessage(`Request failed: ${error}`)
      })
  },
  allowOutsideClick: () => !Swal.isLoading()
}).then((result) => {
  if (result.isConfirmed) {
    // Handle confirmed input
    const email = result.value;
    // Process the email...
  }
});

You can create a sequence of modals using SweetAlert2, where one modal follows another:

Swal.mixin({
  input: 'text',
  confirmButtonText: 'Next →',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Enter something'
  },
  {
    title: 'Question 2',
    text: 'Enter something else'
  },
  {
    title: 'Question 3',
    text: 'Enter one more thing'
  }
]).then((result) => {
  if (result.value) {
    const answers = JSON.stringify(result.value)
    Swal.fire({
      title: 'All done!',
      html: `Your answers: <pre><code>${answers}</code></pre>`,
      confirmButtonText: 'Lovely!'
    })
  }
});

[karandatwani92]

Hey @ale1981 Thanks for the all info, I appreciate your efforts.

Hey @tabacitu please consider the above. Thanks

[pxpm]

Hey @ale1981 I was exploring the possibility to add that package, but it seems they are listed in the synk vunerability and gihub advisory pages because they have some kind of overwritten behavior for some domains like .ru for eg. https://github.com/sweetalert2/sweetalert2#important-notice-about-the-usage-of-this-software-for-ru-su-by-and-%D1%80%D1%84-domain-zones

GHSA-mrr8-v49w-3333

I am concerned by pushing a change like this to all our customers. I can see me using it in my projects, that I know for sure are not hosted on .ru domains, but we (Backpack) don't know to whom our customers sell software to.

You can use it in your project by overwriting the ui scripts file. Just put a copy of this file https://github.com/Laravel-Backpack/CRUD/blob/0e14e07c8449a20595b71ca70c3d6fdf628f3449/src/resources/views/ui/inc/scripts.blade.php#L1 in your app resources/views/vendor/backpack/ui/inc/scripts.blade.php

The initialization and some configurations keys are different, so you have to either:
a) replace all swal() in all backpack files
b) create a "translation layer" between sw and sw2.

I think b) is the easiest and with less overwrites so let me brief you a little on how to do it:

Remove previous sweetalert from line 4 in the previous mentioned file, and add the following at the @push('after_scripts') at the end of the file:

@push('after_scripts')
    @basset(base_path('vendor/backpack/crud/src/resources/assets/js/common.js'))
    @basset('https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js')
    @bassetBlock('sweetalert-to-sweetalert2')
    <script>
    function swal(options = {}) {
        return Swal.fire(options);
    }
    </script>
    @endBassetBlock
@endpush

As you see, this only transforms the backpack swal() calls into sw2 compatible calls. But you also need to translate some options, for example one that I noticed was the buttons, that's no longer an option in sw2, so you need to translate that to, something like:

function swal(options = {}) {
        if(options.buttons) {
        // check what buttons are inside the array
        // use the appropriate sw2 functions for those buttons. for example if backpack `buttons` contains the `Cancel` button, you need to set: 
       option.buttons.forEach(function(button) { 
             if (button === 'Cancel') {
                  options.showCancelButton = true;
                  options.showCancelButtonText = button;
             }
       })
 
        return Swal.fire(options);
    }

Hope that helps.

Cheers

[pxpm]

If you end up with a completely working translation layer let us know, maybe we can add a detection of what type of sweetalert is loaded and add that to core so that developers don't have to overwrite the core files like I suggested you to do.

Maybe it can work without the overwrite, just include the two files in the page, and a piece of javascript with the "translation from sw to sw2" and it should work the same.