Template filters in Flask - Mini Project: Build & Apply

Using Template Filters in Flask

📖 Scenario: You are building a simple Flask web app that shows a list of product prices. You want to display the prices formatted as currency in the HTML page.

🎯 Goal: Create a Flask app with a custom template filter called currency that formats numbers as prices with a dollar sign and two decimals. Use this filter in the HTML template to show the product prices nicely.

📋 What You'll Learn

Create a Flask app with a dictionary called products containing product names and prices.

Add a custom template filter named currency that formats a number as a string with a dollar sign and two decimal places.

Use the currency filter in the Jinja2 template to display each product's price.

Render the template with the products dictionary passed in.

💡 Why This Matters

🌍 Real World

Formatting prices nicely on web pages is common in online stores and dashboards.

💼 Career

Knowing how to create and use custom template filters in Flask helps build clean, reusable UI components.

1

Create the products dictionary

Create a dictionary called products with these exact entries: 'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2.

Flask

# Create the products dictionary
# Your code here

Hint

Use curly braces to create a dictionary with the exact keys and values.

2

Add the currency template filter

Create a Flask app instance called app. Then add a template filter named currency using the @app.template_filter('currency') decorator. The filter function should take a number and return a string formatted as a dollar sign followed by the number with two decimals (e.g., '$0.50').

Flask

products = {'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2}

# Create Flask app and add currency filter
# Your code here

Hint

Use @app.template_filter('currency') above your function to register the filter.

3

Create the HTML template using the currency filter

Create a Jinja2 template string called template that loops over products.items() with variables name and price. Inside the loop, display the product name and the price filtered with |currency. Use an unordered list <ul> and list items <li>.

Flask

from flask import Flask

products = {'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2}

app = Flask(__name__)

@app.template_filter('currency')
def currency_filter(value):
    return f"${value:.2f}"

# Create a template string with a for loop using products.items()
# Your code here

Hint

Use Jinja2 syntax with {% for %} and {{ }} to loop and display values.

4

Render the template with products in a route

Add a route @app.route('/') with a function index() that returns app.jinja_env.from_string(template).render(products=products) to render the template with the products dictionary.

Flask

from flask import Flask

products = {'Apple': 0.5, 'Banana': 0.3, 'Cherry': 0.2}

app = Flask(__name__)

@app.template_filter('currency')
def currency_filter(value):
    return f"${value:.2f}"

template = '''

{% for name, price in products.items() %}
  {{ name }}: {{ price|currency }}
{% endfor %}

'''

# Add a route '/' that renders the template with products
# Your code here

Hint

Use @app.route('/') to create the home page and render the template string with products.

Practice

1. What does the | upper filter do in a Flask template?

easy

A. Truncates the text to a specified length

B. Rounds a number to the nearest integer

C. Formats a date to a readable string

D. Converts the text to uppercase letters

Solution

1. Step 1: Understand the purpose of the upper filter

   The upper filter changes all letters in a string to uppercase.

2. Step 2: Compare with other filters

   Other filters like round, truncate, and date formatting do different tasks unrelated to letter case.

3. Final Answer:

   Converts the text to uppercase letters -> Option D

4. Quick Check:

   upper = uppercase text [OK]

Hint: Remember: upper means all caps text [OK]

Common Mistakes:

• Confusing upper with round or truncate
• Thinking upper formats dates
• Using upper on numbers expecting rounding

2. Which of the following is the correct syntax to apply the round filter to a variable price in a Flask template?

easy

A. {{ price | round(2) }}

B. {{ round(price, 2) }}

C. {{ price.round(2) }}

D. {{ price | round:2 }}

Solution

1. Step 1: Recall Flask template filter syntax

   Filters are applied using the pipe symbol | followed by the filter name and optional arguments in parentheses.

2. Step 2: Identify the correct syntax for round

   The correct syntax is {{ price | round(2) }}. Other options either misuse method call syntax or wrong separator.

3. Final Answer:

   {{ price | round(2) }} -> Option A

4. Quick Check:

   Filter syntax uses pipe and parentheses [OK]

Hint: Use pipe (|) then filter name with parentheses [OK]

Common Mistakes:

• Using dot notation like a method call
• Using colon instead of parentheses for arguments
• Calling Python functions directly inside templates

3. Given this Flask template snippet:

{{ 'hello world' | truncate(8) }}

What will be the output rendered on the webpage?

medium

A. hello w

B. hello wo...

C. hello worl

D. hello world

Solution

1. Step 1: Understand the truncate filter behavior

   The truncate(8) filter shortens the string to 8 characters including the ellipsis ....

2. Step 2: Calculate the truncated output

   It keeps 5 characters from the original string and adds ... to make total length 8: "hello wo" + "..." = "hello wo...".

3. Final Answer:

   hello wo... -> Option B

4. Quick Check:

   truncate(8) = 5 chars + ... [OK]

Hint: truncate(n) includes ... in total length n [OK]

Common Mistakes:

• Ignoring the ellipsis length
• Assuming truncate cuts exactly n characters
• Confusing truncate with slice or substring

4. What is wrong with this Flask template code?

{{ username | upper() }}

It causes an error when rendering. Why?

medium

A. The variable username must be a number for upper

B. The upper filter does not exist in Flask

C. Filters should not have parentheses when no arguments are passed

D. The pipe symbol | is missing

Solution

1. Step 1: Check filter usage syntax

   Filters without arguments should be used without parentheses, like {{ username | upper }}.

2. Step 2: Identify the cause of error

   Using parentheses without arguments causes a syntax error in Flask templates.

3. Final Answer:

   Filters should not have parentheses when no arguments are passed -> Option C

4. Quick Check:

   No parentheses for no-arg filters [OK]

Hint: No parentheses for filters without arguments [OK]

Common Mistakes:

• Adding empty parentheses to filters
• Thinking all filters require parentheses
• Confusing filters with Python function calls

5. You want to display a date variable post_date in your Flask template as "April 05, 2024". Which filter usage is correct to achieve this format?

hard

A. {{ post_date | date('%B %d, %Y') }}

B. {{ post_date | format_date('MMMM dd, yyyy') }}

C. {{ post_date | datetime('%B %d, %Y') }}

D. {{ post_date | strftime('%B %d, %Y') }}

Solution

1. Step 1: Identify the correct Flask template filter for date formatting

   The date filter formats dates using Python's strftime format codes.

2. Step 2: Match the format string to desired output

   The format '%B %d, %Y' produces "April 05, 2024". Other options use incorrect filter names or format styles.

3. Final Answer:

   {{ post_date | date('%B %d, %Y') }} -> Option A

4. Quick Check:

   Date filter + strftime format = {{ post_date | date('%B %d, %Y') }} [OK]

Hint: Use date filter with Python strftime format [OK]

Common Mistakes:

• Using non-existent filters like format_date
• Confusing JavaScript date formats with Python
• Using strftime filter which Flask does not provide