Adding Html and Jinja2 Templating

[ablashek]

I would ask to kindly consider adding an HTML / Jinja2 field type to Print Designer as is with the previous Document Designer. The level of flexibility given by this new tool is great and a step forward in the right directions, but a simple table doesn't give the same level of flexibility.

Possibly use cases: when user needs to loop through data and show them as wrapping components instead of row, or when user needs to show a timeline of activities.

If able to incorporate html, bootstrap, and jinja2 (or even js for that matter) the posibilities are endless in terms of design and will also reduce the burdon on the team to be consistently adding new features.

[maharshivpatel]

@ablashek jinja is already supported. #99 and #115

[ablashek]

Thanks @maharshivpatel , understood how to use jinja watching your video. But any chance on html?

[maharshivpatel]

@ablashek you can pass html string inside jinja and it works 🤫

[ablashek]

hi @maharshivpatel , can you give me an example of how to do this? Because i tried adding jinja2 as such:

{% for type, items in doc.raw_materials | groupby('type') %}
    {% set type_html = "<h5>" + type + "</h5>" %}
    {{ type_html | safe }}

    {% set container_start = '<div style="display: flex; flex-wrap: wrap; gap: 15px;">' %}
    {{ container_start | safe }}
    
    {% for item in items %}
        {% set item_html = '<div style="border: 1px solid #ccc; padding: 10px; width: 200px; text-align: center;">' %}
        {{ item_html | safe }}
        
        {% set img_html = '<img src="https://www.indopar.com.py' + item.image + '" alt="Image" style="object-fit: contain; height: 125px; width: 100%;">' %}
        {{ img_html | safe }}
        
        {% set content_html = '<div style="margin-top: 10px;"><strong>' + item.raw_material + '</strong><p>Cantidad: ' + item.quantity + '</p></div>' %}
        {{ content_html | safe }}
        
        {{ '</div>' | safe }}  {# Close item div #}
    {% endfor %}
    {{ '</div>' | safe }} {# Close container div #}
    
    {{ '<hr>' | safe }}
{% endfor %}]

But as soon as i leave focus it cleans up and reduces the amount of code. When I render it, I see nothing.
If you have a video tutorial or screenshot on how to implement, would be greatful. thanks!