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.

Community Page
Last updated: