In a situation where you want to clarify an element in a table, footnotes can be your solution.
Let’s kick off with a small example:
In this table, we select three lines on which we want to add additional information, called footnotes.
Underneath the table, the text fields show up where you can put the additional information.
In export this looks like:
In this case, we show how the logic for creating footnotes works.
The full code of the example above:
{% t= "land_t" default:"Land" %}
{% t= "buildings_t" default:"Buildings" %}
{% t= "fleet_t" default:"Fleet" %}
{% t= "intangible_fixed_assets_t" default:"Intangible fixed assets" %}
{% t= "financial_fixed_assets_t" default:"Financial fixed assets" %}
{% assign financial_statements_categories = "land;buildings;fleet;intangible_fixed_assets;financial_fixed_assets" | split:";" %}
{% assign vertical_total = 0 %}
{% assign footnotes_array = "" | split:";" %}
{% assign footnotes_array_index = 0 %}
{% assign roman_numbers = "i;ii;iii;iv;v;vi;vii;viii;ix;x;xi;xii;xiii;xiv;xv" | split:";" %}
<table class="usr-width-100">
<thead>
<tr>
<th class="usr-line-bottom"><b>Description</b></th>
<th class="usr-line-bottom usr-width-5"><b></b></th>
<th class="usr-line-bottom usr-width-5"><b></b></th>
<th class="usr-line-bottom usr-width-15 usr-align-right"><b>Amount</b></th>
</tr>
</thead>
<tbody>
{% for financial_statement_category in financial_statements_categories %}
{% capture financial_statement_category_t %}{{ financial_statement_category }}_t{% endcapture %}
<tr>
<td>{% t financial_statement_category_t %}</td>
<td>
{% ic %}{% input custom.[financial_statement_category].include as:boolean %}{% endic %}
{% if custom.[financial_statement_category].include == true %}
{% push financial_statement_category to:footnotes_array %}
{% endif %}
</td>
<td>
{% if custom.[financial_statement_category].include == true %}
({{ roman_numbers[footnotes_array_index] }})
{% assign footnotes_array_index = footnotes_array_index | plus:1 %}
{% endif %}
</td>
<td class="usr-align-right">{% input custom.[financial_statement_category].amount as:currency precision:2 placeholder:0 %}</td>
</tr>
{% assign vertical_total = vertical_total+custom.[financial_statement_category].amount %}
{% endfor %}
<tr>
<td></td>
<td></td>
<td></td>
<td class="usr-line-top usr-align-right"><b>{{ vertical_total | currency:2 }}</b></td>
</tr>
</tbody>
</table>
<p></p>
<table class="usr-width-100">
<thead></thead>
<tbody>
{% for footnote_category in footnotes_array %}
{% capture footnote_category_t %}{{ footnote_category }}_t{% endcapture %}
{% capture footnote_category_t_pl %}{% t footnote_category_t %}{% endcapture %}
{% capture footnote_category_placeholder %}Footnote for {{ footnote_category_t_pl | downcase }}{% endcapture %}
<tr>
<td class="usr-width-5">({{ roman_numbers[forloop.index0] }})</td>
<td>{% input custom.[footnote_category].description as:text placeholder:footnote_category_placeholder %}</td>
</tr>
{% endfor %}
</tbody>
</table>
At first, we create an empty array for the footnotes that need to be placed in the table.
{% assign footnotes_array = "" | split:";" %}
We also create an array with the roman numbers.
{% assign roman_numbers = "i;ii;iii;iv;v;vi;vii;viii;ix;x;xi;xii;xiii;xiv;xv" | split:";" %}
And a variable that tracks the index of the footnotes.
{% assign footnotes_array_index = 0 %}
In the next code snippet, we show the full logic for a line on the table.
{% for financial_statement_category in financial_statements_categories %}
{% capture financial_statement_category_t %}{{ financial_statement_category }}_t{% endcapture %}
<tr>
<td>{% t financial_statement_category_t %}</td>
<td>
{% ic %}{% input custom.[financial_statement_category].include as:boolean %}{% endic %}
{% if custom.[financial_statement_category].include == true %}
{% push financial_statement_category to:footnotes_array %}
{% endif %}
</td>
<td>
{% if custom.[financial_statement_category].include == true %}
({{ roman_numbers[footnotes_array_index] }})
{% assign footnotes_array_index = footnotes_array_index | plus:1 %}
{% endif %}
</td>
<td class="usr-align-right">{% input custom.[financial_statement_category].amount as:currency precision:2 placeholder:0 %}</td>
</tr>
{% assign vertical_total = vertical_total+custom.[financial_statement_category].amount %}
{% endfor %}
Some additional comments:
- The checkbox is placed between
{% ic %}tags, because we only need to print these in input view. - Once the boolean is selected, the category name is pushed to the footnotes array.
- If the footnote boolean is selected, then we need to show the roman number of the footnotes in the table. After we showed the footnote number, the index of the array is increased for the next number.
Here ends all the logic for the table with the input fields.
After the table, there is another table where the description fields for each footnote are shown. For this table, we need the following logic:
<thead></thead>
<tbody>
{% for footnote_category in footnotes_array %}
{% capture footnote_category_t %}{{ footnote_category }}_t{% endcapture %}
{% capture footnote_category_t_pl %}{% t footnote_category_t %}{% endcapture %}
{% capture footnote_category_placeholder %}Footnote for {{ footnote_category_t_pl | downcase }}{% endcapture %}
<tr>
<td class="usr-width-5">({{ roman_numbers[forloop.index0] }})</td>
<td>{% input custom.[footnote_category].description as:text placeholder:footnote_category_placeholder %}</td>
</tr>
{% endfor %}
</tbody>
We loop through the footnotes_array and for each item, there is a new row.
- In the row, you show the footnote number. We can use the forloop index for this.
- We capture the variable names for the translations to put in the placeholder.
- We show the row.