CASE: HTML Tables and shared parts in iXBRL

Templates Cases
, , , ,
1

If you have been working with reconciliations together with an iXBRL export, you may have found yourself “duplicating” code among them, especially when you need to display the same table in both places.
Now, with the introduction of HTML tables and shared parts to export files, there is a new way to approach your coding.

You can move the code that builds an HTML table from your reconciliation text into a shared part, and with some adjustments, use that same shared part in your export file. This way, if you ever need to make any changes, you only have to do so in 1 location: the shared part.

Let’s start with the original code from the reconciliation text. For example:

{% stripnewlines %}
<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-90"></th>
      <th class="usr-width-10">2022</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Revenue of the year
      </td>
      <td class="usr-align-right">
        {{ 1000 | currency:0 }}
      </td>
    </tr>
    <tr>
      <td>
        {% input custom.extra.description as:text %}
      </td>
      <td class="usr-align-right">
        {% input custom.extra.value as:currency precission:0 %}
      </td>
    </tr>
  </tbody>
</table>
{% endstripnewlines %}

You’ll need to make some adjustments to the code for it to be multifunctional.

Remove stripnewlines tags. Though we advised initially on wrapping HTML tables in stripnewlines tags, it’s no longer necessary as the whitespace issue has been resolved. This is important because iXBRL tagging relies on the fact that each new line represents a new tag.

Next you’ll want to create a variable that will determine whether the reconciliation or export version of your code will be executed. In this example we’ll use export_mode, so in your export file you will assign this variable to true, while in the template you’ll assign it to false.

{% assign export_mode = true %}

You can now use that variable to add the iXBRL tags, let’s say the tag for revenue is “Revenue”.

{% if export_mode %}Revenue{% endif %} {{ 1000 | currency:0 }}

If there’s a line that does not define a new tag in the iXBRL, you can add a pipe. An example would be a column header. By adding the pipe, Silverfin knows that whatever follows does not need to be wrapped in a tag.

<td>
 {% if export_mode %}|{% endif %} Revenue of the year
</td>

Because as:text inputs can contain any information, even code or HTML, it’s important to make sure any code inside it does not get executed. For that purpose you should add |* ... *| around any as:text inputs in your export.

<td>
 {% if export_mode %}|*{% endif %} 
   {% input custom.extra.description as:text %}
 {% if export_mode %}*|{% endif %}
</td>

On the topic of custom variables, you’ll need to update every custom to specify where it’s stored. This means adding period.reconciliations.[handle of the original template]
:brain: You’d also do this when sharing code between reconciliations.

<td>
 {% if export_mode %}|*{% endif %} 
   {% input period.reconciliation.recon_handle.custom.extra.description as:text %}
 {% if export_mode %}*|{% endif %}
</td>

Once all the following has been applied, the example code should look like this:

<table class="usr-width-100">
  <thead>
    <tr>
      <th class="usr-width-90"></th>
      <th class="usr-width-10">2022</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        {% if export_mode %}|{% endif %} Revenue of the year
      </td>
      <td class="usr-align-right">
        {% if export_mode %}Revenue{% endif %} {{ 1000 | currency:0 }}
      </td>
    </tr>
    <tr>
      <td>
        {% if export_mode %}|*{% endif %} 
          {% input period.reconciliation.recon_handle.custom.extra.description as:text %}
        {% if export_mode %}*|{% endif %}
      </td>
      <td class="usr-align-right">
        {% if export_mode %}|{% endif %} {% input period.reconciliation.recon_handle.custom.extra.value as:currency precission:0 %}
      </td>
    </tr>
  </tbody>
</table>

Let’s say you moved the code to a shared part called “shared_table”.

In the reconciliation text you need to include the following:

{% assign export_mode = false %}
{% include "shared/shared_table" %}

And this is how you include the shared part in your export file:

... # Previous code

   div
     {% assign export_mode = true %}
     {% include "shared/shared_table" indent:auto %}

:warning: Note that you need to include the table within your html element, e.g. div, and that indentation needs to be maintained.
By using indent:auto the code within the shared part will automatically receive the correct indentation.

Your export file still needs some additional prep to fully accommodate HTML tables.
All the CSS that is used in HTML tables, needs to be defined in your export file.
We’ve added example code to the Documentation (Export files in XBRL) to get you started.

If you’re not able to create a new shared part, reach out to your CSM, as this is a feature that needs to be switched on per environment.

1 Like