As shown in this case (CASE: create navigation headers), it’s very useful to add navigation headers to the top of your reconciliation templates to quickly jump to other reconciliations in the same workflow.
A similar table can be created by using an HTML table. In the example below, you can see the following specific code to get the result:
* Class usr-bordered is added to the table tag in order to show all borders
* Since we want a grey background, we put the navigation bar in the thead. An empty tbody tag is added as it’s always required to have a tbody
{% comment %}Navigation Header{% endcomment %}
{% assign header_array = "Short term debts;short_term_debts|Long term debts;long_term_debts|Equity;equity" | split:"|" %}
{% ic %}
{% stripnewlines %}
<table class="usr-width-100 usr-bordered">
<thead>
<tr>
<th class="usr-align-center usr-line-top usr-line-bottom usr-line-right usr-line-left usr-width-20">
{% linkto period.reconciliations.balance_sheet %}Balance sheet{% endlinkto %}
</th>
{% for template in header_array %}
{% assign parts = template | split:";" %}
{% assign template_name = parts[0] %}
{% assign template_handle = parts[1] %}
<th class="usr-align-center usr-line-top usr-line-bottom usr-line-right usr-line-left usr-width-20">
{%if template_handle == current_reconciliation.handle %}
<b>{{ template_name }}</b>
{%else%}
{% linkto period.reconciliations.[template_handle] %}
{{ template_name }}
{% endlinkto %}
{% endif %}
</th>
{% endfor %}
<th class="usr-align-center usr-line-top usr-line-bottom usr-line-right usr-line-left usr-width-20">
{% linkto period.reconciliations.income_statement %}Income statement{% endlinkto %}
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
{% endstripnewlines %}
{% endic %}
Output:
