Repeater with validation when updating rows (no empty fields allowed)

Hi all!

I am trying to create a repeater in which rows are editable but cannot be left empty and you can save them using a “Save” button which is outside of the repeater.

There are three stages:

1 - you see the table

2 - you click on edit and you can change the values:

3 - when you hit “save” it should hide the edit fields and update the value. However, if one of the field is left blank, it should show an error message:

I managed to get it working if I edit one row at a time, and I did so creating variables for the 2 fields that I am editing (the validation is done on these global variables).

But this does not work when I want to edit and then save more than one row at one time.

Does anyone know how I can solve the issue?

Here is the file: Repeater with save button outside.rp (60.4 KB)

Thanks!

@cristina,

Like most things in Axure, there are several ways this could be solved. I’m not sure why you need explicit EDIT and SAVE buttons–why not allow direct editing when you click on any cell and direct saving when it loses focus? That aside, keeping your current setup, you can allow editing and saving multiple rows by having each row take care of itself, flagging and clearing its own errors. You don’t need to use any global variables.

One solution is shown on Page 1 of this updated rp file:
Repeater with save button outside.rp (84.1 KB)

To help me test this while designing it, I created some styles for “normal” and “edit mode” so I could more easily see which rows were being edited. I also added “cell error” styles to better indicate which field(s) the error message refers. It seemed weird to have the number jump over to the left when editing (Edit group shown), so kept it centered, but bold on a gray background. Likewise, the Edit button has same gray when it is clicked. This also helps demonstrate the use of the Edit buttons as toggle buttons–they are selected (“on”) when clicked, putting that row into “edit mode”. When the SAVE button is clicked, it hides the error message (so kind of assumes there are no errors–or blank cells) and then deselects the “Edit button” widget (toggling it off). Because it is in a repeater, each and every instance of “Edit button” is set to the deselected state. If it is already deselected, nothing happens. But, if it is selected (meaning it is in edit mode) it tests the values of the text input fields (edit_number_1 and edit_number_2) with three Case statements:

  • Case 0 (success): If both fields are not blank, hide the cell error visuals and update the cell values
  • Case 1 : If column 1 is blank, “throw an error” by showing the message and error visuals for this cell, and keeping it in edit mode by selecting the EDIT button again.
  • Case 2 : If column 2 is blank, “throw an error”

In this way, when the SAVE button is clicked, if one or more cells are blank, the error message is shown and that cell is outlined in red. If and only if all cells in all rows are non-blank then the error message stays hidden.

1 Like

This is a really clever solution, thanks @mbc66!
My struggle was because I was trying to control specific rows from outside of the repeater, while letting the Edit button do the job makes it so much easier.

Regarding this:

I’m not sure why you need explicit EDIT and SAVE buttons–why not allow direct editing when you click on any cell and direct saving when it loses focus?

I totally get your point, but this is part of a bigger system so for consistency we have to keep it as it is, at least for the time being.

Thanks again for your help, really appreciated!!