{"id":1438,"date":"2023-08-20T19:14:40","date_gmt":"2023-08-20T13:44:40","guid":{"rendered":"https:\/\/geekpython.in\/?p=1438"},"modified":"2024-03-01T17:08:24","modified_gmt":"2024-03-01T11:38:24","slug":"flash-messages-on-frontend-using-flask","status":"publish","type":"post","link":"https:\/\/geekpython.in\/flash-messages-on-frontend-using-flask","title":{"rendered":"How to Flash Messages on Frontend using Flask"},"content":{"rendered":"\n
Introduction<\/h1>\n\n\n\n
The Flask flash()<\/code> function is an efficient way to display temporary messages to the user. This can be used to display a variety of messages, including error, notification, warning, and status messages.<\/p>\n\n\n\n
By the end of this article, you’ll be able to learn:<\/p>\n\n\n\n
\n
How to use the flash()<\/code> function<\/li>\n\n\n\n
Flashing messages on the frontend<\/li>\n\n\n\n
Flashing messages with categories<\/li>\n\n\n\n
Filtering flash messages based on categories<\/li>\n\n\n\n
Best practices for effectively using flashed messages<\/li>\n<\/ul>\n\n\n\n
Prerequisites<\/strong><\/h1>\n\n\n\n
Before you dive into this tutorial on flashing messages with Flask, make sure you have a fundamental understanding of the following concepts:<\/p>\n\n\n\n
\n
Familiarity with Flask, including route handling, templates, and basic application structure.<\/li>\n\n\n\n
A basic understanding of HTML markup is necessary, as you’ll be working with HTML templates to render the flashed messages on the frontend.<\/li>\n\n\n\n
Understanding of Jinja2 templating engine, which is integrated with Flask for rendering dynamic content within HTML templates.<\/li>\n<\/ul>\n\n\n\n
How to Use<\/strong> flash() Method<\/h1>\n\n\n\n
As previously mentioned, the flash()<\/code> function is used to display messages to the users after the specific request is made. Its primary goal is to offer relevant feedback, which enhances the user experience.<\/p>\n\n\n\n
The flash()<\/code> function accepts two parameters:<\/p>\n\n\n\n
\n
message<\/code>: The message to display to the user.<\/li>\n\n\n\n
category<\/code>: Specifies the message category. This is an optional parameter.<\/li>\n<\/ul>\n\n\n\n
Using flash() within Flask App<\/h2>\n\n\n\n
This section describes how to integrate the message flashing functionality into the Flask application and display it on the frontend.<\/p>\n\n\n\n
Importing flash and other required modules<\/h3>\n\n\n\n
Create an app.py<\/code> file and import the flash<\/code> from flask<\/code>, along with other necessary modules, into the file.<\/p>\n\n\n\n
An instance of Flask<\/code> is created and stored within the app<\/code> variable to initialize the Flask application.<\/p>\n\n\n\n
The Flask application’s secret key is assigned as \"Sachin\"<\/code> using the secret_key<\/code> attribute of the app<\/code> object. This key will serve for session management.<\/p>\n\n\n\n
Note: It’s essential to store the secret key in a secure environment, rather than hardcoding it directly within the application.<\/p>\n\n\n\n
Implementing flash() Function within View Functions<\/h3>\n\n\n\n
@app.route(\"\/info\", methods=[\"GET\", \"POST\"])\ndef add_info():\n if request.method == \"POST\":\n name = request.form['name']\n profession = request.form['profession']\n\n if name == \"\" or profession == \"\":\n flash(\"Invalid: Every field is required.\")\n return redirect(url_for(\"add_info\"))\n else:\n flash(\"Success: Info added successfully.\")\n return redirect(url_for(\"add_info\"))\n return render_template(\"info.html\")<\/pre><\/div>\n\n\n\n
The route \"\/info\"<\/code> is created to manage both GET<\/code> and POST<\/code> requests, and it is linked to the add_info()<\/code> view function.<\/p>\n\n\n\n
Within the add_info()<\/code> view function, it checks whether the request is a POST<\/code> request, and then retrieves the values from the \"Name\"<\/code> and \"Profession\"<\/code> form fields.<\/p>\n\n\n\n
Following that, it examines if any of the fields are empty. If they are, a message \"Invalid: Every field is required.\"<\/code> is displayed using the flash()<\/code> function, and the route remains the same. Conversely, if none of the fields are empty, a message \"Success: Info added successfully.\"<\/code> is flashed using the flash()<\/code> function, and the route continues for further information input.<\/p>\n\n\n\n
However, this won’t immediately display the message on the frontend. To achieve that, you must use the get_flashed_messages()<\/code> function within the template.<\/p>\n\n\n\n
Implementing get_flashed_messages() Function within Message Template<\/h3>\n\n\n\n
Create a file named message.html<\/code> within the templates<\/strong> directory in your project.<\/p>\n\n\n\n
{% with msg = get_flashed_messages() %}\n{% if msg %}\n{% for message in msg %}\n<div class=\"alert alert-warning alert-dismissible fade show\" role=\"alert\">\n <strong>{{ message }}<\/strong>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\n<\/div>\n{% endfor %}\n{% endif %}\n{% endwith %}<\/pre><\/div>\n\n\n\n
The get_flashed_messages()<\/code> function retrieves the flashed messages and preserves them in the session. The function is invoked using the with<\/code> statement and its output is stored in the msg<\/code> variable.<\/p>\n\n\n\n
The {% if msg %}<\/code> statement evaluates whether any flashed messages are stored in the msg<\/code> variable. If such messages exist, the {% for message in msg %}<\/code> block iterates through each message and renders them using {{ message }}<\/code> within the Bootstrap alert component.<\/p>\n\n\n\n
Ultimately, the loop terminated using {% endfor %}<\/code>, the conditional block is terminated using {% endif %}<\/code>, and the with<\/code> statement block is terminated with {% endwith %}<\/code>.<\/p>\n\n\n\n
Now you can include the message template in any of your templates to display the messages.<\/p>\n\n\n\n
Preparing the Frontend<\/h3>\n\n\n\n
Create two HTML files in the templates<\/code> folder with the names base.html<\/code> and info.html<\/code>.<\/p>\n\n\n\n
base.html<\/strong><\/p>\n\n\n\n
This file will contain the basic HTML layout with Bootstrap CSS and JavaScript.<\/p>\n\n\n\n
When you execute the app.py<\/code> file and evaluate the frontend, you’ll observe flashed messages upon making requests.<\/p>\n\n\n\n
Here’s a preview of the application hosted on the 127.0.0.1:5000<\/code> server using the \"\/info\"<\/code> route.<\/p>\n\n\n\nFlask Webpage preview<\/figcaption><\/figure>\n\n\n\n
When submitting the form without completing the “Profession”<\/strong> field, the application displays the relevant flashed message.<\/p>\n\n\n\nInvalid message displayed<\/figcaption><\/figure>\n\n\n\n
When the form is submitted with all fields completed, the relevant message is displayed.<\/p>\n\n\n\nSuccess message displayed<\/figcaption><\/figure>\n\n\n\n
Flashing Messages with Categories<\/strong><\/h1>\n\n\n\n
Each message serves a unique purpose. Some aim to caution users, while others indicate successful task completion. Assigning categories to the messages makes them distinct from one another and provides a better user experience.<\/p>\n\n\n\n
The get_flashed_messages()<\/code> function offers a with_categories<\/code> parameter that can be set to True<\/code>. Doing so enables you to utilize the category assigned to the message in the flash()<\/code> function.<\/p>\n\n\n\n
Assigning Categories to the Messages<\/h3>\n\n\n\n
To assign categories, make use of the flash()<\/code> function. Adjust your add_info()<\/code> view function in the app.py<\/code> file as demonstrated in the following code:<\/p>\n\n\n\n
@app.route(\"\/info\", methods=[\"GET\", \"POST\"])\ndef add_info():\n if request.method == \"POST\":\n name = request.form['name']\n profession = request.form['profession']\n\n if name == \"\" or profession == \"\":\n flash(\"Invalid: Every field is required.\", \"danger\")\n return redirect(url_for(\"add_info\"))\n else:\n flash(\"Success: Info added successfully.\", \"success\")\n return redirect(url_for(\"add_info\"))\n return render_template(\"info.html\")<\/pre><\/div>\n\n\n\n
The categories danger<\/code> and success<\/code> are assigned to both messages. These categories correspond to Bootstrap CSS classes. Specifically, “danger”<\/strong> signifies errors, while “success”<\/strong> signifies successful completion.<\/p>\n\n\n\n
Retrieving Categories and Applying Styles<\/h3>\n\n\n\n
To utilize categories from flashed messages in templates, retrieve them using get_flashed_messages(with_category=True)<\/code> within the template. Then, iterate through them in a similar manner as you did with regular messages.<\/p>\n\n\n\n
Adjust your message.html<\/code> template by implementing the provided code as provided below:<\/p>\n\n\n\n
{% with msg = get_flashed_messages(with_categories=True) %}\n{% if msg %}\n{% for category, message in msg %}\n<div class=\"alert alert-{{ category }} alert-dismissible fade show\" role=\"alert\">\n <strong>{{ message }}<\/strong>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\n<\/div>\n{% endfor %}\n{% endif %}\n{% endwith %}<\/pre><\/div>\n\n\n\n
The categories are retrieved and utilized to apply specific CSS properties to the Bootstrap alert component, tailored to the respective request.<\/p>\n\n\n\n
With these changes in place, run the application again. You’ll observe messages being highlighted in varying colors that correspond to the specific request.<\/p>\n\n\n\n
The illustration below depicts how the message’s appearance differs between invalid and successful form submissions, respectively.<\/p>\n\n\n\nInvalid message highlighted with red<\/figcaption><\/figure>\n\n\n\nSuccess message highlighted with green<\/figcaption><\/figure>\n\n\n\n
Another Use Case of Categories<\/h3>\n\n\n\n
Categories could also serve as prefixes to messages, offering another practical application. Insert the provided attribute inside the <div><\/code> block of the Bootstrap alert component.<\/p>\n\n\n\n
The provided code will add the corresponding category as a prefix to the actual message. This will result in an appearance similar to what’s displayed in the image below.<\/p>\n\n\n\nUsed category as a prefix<\/figcaption><\/figure>\n\n\n\n
Filtering Flash Messages Based on Categories<\/strong><\/h1>\n\n\n\n
To filter messages based on categories, you can utilize the category_filter<\/code> parameter within the get_flashed_messages()<\/code> function in the template. This parameter accepts a list of message categories.<\/p>\n\n\n\n
Create a new file named filtered_message.html<\/code> within the templates folder. Then, insert the provided code snippet into this file.<\/p>\n\n\n\n
{% with error_msg = get_flashed_messages(category_filter=[\"danger\"]) %}\n{% if error_msg %}\n{% for message in error_msg %}\n<div class=\"alert alert-danger alert-dismissible fade show\" role=\"alert\">\n <strong>{{ message }}<\/strong>\n <button type=\"button\" class=\"btn-close\" data-bs-dismiss=\"alert\" aria-label=\"Close\"><\/button>\n<\/div>\n{% endfor %}\n{% endif %}\n{% endwith %}<\/pre><\/div>\n\n\n\n
The code snippet mentioned above retrieves and filters messages based on the “danger”<\/strong> category using get_flashed_messages(category_filter=[\"danger\"])<\/code>. If there are flashed messages matching this category, the code iterates through them and displays them when the relevant request is made.<\/p>\n\n\n\n
To display only messages with the “danger”<\/strong> category on the frontend, include the filtered_message.html<\/code> template within info.html<\/code>.<\/p>\n\n\n\n
Best Practices for Using Flashed Messages in Flask<\/strong><\/h1>\n\n\n\n
Flashed messages are highly valuable for enhancing the user experience through prompt feedback. To maximize their impact, it’s important to implement the following practices.<\/p>\n\n\n\n
\n
Provide clear and concise messages, and avoid displaying messages on every request to prevent overwhelming users.<\/li>\n\n\n\n
When presenting error messages, include instructions on how users can address the issue.<\/li>\n\n\n\n
Assign suitable categories to messages that accurately reflect their content and purpose.<\/li>\n\n\n\n
As flashed messages are temporary, consider adding a dismissal button to allow users to remove them once they are no longer needed.<\/li>\n\n\n\n
Refrain from revealing any sensitive details in messages, as this could potentially compromise the security of your application.<\/li>\n<\/ul>\n\n\n\n
Conclusion<\/h1>\n\n\n\n
Flashing messages on an application helps to notify users about some action performed, be it task completion, error, or warning. It enhances the user experience but only if it is used keeping in mind the best practices.<\/p>\n\n\n\n
In this article, the secret key is hardcoded in the application, which is not a good practice. Store sensitive details like secret keys within the protected environment and refrain from revealing them in messages.<\/p>\n\n\n\n
\n\n\n\n
\ud83c\udfc6Other articles you might be interested in if you liked this one<\/strong><\/p>\n\n\n\n
![\"Flask](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/image-7.png\")
![\"Invalid](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/image-6.png\")
![\"Success](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/image-4.png\")
![\"Invalid](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/image-3.png\")
![\"Success](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/image-2.png\")
![\"Used](\"https:\/\/geekpython.in\/wp-content\/uploads\/2023\/08\/image-1.png\")