Css units blog

Flashing Message with Flask

Devesh Vishnoi's photo
Devesh Vishnoi
·

3 min read

sometimes on the website we see some temporary messages from the site when the user enters some details, here some examples are...

  • Their username or password was incorrect when trying to log in.
  • They searched for something, but no results were found.

you can see what I mean, these are commonly known as errors, alerts, messages Because it is so common that's why Flask comes with this functionality that simplifies the process of showing msg & errors. Its called flashing.

I have written small application to show you how to use flashing

How to flash messages

First, you have to import flash from flask the code has given below

from flask import flash, render_template

...

@app.route("/")
def home():
    flash("This is a flashed message.")
    return render_template("home.html")

The surprising thing to many is that calling flash() doesn't make your message show up on your template. It just adds the message to the message store.

Within your template, you must decide whether to consume the message store or not.

Let's take a look at the template that use the message store:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    {% for message in get_flashed_messages() %}
        <p>{{ message }}</p>
    {% endfor %}
  </body>
</html>

Now your website would just show the text This is a flashed message.

Flashing multiple messages

if you want to call flash() more than once 

@app.route("/")
def home():
    flash("This is a flashed message.")
    flash("Another message.")
    return render_template("home.html")

Then your template would show the two messages as separate paragraphs. Again, when you call get_flashed_messages() in your template, all messages in the store are retrieved. Then, they are deleted from the message store.

Sample scenario: login error

we have a login-user code with some flash message

@app.route("/login", methods=["GET", "POST"])
def login():
    if request.method == "POST":
        username = request.form.get("username")
        password = request.form.get("password")
        user = find_user(username)

        if user and password == user.password:
            return redirect("profile")
        else:
            flash("incorrect username or password.")
    return render_template("login.html")

You can see in that code that if the user doesn't exist, or if the password is not correct, we're flashing a message. Afterwards, we render the login.html template.

That means that our login.html template should be able to handle flashed messages if we want to show them.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .alert-error {
        padding: 8px;
        background-color: red;
        color: white;
      }
    </style>
  </head>
  <body>
    <h1>Flashing messages</h1>
    {% for message in get_flashed_messages() %}
      <div class="alert-error">Error: {{ message }}</div>
    {% endfor %}
  </body>
</html>

Note: login.html file does not consume the flash message or message store.

Wrapping up

That's really all there is to flashing messages in Flask! It's quite straightforward but makes our life very easy.

Thanks for reading, and I'll see you next time!

Flask FrameworkFlask