# CASE: Make fori better UX by introducing a button

**URL:** <https://community.silverfin.com/t/case-make-fori-better-ux-by-introducing-a-button/2588>\
**Category:** Cases\
**Tags:** fori\_loop\
**Created:** [October 13, 2025, 2:20pm UTC](https://community.silverfin.com/t/case-make-fori-better-ux-by-introducing-a-button/2588 "2025-10-13T14:20:07Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Michiel](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/michiel/32/2364_2.png) [@Michiel](https://community.silverfin.com/u/Michiel)\
**Post date:** [October 13, 2025, 2:20pm UTC](https://community.silverfin.com/t/case-make-fori-better-ux-by-introducing-a-button/2588/1 "2025-10-13T14:20:07Z")

</div>

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:

```auto
{% 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:

```auto
{% 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 %}

```

 ![Scherm­afbeelding 2025-10-13 om 14.26.46.png](https://canada1.discourse-cdn.com/flex030/uploads/getsilverfin/original/2X/1/1a8d079fca92a6d5e0ebcfb5320202b491c7095d.png)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:

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

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

```

 ![Scherm­afbeelding 2025-10-13 om 14.28.02.png](https://canada1.discourse-cdn.com/flex030/uploads/getsilverfin/original/2X/9/9847e551c93c292fc90077e4ab4ebb08d6fbfe13.png)Finally, this new functionality is also compatible with sorting. In this case, `manual:true` should be added to the `addnewinputs` tag as well:

```auto
{% 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 %}

```

---

<div class="post-metadata">

**Author:** ![emiperagine](https://avatars.discourse-cdn.com/v4/letter/e/e79b87/32.png) [@emiperagine](https://community.silverfin.com/u/emiperagine)\
**Post date:** [July 29, 2026, 12:46pm UTC](https://community.silverfin.com/t/case-make-fori-better-ux-by-introducing-a-button/2588/2 "2026-07-29T12:46:12Z")

</div>

Hi @Michiel!  
I would like to revisit this topic and ask you something about it.

I have the whole template developed now. In some parts, I’m using a manual fori, and I was wondering if there’s any way to hide the first row that contains the inputs and only display it when the user clicks **“Add Entry”**.

I’ve searched in community, but I couldn’t find any information about this.

Thanks in advance.

Kind regards,  
Emi

---

<div class="post-metadata">

**Author:** ![Delphine\_Demeulenaer](https://yyz2.discourse-cdn.com/flex030/user_avatar/community.silverfin.com/delphine_demeulenaer/32/2374_2.png) [@Delphine\_Demeulenaer](https://community.silverfin.com/u/Delphine_Demeulenaer)\
**Post date:** [July 30, 2026, 1:09pm UTC](https://community.silverfin.com/t/case-make-fori-better-ux-by-introducing-a-button/2588/3 "2026-07-30T13:09:07Z")

</div>

Hi @emiperagine!

Unfortunately it’s not yet possible to implement this UX behaviour in our code or templates.

Kind regards,

Delphine