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

0

liangshiwei created 2 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.

0

learnabp created 2 years ago

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

0

liangshiwei created 2 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");
            }
        );
    });
}

0

learnabp created 2 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'!

0

learnabp created 2 years ago

i ran gulp and looks like its working

0

learnabp created 2 years ago

lot of things break when using SweetAlert2

i am getting the folowing errors

0

liangshiwei created 2 years ago

Support Team Fullstack Developer

I thinik this is no related to SweetAlert2

0

learnabp created 2 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);

0

liangshiwei created 2 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.

9 Answer(s)