Is it possible to add a link in a user friendly error which is thrown in domain or appservice ? #1582

9 Answer(s)

• 

  0

  liangshiwei created 4 years ago

  Support Team Fullstack Developer

  Hi,

  ABP using the SweetAlert library by default. but seems SweetAlert does not support html content.

  You can use sweetAlert2 to replace it.

  Save Cancel
• 

  0

  learnabp created 4 years ago

  can you please let me know how i can do this ??

  Save Cancel
• 

  0

  liangshiwei created 4 years ago

  Support Team Fullstack Developer

  package.json

  {
    "version": "1.0.0",
    "name": "my-app",
    "private": true,
    "dependencies": {
      ......
      "sweetalert2": "^11.0.18"
    }
  }
  
  

  abp.resourcemapping.js

  module.exports = {
      aliases: {
  
      },
      mappings: {
          "@node_modules/sweetalert2/dist/sweetalert2.all.min.js": "@libs/sweetalert2/dist"
      }
  };
  

  Add global.js to wwwroot

  var abp = abp || {};
  
  abp.libs = abp.libs || {};
  abp.libs.sweetAlert = {
      config: {
          'default': {
  
          },
          info: {
              icon: 'info'
          },
          success: {
              icon: 'success'
          },
          warn: {
              icon: 'warning'
          },
          error: {
              icon: 'error'
          },
          confirm: {
              icon: 'warning',
              title: 'Are you sure?',
              buttons: ['Cancel', 'Yes']
          }
      }
  };
  
  var showMessage = function (type, message, title) {
      if (!title) {
          title = message;
          message = undefined;
      }
  
      var opts = $.extend(
          {},
          abp.libs.sweetAlert.config['default'],
          abp.libs.sweetAlert.config[type],
          {
              title: title,
              html: message
          }
      );
  
      return $.Deferred(function ($dfd) {
          Swal.fire(opts).then(function () {
              $dfd.resolve();
          });
          // sweetAlert(opts).then(function () {
          //     $dfd.resolve();
          // });
      });
  };
  
  abp.message.info = function (message, title) {
      return showMessage('info', message, title);
  };
  
  abp.message.success = function (message, title) {
      return showMessage('success', message, title);
  };
  
  abp.message.warn = function (message, title) {
      return showMessage('warn', message, title);
  };
  
  abp.message.error = function (message, title) {
      return showMessage('error', message, title);
  };
  
  

  WebModule

  private void ConfigureBundles()
  {
      Configure<AbpBundlingOptions>(options =>
      {
          options.StyleBundles.Configure(
              BasicThemeBundles.Styles.Global,
              bundle =>
              {
                  bundle.AddFiles("/global-styles.css");
              }
          );
          options.ScriptBundles.Configure(
              BasicThemeBundles.Scripts.Global,
              bundle =>
              {
                  bundle.AddFiles("/libs/sweetalert2/dist/sweetalert2.all.min.js");
                  bundle.AddFiles("/global.js");
              }
          );
      });
  }
  

  

  Save Cancel
• 

  0

  learnabp created 4 years ago

  I am getting the following error and i dont see the sweetalert2.all.min.js in the folder /libs/sweetalert2/dist/sweetalert2.all.min.js

  do i have to copy it in there manually?

  AbpException: Could not find the bundle file '/libs/sweetalert2/dist/sweetalert2.all.min.js' for the bundle 'Lepton.Global'!

  Save Cancel
• 

  0

  learnabp created 4 years ago

  i ran gulp and looks like its working

  Save Cancel
• 

  0

  learnabp created 4 years ago

  lot of things break when using SweetAlert2

  i am getting the folowing errors

  

  Save Cancel
• 

  0

  liangshiwei created 4 years ago

  Support Team Fullstack Developer

  I thinik this is no related to SweetAlert2

  

  Save Cancel
• 

  0

  learnabp created 4 years ago

  I am not trying to show you that error i am trying to show you the warnings i am getting

  Unknown Parameter closeOnEsc and Unknown Paramter buttons

  problem is with the way Confirm is implemented, i have tried to implement confirm see below

  var abp = abp || {};
  
  (function ($) {
      if (!sweetAlert || !$) {
          return;
      }
  
      /* DEFAULTS *************************************************/
  
      abp.libs = abp.libs || {};
      abp.libs.sweetAlert = {
          config: {
              'default': {
  
              },
              info: {
                  icon: 'info'
              },
              success: {
                  icon: 'success'
              },
              warn: {
                  icon: 'warning'
              },
              error: {
                  icon: 'error'
              },
              confirm: {
                  icon: 'warning',
                  title: 'Are you sure?',
                  showCancelButton: true,
                  confirmButtonText: "Yes",
                  cancelButtonText: "Cancel",
                  reverseButtons: true
                  //buttons: ['Cancel', 'Yes']
              }
          }
      };
  
      /* MESSAGE **************************************************/
  
      var showMessage = function (type, message, title) {
          if (!title) {
              title = message;
              message = undefined;
          }
  
          var opts = $.extend(
              {},
              abp.libs.sweetAlert.config['default'],
              abp.libs.sweetAlert.config[type],
              {
                  title: title,
                  html: message
              }
          );
  
          return $.Deferred(function ($dfd) {
              Swal.fire(opts).then(function () {
                  $dfd.resolve();
              });
          });
      };
  
      abp.message.info = function (message, title) {
          return showMessage('info', message, title);
      };
  
      abp.message.success = function (message, title) {
          return showMessage('success', message, title);
      };
  
      abp.message.warn = function (message, title) {
          return showMessage('warn', message, title);
      };
  
      abp.message.error = function (message, title) {
          return showMessage('error', message, title);
      };
  
      abp.message.confirm = function (message, titleOrCallback, callback) {
  
          var userOpts = {
              html: message
          };
  
          if ($.isFunction(titleOrCallback)) {
              //closeOnEsc = callback;
              callback = titleOrCallback;
          } else if (titleOrCallback) {
              userOpts.title = titleOrCallback;
          };
  
         // userOpts.closeOnEsc = closeOnEsc;
  
          var opts = $.extend(
              {},
              abp.libs.sweetAlert.config['default'],
              abp.libs.sweetAlert.config.confirm,
              userOpts
          );
  
          return $.Deferred(function ($dfd) {
              Swal.fire(opts).then(function (result) {
                  callback && callback(result.isConfirmed);
                  $dfd.resolve(result.isConfirmed);
              });
          });
      };
  
      abp.event.on('aburationInitialized', function () {
          var l = abp.localization.getResource('AbpUi');
  
          abp.libs.sweetAlert.config.confirm.title = l('AreYouSure');
          abp.libs.sweetAlert.config.confirm.buttons = [l('Cancel'), l('Yes')];
      });
  
  })(jQuery);
  

  Save Cancel
• 

  0

  liangshiwei created 4 years ago

  Support Team Fullstack Developer

  Hi,

  Seems it work for you. I will close the ticket, please open again if you still have problem.

  Save Cancel