ember-cli-flash

Published on Jul 19, 2015

ember-cli-flash lets you easily create and customize flash messages for your app.

Flash messages are useful for notifying users about things such as the effects of their actions. In this episode, our example is notification of a successful save.


Links

Code

$ ember install ember-cli-flash
//application/template.hbs
<div class="container">
  {{#each flashMessages.queue as |flash|}}
    {{flash-message flash=flash}}
  {{/each}}

  {{outlet}}
</div>
//tag/edit/controller.js
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    save: function(){
      this.get("model").save().then(()=>{
        this.transitionToRoute('tag.show');
        this.get('flashMessages').success('saved!')
      });
    },
  }
});

Transcript

Hey. Today we’re going to be talking about ember-cli-flash. ember-cli-flash is a very simple way to get flash messages up and going in your application, however it offers the flexibility to be able to customize them however you want. Let’s get started.

First, we’ll install the addon. Then in our tag.edit controller, we’ll get the flashMessages it’s been injected via service automatically and then call the success method, which will send a flash message with the success type. We’ll give it the output Tag Saved. Then we’ll go to our application template so it’s displayed on every page, and loop through our flash messages queue, and we’ll feed it into the default flash-message component. Let’s see this in action. We’ll edit a tag, save it, and there is our flash message.

success is one of the built-in convenience methods. But if you’re using Bootstrap, there’s also warning, info, and danger. Let’s look at those. You can see that it’s a different color. It’s yellow for warning, and then it’s blue for info, and then it’s red for danger. If we wanted to change how these were styled, we would need to use first the alert class, and then the class of alert- whatever the name is, in this case danger. From that point, we can change color, background-color, whatever we need to. I feel that this appropriately communicates danger, even though you might not actually want to ship something this garish to your users.

You may have noticed that this flash message has been sticking around longer than they have before. That’s because I set a configuration option. In this case, I did the (sticky: true) configuration, but there’s a plethora of other options that we can use. Let’s walk through some of the more common ones.

So timeout changes how long it stays there, in milliseconds. The default is 3 seconds, or 3000 milliseconds. priority is if you have multiple messages coming through, and you want some of them to be on top and others to be lower. sticky is what we used. Its default false, so it will disappear if you set it to true, then your timeout won’t make much of a difference. showProgress and extendedTimeout are somewhat advanced options if you want to either show a progress bar or do an animation. Both of those require some extra work.

There’s also two other options, the message and the type. Those are for when you’re adding a custom message that doesn’t fit in the four for Bootstrap or the five for Foundation. So in this example they’re adding one of type alpaca. Note that success is just a shortcut method for having “this is the message” and then the type of success.

If you want to further customize it, you can go to config/environment.js and then you can set defaults for things like sticky or timeout. And then you can use the service defaults to do things like add shortcut methods for custom types, and set the default type, and change where the service is injected to.

There’s even more customization available to you. For example, you can customize the flash message. So this is what we pasted in. You can make it more complicated. Here is one where it’s showing the progress bar.

So all in all, ember-cli-flash is a very good addon that allows you to create a flash in just a few lines of code, or you can spend a lot of time customizing it to look however you want. Thanks for watching.

Subscribe to our mailing list