Starts in:
2 DAYS
1 HR
3 MIN
59 SEC
Starts in:
2 D
1 H
3 M
59 S
Open Closed

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


User avatar
0
learnabp created

We want to embed a link in a userfriendlymessage message which is thrown in a AppService

how can we achive this?


9 Answer(s)
  • User Avatar
    0
    liangshiwei created
    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.

  • User Avatar
    0
    learnabp created

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

  • User Avatar
    0
    liangshiwei created
    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");
                }
            );
        });
    }
    

  • User Avatar
    0
    learnabp created

    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'!

  • User Avatar
    0
    learnabp created

    i ran gulp and looks like its working

  • User Avatar
    0
    learnabp created

    lot of things break when using SweetAlert2

    i am getting the folowing errors

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    I thinik this is no related to SweetAlert2

  • User Avatar
    0
    learnabp created

    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);
    
  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

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

Made with ❤️ on ABP v9.1.0-preview. Updated on November 20, 2024, 13:06