Framework 7 notifications

I have started to play with FW7 and wanted to replicate the notifications you can add through AC but using the native style look that FW7 gives. I put together a small JS function and thought it might help others:
function f7not(type, title, subt, text) {
if (type == ‘success’) { var icon = ‘checkmark_alt’ }
else if (type == ‘warning’) { var icon = ‘alert’ }
else if (type == ‘danger’) { var icon = ‘close’ }
else if (type == ‘info’) { var icon = ‘info_round’ }
else { return false; }
var notWithButton = app.notification.create({
icon: icon,
title: title,
subtitle: subt,
text: text,
closeTimeout: 3000,
closeButton: true,
});
if (notWithButton.open()) { return true; }
return false;
}

For testing I set up a button with ‘open-with-button’ class to trigger it as follows:
$(’.open-with-button’).on(‘click’, function () {
var subt = ‘Success Notification’;
var text = ‘Yay! It worked.’;
var type = ‘success’;
var title = ‘Notification Center’
if (f7not(type, title, subt, text)) {
// notification successful
console.log(‘notification shown’);
} else {
// notification failed
console.log(‘notification failed’);
}
});

You can simply change the type to any of info, success, danger or warning. Then add your own title, subtitle, text.

@George it would be great if there were an FW7 notification element to allow dynamic data binding up SC completion or form submission etc.

Sorry it didn’t like the code formatting on the previous post:

      function f7not(type, title, subt, text) {
         if (type == 'success') { var icon = '<i class="icon f7-icons color-green">checkmark_alt</i>' }
         else if (type == 'warning') { var icon = '<i class="icon f7-icons color-orange">alert</i>' }
         else if (type == 'danger') { var icon = '<i class="icon f7-icons color-red">close</i>' }
         else if (type == 'info') { var icon = '<i class="icon f7-icons color-blue">info_round</i>' }
         else { return false; }
         var notWithButton = app.notification.create({
           icon: icon,
           title: title,
           subtitle: subt,
           text: text,
           closeTimeout: 3000,
           closeButton: true,
         });
         if (notWithButton.open()) { return true; }
         return false;
       }

   $('.open-with-button').on('click', function () {
     var subt = 'Success Notification';
     var text = 'Yay! It worked.';
     var type = 'success';
     var title = 'Notification Center'
     if (f7not(type, title, subt, text)) {
       // notification successful
       console.log('notification shown');
     } else {
       // notification failed
       console.log('notification failed');
     }
   });

this with many other missing components need to be added to wappler. like toasts and dialogs

1 Like