Framework 7 notifications

Feature Request
#1

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.

#2

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');
     }
   });
#3

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

2 Likes