I have a Django/MySQl/bootsrap website where my view displays some boolean column values. Is there a way to display check mark and cross mark instead of showing TRUE or False? It can either be a .svg file or HTML code for check mark and cross. Any brilliant mind around has done the same?

Here is my code:

<tr class="table_content">
    <td>{{ sku.sku }}</td>
    <td>{{ sku.gsa }}</td>
    <td>{{ sku.service_category }}</td>
    <td>{{ sku.product_category }}</td>
    <td>{{ sku.product_description }}</td>
    <td>{{ sku.unit }}</td>
    <td>${{ sku.msrp }}</td>
    <td>${{ sku.channel_price }}</td>
    <td>{{ sku.volume_pricing }}</td>
    <td>{{ skuments_sku_description }}</td>
    <td>{{ sku.new_sku }}</td>
    <td>{{ sku.price_requested }}</td>
    <td>{{ sku.to_be_retired }}</td>
</tr>

The last 3 return boolean values. I am trying to display either a .svg file of checkmark and cross or simply html code for checkmark and cross.

I have a Django/MySQl/bootsrap website where my view displays some boolean column values. Is there a way to display check mark and cross mark instead of showing TRUE or False? It can either be a .svg file or HTML code for check mark and cross. Any brilliant mind around has done the same?

Here is my code:

<tr class="table_content">
    <td>{{ sku.sku }}</td>
    <td>{{ sku.gsa }}</td>
    <td>{{ sku.service_category }}</td>
    <td>{{ sku.product_category }}</td>
    <td>{{ sku.product_description }}</td>
    <td>{{ sku.unit }}</td>
    <td>${{ sku.msrp }}</td>
    <td>${{ sku.channel_price }}</td>
    <td>{{ sku.volume_pricing }}</td>
    <td>{{ sku.ments_sku_description }}</td>
    <td>{{ sku.new_sku }}</td>
    <td>{{ sku.price_requested }}</td>
    <td>{{ sku.to_be_retired }}</td>
</tr>

The last 3 return boolean values. I am trying to display either a .svg file of checkmark and cross or simply html code for checkmark and cross.

• javascript
• html
• django

3 Answers 3

On the html you can use the tick symbol in this unicode format ✔ result ✔

And also you can use the times symbol in this html format × result ×

Reference :

Tick symbol in HTML/XHTML

What is the proper HTML entity for the "x" in a dimension?

EDIT

Option 1 - works but it is not suggested

If {{ variable }} returns TRUE or FALSE you can check it with javascript

<td>
    <script type="text/javascript">
        if( "{{ variable }}" === "FALSE" ) {
            document.write("×");
        } else {
            document.write("✔");
        }
    </script>
</td>

The above option is NOT SUGGESTED. If you use it in a wrong way it will create problems and security holes (at least escape your strings).

Option 2 - better in this case (suggested)

In the Django template, check if true or false

<td>{% if variable == True %}&#10004;{% else %}&times;{% endif %}</td>

For more fancy icons check FontAwesome

EDIT 2:

For true/false variables also check tuky's answer, it is a cleaner solution.

I prefer to use the more concise yesno template filter (https://docs.djangoproject./en/2.2/ref/templates/builtins/#yesno):

<td>{{ variable|yesno:"✔,✘" }}</td>

It also supports an optional 3rd value that will be used, if variable is None.

{% if variable  %}
   <span class="fas fa-check-square"  style='font-size:24px;color:green'></span>
{% else %}
   <span  class="fas fa-window-close"  style='font-size:24px;color:red'></span>
{% endif %}