How to Implement Growl Notifications for Permission Alerts
In this guide we'll walk through how to add growl notifications for our permission alerts. We already have our growl notification installed for basic notifications, however we need to update it in order to work for our permission based alerts.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

In this guide we'll walk through how to add growl notifications for our permission alerts. We already have our growl notification installed for basic notifications, however we need to update it in order to work for our permission based alerts.

Let's take a look at this in the browser. Login in as a regular user and try to edit a post that doesn't belong to you. The application redirects you to the home page, but doesn't give any notification.

To implement this feature, go to the application.html.erb file. Here, you can see the gritter JavaScript method that flashes a notice. In Rails flash is a hash object with three values - notice, alert and error. We need to cover all three options for our notifications to be shown properly.

If you refresh the browser, and access a post that was not created by the current user, you'll now see a growl notification.

large

So everything is working, however it's a bad practice to have so much code in a view file (especially conditional code), so we'll move the entire if-elsif-else block to a partial called _alerts.html.erb.

<!-- app/views/shared/_alerts.html.erb -->

<% if flash[:alert] %>
  <%= js add_gritter(flash[:alert], title: "Overtime App Alert", sticky: false) %>
<% elsif flash[:error] %>
  <%= js add_gritter(flash[:error], title: "Overtime App Error", sticky: false) %>
<% else %>
  <%= js add_gritter(flash[:notice], title: "Overtime App Notification", sticky: false) %>
<% end %>

And now we can call it from the main layout file like this:

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

<%= render 'shared/alerts' %>

If you check this out in the browser you'll see that everything is still working so our refactor was successful.

Resources