CASE: use persisted to hide parts of a loop

Templates Cases
, , ,
1

There might be some cases into where your fori-loop creates a whole range of inputs that need to be done, like below:

46
461155×556 23 KB

If you are like me, you’ll find the extra loop with all of its fields a little bit too much. I want to make the template a little less busy, and put extra emphasis that the first input is always needed to be filled in too.

By using the persisted method, I could make my template that way, that only the first field is visible. And only when information is filled in there, will it show all other fields, like this:

08
081150×401 14 KB

If nothing is filled, you’ll only see this:

37
37797×170 2.41 KB

As you can see, only one field is shown, and as a user you have no other option to fill it in.

You can make this work by using a persisted statement for all other fields, like this:

<table class="usr-width-100{% ic %} usr-bordered{% endic %}">
  <thead>
    <tr>
      <th class="usr-width-20 usr-line-bottom"><b>Name</b></th>
      <th class="usr-width-20 usr-line-bottom"></th>
      <th class="usr-line-bottom"></th>
    </tr>
  </thead>
  <tbody>
    {% fori comp in custom.companies %}
      <tr>
        <td>{% input comp.name %}</td>
        <td></td>
        <td></td>
      </tr>
      {% if comp.persisted %} {% comment %}all other fields will be shown depending on which the loop "exists" or not, and that is defined in the first input{% endcomment %}
      <tr>
        <td></td>
        <td>VAT number</td>
        <td>{% input comp.vat_nbr placeholder:"VAT nbr." %}</td>
      </tr>
      <tr>
        <td></td>
        <td>Street</td>
        <td>{% input comp.street placeholder:"Street" %}</td>
      </tr>
      <tr>
        <td></td>
        <td>Number</td>
        <td>{% input comp.nbr placeholder:"Number" %}</td>
      </tr>
      <tr>
        <td></td>
        <td>Postal code</td>
        <td>{% input comp.postal_code placeholder:"Postal code" %}  </td>
      </tr>
      <tr>
        <td></td>
        <td>City</td>
        <td>{% input comp.city placeholder:"City" %}</td>
      </tr>
      <tr>
        <td></td>
        <td>Country</td>
        <td>{% input comp.country placeholder:"Country" %}</td>
      </tr>
      {% endif %}
    {% endfori %}
  </tbody>
</table>

Actually, the persisted reads the same as if the loop exists or not. There are other ways to do this as well (checking on the input of the first object to see if it’s empty), but this is shorter though

Here’s another case as well:

This case has been updated on 03/10/2022 to include HTML tables.