Capture HTML-table to use as the default text in an input tag

Templates
, , ,
1

Hey everyone

I have an HTML table that constructs a text with bullet-points and some other formatting. It also uses translation tags to make it usable in multiple languages. This is a firm-standard text, but we want to give users full customization options.

My idea was to put a capture around this table and than use that as the default in an input tag.
Using the capture works, but only if I print the capture. When used as a default I just get the raw HTML code but with the right translations.

Am I forgetting something or is it not possible to use a table in a default?

My code:

{% capture tax_section_3 %}
<table class="">
  <thead>
    <tr>
      <th class="">{% t "t2025_tax_section_3_3" %}</th>
    </tr>
  </thead><tbody></tbody>
</table>
<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-3 usr-align-right">•</th>
      <th class="usr-width-97">{% t "t2025_tax_section_3_4" %}</th>
    </tr>
  </thead><tbody></tbody>
</table>
<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-3 usr-align-right">•</th>
      <th class="usr-width-97">{% t "t2025_tax_section_3_5" %}</th>
    </tr>
  </thead><tbody></tbody>
</table><table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-3 usr-align-right">•</th>
      <th class="usr-width-97">{% t "t2025_tax_section_3_6" %}</th>
    </tr>
  </thead><tbody></tbody>
</table>
{:/group}

<table class="">
  <thead>
    <tr>
      <th class="">{% t "t2025_tax_section_3_7" %}</th>
    </tr>
  </thead><tbody></tbody>
</table>
<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-3 usr-align-right">•</th>
      <th class="usr-width-97">{% t "t2025_tax_section_3_8" %}</th>
    </tr>
  </thead><tbody></tbody>
</table>
<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-3 usr-align-right">•</th>
      <th class="usr-width-97">{% t "t2025_tax_section_3_9" %}</th>
    </tr>
  </thead><tbody></tbody>
</table>
{% endcapture %}

{{ tax_section_3 }}
{% input custom.tax_letter.tax_section_3 as:text localized:true default:tax_section_3 %}

Thanks for the help!

Jasper

2

Hi @Jasper

Thanks for the clear explanation and the code example.
It’s indeed not possible to have a whole HTML table captured and then used as a default in an input.
But there are other ways to give your users some customization options here, while still maintaining the structure of your HTML table.

You could introduce booleans or radiobuttons to give users the flexibility on whether they want to include an item or not.
You could also turn every bullet point into an input with default value.
And if you want to enable them to add more sections, you could achieve this with a fori.

Though in our experience, giving too many customization options often reduces the benefit that standardized texts could have brought. So really ask yourself if the customization is required. Also think about potential rollforward behaviour, should the data entered be copied to the next period, or do you wish to show the defaults again?

Just to give a quick example:

<table class="usr-width-100">
  <thead>
    <tr>
      {% ic %}
        <th class="usr-width-5">{% input custom.include_section.3_3 as:boolean default:true %}</th>
      {% endic %}
      <th>
        {% assign include_3_3 = custom.include_section.3_3 | default:true %}
        {% if include_3_3 == true %}
          {% input custom.content_section.3_3 as:text placeholder:"t2025_tax_section_3_3" %}
        {% else %}
          <font color="CCCCCC"><i>{% t "t2025_tax_section_3_3" %}</i></font>
        {% endif %}
      </th>
    </tr>
  </thead>
  <tbody>
    
    {% fori additional_section in custom.additional_sections %}
    <tr>
      {% ic %}<td></td>{% endic %}
      <td class="">{% input additional_section.content as:text placeholder:"Additional section" %}</td>
    </tr>
    {% endfori %}
    
  </tbody>
</table>

Hope that answered your question.
Kind regards
Romy