Looking at pivotal tracker you can see that in this guide we're going to work through custom validations on forms. Now we are going to utilize a tool called gritter in order to make this possible and what gritter allows us to have is very cool looking growl-like notification so what this means is that in the top right hand side of the app that is where our alert messages are going to pop up so it can pop up and you can see that you'll say something like Oh you didn't put in all the correct form elements or you signed in successfully or any type of notification that you would typically expect to see. That is where you're going to have it. So I'm going to copy this clipboard and opening up Sublime Text, I'm going to open up the Gemfile come all the way down to the bottom paste that in.

gem 'gritter', ~> 1.2'

And while we're here I'm also going to come up and I'm just going to delete all these comments because I do not like these comments here. They're good for certain purposes. But they simply, in my mind, make me go slower because every time we come the page we have to scroll down further and we have to do things like that. So I'm going to get rid of these and we'll have a much better-looking gem file. That looks much better.

So now with all of this in place I'm going to come to the terminal and let's run

bundle install

This is going to be the first part of what's needed. Now one little note I want to give you one this one if you come to this page which I'll include in the show notes and you click on home page. This is going to redirect you to the gem creators home page which is not very helpful. It looks like it's some application in the Netherlands. So click on source code and that will pop you up here and you'll see the github page which has the full set of instructions. So this has the things like the locale so after we've run bundle install we can come down here and we can generate the locale.

rails g gritter:locale

This would be if you ever wanted to do something like use a different language or something like that. We're not going to do that but it's nice to know that it's there and we'll do it so that you'll have access to that in your github repository if you ever want to reference this because adding other languages is something that is relatively common. Next we're going to take those require gritter here and open the application.js file and we'll put this right under cocoon

and that's all we need right there. And now we need to require gritter in our CSS files. Now we're using SCSS so we're going to do it a little bit differently. But let's open up sublime and let's open up all three of our SCSS layout files so application.scss, blogs.scss, and portfolios.scss and add @import "gritter"; import statements to each file. Because we are going to need these available across all layouts. So now that we have that, they say that that's it. Well, that's kind of it's not everything we still need to actually integrate it into the code but that's everything we need in order to install it. So the next thing that we're going to do is we're going to create a partial for storing these and I'm going to create kind of a dead simple explanation or a dead simple integration first and we can look at refactoring later. So coming to shared, create a new file here and I'm going to call this alerts.html.erb.

And right here what we're going to do is we're going to say <% if flash[:alert] %> and because of this syntax you might have already guessed that this is going to call the flash param. So that is another thing that we have in the background inside of the session as a user is navigating around is if something happens like they signed in or something like that then the flash is going to be set. And if you want to take a look at this you could look at portfolios_controller.rb and see where we're setting this notice.

So we have a couple notices what these are they are going to go into the flash param and there's going to be something called Flash notice and this value's going to be stored in it. That is how Rails from a data flow perspective can send a notice from one page to another page. So that's kind of a handy piece of information to know. And we're going to from here. Place a few conditionals and looking at the documentation you can keep scrolling down and you can see that we have a few items that we could use so this add gritter looks promising. And this will kind of work but not exactly how we need it. I use gritter a lot and so there are some things where going through it through the years I know there's a little bit of a difference than the documentation. So another reason why I wanted to use it in this course was so that you had it because the documentation is a little bit off. I think that maybe it hasn't updated in a while. So I'm going to say <%= js add_gritter and we're going to say this is for flash :alert so we're going to pipe this in. We don't want to hardcode this value. We want to make the value be whatever the alert is so going here

this is a notice not an alert but going right here. What this is essentially saying is your portfolio items now live. We're taking this content and we're dumping it in right here by saying flash[:alert]. And then we can also add a title now this syntax is an old Ruby way of applying this we can clean it up here and we can just put your name so you could put your name title: "Jordan Hudgens Portfolio", or you could leave it completely blank. And I'll show you where this is going to pop up. This is going to pop up as a title and then underneath, it's going to have this information. So I'm going to copy this. And paste something thats not going to be another if, it's going to be an elsif. And this one's going to be for :error and this one is going to be right here and you may notice we have some pretty similar code here so that is something that I'm going to show you exactly what kind of plan I have for this. But for right now I just want to get it working. So I'm going to say else and this one is going to take care of :notice.

<% if flash[:alert] %>
  <%= js add_gritter(flash[:alert], title: "Jordan Hudgens Portfolio") %>
<% elsif flash[:error] %>
  <%= js add_gritter(flash[:error], title: "Jordan Hudgens Portfolio") %>
