My colleague Paul Thaden just posted Creating a Popup Message Box for Oracle JET Forms which uses Oracle JET's Offcanvas functionality. While not exactly "toast," that was my first thought when I saw it. I really like the toast/growl notification concept and have been wondering how to add this type of notification to an Oracle JET project. Let's take Paul's work and convert it into a growl-like (or toast) notification complete with timeout. We will start with this modified version of Paul's jsFiddle. This fiddle displays a notification message when you change the selected browser.
Paul already explained the whole inner-wrapper/outer-wrapper thing so I won't repeat it here. Mainly I want to focus on styling the oj-offcanvas-top element (named toast) so that it floats on the right side of the page and then disappears after a specified period of time. Here is the only CSS we need:
#toast {
/* Make the message look pretty */
border: 1px solid #0572ce;
box-shadow: 0 1px 3px #777;
/* set the location of the toast message */
left: auto;
right: 10px;
width: 200px;
/* z-index required to overlay oj form controls */
z-index: 1;
}
Next we refactor the ojSelect optionChange event handler from the prior jsFiddle to close the notification message after a specified interval:
var closeToast = function() {
return oj.OffcanvasUtils.close(toastOptions);
};
self.browserChangedHandler = function (event, data) {
if (data.option == "value") {
oj.OffcanvasUtils.open(toastOptions);
window.setTimeout(closeToast, 5*1000);
}
};
Here is the jsFiddle example. Select a browser and watch the message appear and then disappear.
That is nice for a "Transaction saved" type of message, but let's get dramatic and make this look like a real growl notification. With a little bit of CSS, we can turn that Offcanvas notification into something like this:
And here is the jsFiddle:
