Better rendering of checkbox selection

Use "Yes"/"No" with icons

Author: theskumar

hypha/apply/stream_forms/blocks.py

@@ -188,6 +188,7 @@ class CheckboxFieldBlock(OptionalFormFieldBlock):
     class Meta:
         label = _("Checkbox field")
         icon = "tick-inverse"
+        template = "stream_forms/render_checkbox_field.html"
 
     def get_searchable_content(self, value, data):
         return None

hypha/apply/stream_forms/templates/stream_forms/render_checkbox_field.html

@@ -0,0 +1,16 @@
+{% extends "stream_forms/render_field.html" %}
+{% load heroicons i18n %}
+
+{% block data_display %}
+    <span class="flex gap-2 items-center">
+        {% if data == "True" %}
+            {% heroicon_outline "check-circle" class="size-5 stroke-success" aria_hidden=true %}
+            {% trans "Yes" %}
+        {% elif data == "False" %}
+            {% heroicon_outline "x-circle" class="size-5 stroke-error" aria_hidden=true %}
+            {% trans "Yes" %}
+        {% else %}
+            No selection
+        {% endif %}
+    </span>
+{% endblock %}