CASE: Make fori better UX by introducing a button

[Michiel]

Until now, the fori tag would always show a new empty iteration at the bottom of the list. From now on, you can choose to display a “+” button instead, giving you more control over the user experience in your forms. You can also add text next to the button. This provides a cleaner layout and more flexibility in how you guide users through data entry.

Enabling this new feature is simple. By adding the new manual attribute to your fori tag, you can activate the functionality.
For example, if you’re building a fleet template where you want to list all cars:

{% fori item in custom.fleet manual:true %}
...
{% endfori %}

Next, you need to decide where to place the “+” button. It can be within or outside the fori structure.
The first row still behaves like a regular fori, but any additional rows must now be created manually.
Within the fori loop, you can use the newly introduced {% add_new_row_button %} tag inside a table cell. You can customize the button text using the text attribute, just don’t forget to define the translation as well:

{% fori car in custom.fleet manual:true %}
  <table class="usr-width-50 usr-bordered">
    <thead>
      <tr>
        <th colspan="2">{{ car.brand }} {{ car.type }}</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="">{% t "car_brand" %}</td>
        <td class="">{% input car.brand %}</td>
      </tr>
      <tr>
        <td class="">{% t "car_type" %}</td>
        <td class="">{% input car.type %}</td>
      </tr>
      <tr>
        <td class="">{% t "car_fuel" %}</td>
        <td class="">{% input car.fuel %}</td>
      </tr>
      <tr>
        <td class="">{% t "car_purchase_date" %}</td>
        <td class="">{% input car.purchase_date as:date %}</td>
      </tr>
      <tr>
        <td class="">{% t "car_price" %}</td>
        <td class="">{% input car.price as:currency %}</td>
      </tr>
      {% if forloop.last %}
        <tr>
          <td colspan="2">{% add_new_row_button text:'t_add' %}</td>
        </tr>
      {% endif %}
    </tbody>
  </table>
{% endfori %}

You can also place the button outside the fori.
In that case, the {% add_new_row_button %} tag must include the target attribute to indicate which collection it is linked to:

{% fori car in custom.fleet manual:true %}
...
{% endfori %}

{% add_new_row_button text:'t_add' target:custom.fleet %}

Finally, this new functionality is also compatible with sorting. In this case, manual:true should be added to the addnewinputs tag as well:

{% addnewinputs manual:true %}
  {% assign collection_sorted = custom.fleet | sort:'purchase_date' %}
{% endaddnewinputs %}

{% fori car in collection_sorted manual:true %}
   ...
{% endfori %}

{% add_new_row_button text:'t_add' target:custom.fleet %}