Notifications

One complicated concept that is introduced by Ember FW is Notifications. On the surface, this seems to be very simple in the end use case. Our notifications are the green or red pop up messages that happen throughout our apps whenever there is an error or sometimes even upon the success of a message. They are primarily for communication from the code to the user, sometimes they are used to display error or success messages, and other times simply to give a point of information to the user. These are for sending messages from the serverside to the clientside or vital information even in the Javascript code, but if the message needing to be sent to the user has to do with data invalidity on the model, we use FW Validations.

The complexity of this Notification system comes in that it is based on the interaction of a component (FwNotifications) for the locations of the notifications, and a service (Notifications) for the Javascript Handling of the actual errors. We must discuss each of these parts separately.

Handlebars - FwNotifications Component

The FwNotifications component is essentially a placeholder for where the notifications will appear. This component can be placed anywhere in the app, and it will display the notifications there. At its most basic, the FwNotifications component defines the outlet, which will be used by the Service to know where to place the actual notification. As an example, the fixed outlet would be defined by the following code:

<FwNotifications @outlet="fixed" />

For more information about the FwNotifications component, see the Ember FW API Docs. You may also need to at times checkout API Docs for FwNotification Component, which is a component used internally to FwNotifications for each individual notification.

Note: The outlet string will be picked up by the Notifications Service, so you must make note of whatever you call it. There are a few outlets that are defined by all our apps, which receive special styling in Ember FW, so you should be aware of them:

• global - this is defined for you in the application.hbs file. It is the bold red notification that appears above the FW Header. It is the main notification used for major breaking errors (such as a fw addon being undefined). This should never really be used to throw specific app errors, but is helpful to use to throw errors from the Framework Core.
• fixed - this should be also defined in the application.hbs file (if it isn't, then you should add it). This is styled so that it hovers above the page right below the navigation bar. This is the main notification outlet that our apps use.
• modal-top - This outlet has special styling to help with modals. It essentially functions the same way as the fixed outlet, except that you need to add the fw-notifications component with the outlet to each modal you use it in.

Javascript - Notifications Service

This service is the heart of the notifications, and it handles the rendering of notifications. In order to be able to use the notifications at all, you must inject the service in the following way:

import Route from '@ember/routing/route';
import {inject as service} from '@ember/service';

export default Route.extend({
     notifications: service(), // notifications will be available as a property

     // ... your other code
});

NOTE: this can only be used in an Ember object that has a container. This list includes routes, components, controllers, other services, etc.

To actually use this service, you will be calling methods upon the notifications service you just injected in the following way:

this.get('notifications').methodName(...);

The full details for what methods are available to be used in the Notifications service, as well as what their params are, can be found at the API docs for Notifications Service. You can find these methods under the "methods" heading. There are a few methods especially worthy of mention, however, because they are the methods that will be most used from this service, so make sure to especially check them out:

• showSuccess is a method that will use the success Boostrap styling (green border) to display a notification with the text you provide to the outlet you tell it to.
• showError is a method that will use the error Boostrap styling (red border) to display a notification with the text you provide to the outlet you tell it to.
• closeAllNotifications will close all of the notifications that have been sent to the outlet you pass in.

Error Util

One final note about FW Notifications in general is that we have created an error utility to make it easier to display messages from the server side, as well as making a clickable link for more information, using the FW Notifications System. Most of the time, when displaying network errors, this should be the default way you do it. This util is also described in the Ember FW Utils section, but to go directly to API docs to see how to implement it, click here.