Our application is coming along nicely, however one component that is missing are notifications.

While creating a new post, if you click on the Save button without filling the date and rationale forms, no message is sent to the user. Even though this causes a server side error, users are not properly informed.

In this guide we are going to implement these notifications with the popular Growl styling pattern. These are similar to the notifications popularized by the Mac operating system.

Let's start by adding the gem. Go to your Gemfile and add this gem:

# Gemfile

gem "gritter", "1.2.0"

Next, run bundle to install it.

First we'll need to include a call to the gritter scripts from the master JavaScript file for our application. Open application.js and update it to look like the following:

// app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sprockets
//= require gritter
//= require jquery_ujs
//= require turbolinks
//= require_tree .

Next, open the application.css.scss file and include @import "gritter" on the fourth line.

Lastly, go to the master layout file and add in a JavaScript call:

<!-- app/views/layouts/application.html.erb -->

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <%= render 'shared/nav' %>
      <%= yield %>
    </div>
  </div>
</div>

<%= js add_gritter(flash[:notice], title: "Overtime App Notification", sticky: false) %>

Next, start the rails server and refresh your browser. You can now see the notifications.

The cool thing about Growl is that it allows you to have an image rendered inside the notification itself by adding a small piece of code to your javascript.

And this is how it looks in the browser.

You can choose to have an image or not, personally I usually opt to not have them, but I'll leave that decision completely up to you.

If you notice, the application doesn't give a notification when you don't fill in fields in the form. We'll fix this in next.

Resources

• Code at this stage