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

9 Answer(s)

• 

  0

  ismcagdas created 3 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.

  Save Cancel
• 

  0

  daniela.buttner created 3 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

  Save Cancel
• 

  0

  ismcagdas created 3 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.

  Save Cancel
• 

  0

  daniela.buttner created 3 years ago

  Hi

  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

  Save Cancel
• 

  0

  ismcagdas created 3 years ago

  Support Team

  Hi,

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

  Save Cancel
• 

  0

  daniela.buttner created 3 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();
                      }
                  });
              };
  

  Save Cancel
• 

  0

  ismcagdas created 3 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;
              }
          }
  

  Save Cancel
• 

  0

  daniela.buttner created 3 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

  Save Cancel
• 

  0

  ismcagdas created 3 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.

  Save Cancel