<% else %>
  <%= js add_gritter(flash[:notice], title: "Jordan Hudgens Portfolio") %>
<% end %>

These are the main hash items and options that you're going to be dealing with. Alert, error and notice. So these are the ones that we want coverage for.

Now if I come to application.html.erb were going to have to populate this on all of them (all the layout files). Right now let's just do it in the main one. And this is javascript code so it doesn't really matter where it goes but it's a good idea to put on the bottom so I'm going to say

<%= render 'shared/alerts' %>

Now let's start up the rails server

rails s

and let's see if this is working. So what we should see and this should only be on the application site, is it should now give us a little alert up here. So if I hit log out. This should take us to the sign in page and give us what we need. And look at that. Signed out successfully, Jordan Hudgens portfolio signed out successfully with this little alert up there. And as of right now this is going to fade away. So that is pretty cool. That is a javascript alert that is giving us exactly what we are looking for.

Now there are a few other items that I usually pass in and we'll pass them in right here. Such as saying sticky: false just to make sure that those items don't stick and we could even customize this even further if you come into the documentation you can see that we have things like sticky this would mean that the notification would be sticky and wouldn't go away unless someone clicked it or you had some other action that popped up you also can control the time so the time, this can be an interesting one to do so let's say that for some reason you wanted to extend this out I wouldn't recommend it but if you wanted to you could say time: 10000 milliseconds, which stands for 10 seconds. So now if we come in and log into the site you can see this pops up, as you hover over, it also has a cool white background now notice that it stays for a longer period of time and that may or may not be the behavior that you're looking for. I personally am not a huge fan of it. I just go with the default so, that is what we're going to go with and for right now this is what I need.

<% if flash[:alert] %>
  <%= js add_gritter(flash[:alert], title: "Jordan Hudgens Portfolio", sticky: false) %>
<% elsif flash[:error] %>
  <%= js add_gritter(flash[:error], title: "Jordan Hudgens Portfolio", sticky: false) %>
<% else %>
  <%= js add_gritter(flash[:notice], title: "Jordan Hudgens Portfolio", sticky: false) %>
<% end %>

We're going to refactor this because you can see how this is almost identical code which would be a bad practice to keep it just like this. But for right now let's let's keep it here until we have completely refactored and performed the full implementation. Because so far this seems like it may work. But now if I come up to say the blog. And click write a new blog if I click submit notice how this brings up all of these errors right here.

That is not exactly what I am looking to do. I would much rather have gritter pop this up instead of having it here I think that's a better user experience. So let's come in to our blogs/_form.html.erb. And you can see that we have this big old giant conditional. I'm going to get rid of almost all of this so I'm going to say just get rid of all this stuff here

(Jordan deleted all of the highlighted code)
and now will say that. <% if blog.errors.any? %> which essentially means if there are any blogs then I want you to do blog.errors and the reason why you check for any is because you wouldn't want to call this unless there were errors and then we'll say full_messages.each do |error| and create a block here. So all we're essentially saying is if there are any errors I want you to do everything inside of this block for as many errors as there are so let's come here grab our alert and let's populate it inside and this one is not going to be flash[:alert] instead it's just to be the error and then this should be all we need.

So let's test this out. So now if I hit refresh. And come to write a new blog post and try to submit this. There we go, Title can't be blank. Body can't be blank. So that is working nicely. And so now what we can do is let's copy this

<% if blog.errors.any? %>
  <% blog.errors.full_messages.each do |error| %>
    <%= js add_gritter(error, title: "Jordan Hudgens Portfolio", sticky: false) %>
  <% end %>
<% end %>

and go to our portfolios/_form.html.erb. And right now we don't have any validations because I'm not sure if I said it or if I just thought it but we were planning on implementing this later. So it makes more sense to just do it like this.

And now if I come to the portfolio. Go to new and save portfolio item, title can be blank, body can't be blank. And so title and body are both required. So that is exactly what we're looking for if I come here press log out. I have signed out successfully. All of that is looking beautiful. Lets type

git status

we did a decent amount of changes here.

git add .

then we'll say

git commit -m "Implemented gritter for notifications"

git push origin forms

and this is going to be everything that we need here.

Now in the next guide we're going to take a little bit of a step back and see what we can do to clean this code up because if you're feeling a little bit icky because we have all of this code that looks very very similar then that is a good thing for your coding spidey senses because what we have here is very buggy because imagine that we have to change the title here. We're going to have to go and change it right now in five places and that would be a horrible way of coding so we're going to walk through how we can clean this up and make a much better implementation. So I will see you in that guide.

Resources

• Source Code
• Gritter Gem