How can we open a modal dialog by link/url in notifications #10297 | Support Center

daniela.buttner created 5 years ago

Hi there is a possibility to link/open to a modal dialog about a notification, like the url-link? (https://support.aspnetzero.com/QA/Questions/7492/How-can-we-add-URL-in-notifications-using-backend-c)

For example to open the "Change password" dialog by link about notifications.

We use Version 10.3 with MVC/.net 5

Regards

9 Answer(s)

0

ismcagdas created 5 years ago
Support Team

Hi,

Notification click event is defined here https://github.com/aspnetzero/aspnet-zero-core/blob/dev/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Mvc/wwwroot/Common/Scripts/appUserNotificationHelper.js#L67. So, you can place your logic here and open a modal.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

daniela.buttner created 5 years ago

Hi

okay thats fine (maybe) but when is fire this event? In my scenarios doesn't fire when I click on a notification.

Regrads

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0

ismcagdas created 5 years ago
Support Team

Hi @daniela.buttner

I just tested with latest version and it seems to be working. Does the click event of notification work for existing notification types ? For example when you click "download my data" on user menu, a notification should be displayed and cliclink it should download a zip file.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

daniela.buttner created 5 years ago

Yes for existing notification types the click works fine, with the notifictions like open a modal service it work the open only when is build the notifications, then open the modal window. This is my getURL code, the last case is only the example to work normal (App.WelcomeToTheApplication)

function getUrl(userNotification) {
                switch (userNotification.notification.notificationName) {
                    case 'App.NewUserRegistered':
                        return '/App/users?filterText=' + userNotification.notification.data.properties.emailAddress;
                    case 'App.NewTenantRegistered':
                        return '/App/tenants?filterText=' + userNotification.notification.data.properties.tenancyName;
                    case 'App.GdprDataPrepared':
                        return '/File/DownloadBinaryFile?id=' + userNotification.notification.data.properties.binaryObjectId + '&contentType=application/zip&fileName=collectedData.zip';
                    case 'App.DownloadInvalidImportUsers':
                        return '/File/DownloadTempFile?fileToken=' + userNotification.notification.data.properties.fileToken + '&fileType=' + userNotification.notification.data.properties.fileType + '&fileName=' + userNotification.notification.data.properties.fileName;
                        //Add your custom notification names to navigate to a URL when user clicks to a notification.
                    case 'App.NewVersionAvailable':                        
                        return openReleaseNotesModal;
                    case 'App.WelcomeToTheApplication':
                        return '/App/users?filterText=' + userNotification.notification.data.properties.emailAddress;
                }

                //No url for this notification
                return '#';
            };

The 'App.NewVersionAvailable' case is my request for open a Modal Window the code for this is:

var openReleaseNotesModal = function () {
                new app.ModalManager({
                    viewUrl: abp.appPath + 'App/Profile/ReleaseNotesModal',
                    scriptUrl: abp.appPath + 'view-resources/Areas/App/Views/Profile/_ReleaseNotesModal.js',
                    modalClass: 'ReleaseNotesModal'
                });
            };

and when I add '.open()' then will open this initially.

Thanks Regards

0

ismcagdas created 5 years ago
Support Team

Hi,

Could you also share your show function in Scripts/appUserNotificationHelper.js ?

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

daniela.buttner created 5 years ago

Hi my "show" code is orginal.

var show = function (userNotification) {                
                //Application notification
                abp.notifications.showUiNotifyForUserNotification(userNotification, {
                    'onclick': function () {
                        //Take action when user clicks to live toastr notification
                        var url = getUrl(userNotification);                        
                        if (url) {
                            location.href = url;
                        }
                    }
                });

                //Desktop notification
                Push.create("Badger", {
                    body: format(userNotification).text,
                    //icon: abp.appPath + 'Common/Images/app-logo-small.svg',
                    icon: abp.appPath + 'Common/Images/inSight_Logo_Side_With_N3.png',
                    timeout: 6000,
                    onClick: function () {
                        window.focus();
                        this.close();
                    }
                });
            };

ismcagdas created 5 years ago

Support Team

Hi,

As I can see, onclick event is not modified. You should modify it something like below;

'onclick': function () {
            //Take action when user clicks to live toastr notification
            var url = getUrl(userNotification);
            if(url === 'URL OF App.NewVersionAvailable'){
                // Open modal here...
                return;
            }
            if (url) {
                location.href = url;
            }
        }

0

daniela.buttner created 5 years ago

Hi

I would like to take up this topic again. I read your comment in your last statment "//Take action when user clicks to live toastr notification" My intension is the link in the notification list not on the toast. I can link to a side but not open a modal popup.

Can you look please again. Regards

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)
0
ismcagdas created 5 years ago
Support Team
Hi @daniela.buttner

In that case, you can handle click event using jQuery. Something like this should work;

$('#header_notification_bar .navi-text a').click(function(){ });

I assume you want to handle click event of a link in the notification text.

Markdown is supported

Copy & paste or drag & drop images (max 30 MB per image)

Have an answer to this question? Log in and write your answer.