Keeping input text when updating a repeater


#1

Hi,
I am using a repeater for a single text field that can be extended infinitely, and the the other way around reduced until 1 text field remains. The text field starts ‘empty’ with hint.
The component (on page 1) behaves largely as I want, but what rest is that I want to keep the form fields keeping populated with the same input text when adding or deleting fields. But which not works as such because at every add or delete the repeater starts empty again.

On page 2, I made modification adding an Update Rows action to the TEXT CHANGED interaction, which seemed at least in the right direction to store the input text. But unfortunately this doesn’t work.

Is there anybody who can help me or at least tell me where I can look further solving this issue?

You can see it (partly) working here:
https://xxbufw.axshare.com
2021.02.19 Keeping input text when updating a repeater.rp (129.0 KB)

Regards,

Igor


#2

Interesting issues here… Not as simple or easy as I first expected.

First of all, whenever you “change” a repeater (add, remove, update, filter, sort, etc.) that repeater’s Item Loaded event is fired. The effect is the entire repeater is basically rebuilt from scratch–so it starts with the default state of all widgets in its repeater cell. This means your text field widget will be blank. To handle this, you’ll need a column to store the contents of the text field, and Item Loaded needs to set the text of this widget using that column. You’ve set this up in Page 2, using the Text Changed event to update its own row. However, the Item Loaded event never sets the text for the text field widget (DateDocReqField). Furthermore, if it did set the text it would create an infinite loop, because that text change would logically trigger the repeater to update again. Most/all browsers will detect this problem and block it so things don’t lock up–so the result would be nothing happens when you try to enter text. You can get around this by using the Key Up event. However using Text Changed or Key Up is very inefficient as it gets fired for every character entered. Might work OK with one row, but with each added row it would get slower and clunkier. Typically in my designs I include a submit button (like “Done” , “Add” , “Update” or a checkmark icon) --which is usually better for usability and accessibility.

In this case, I decided to keep your structure and see if the text field’s Lost Focus event could work to update the row. The way this works in general is that when you select the text field it triggers its Got Focus event, then clicking anything else outside of that text field triggers its Lost Focus --basically signifying the user is done entering text in that field.
It does work, but it created a few new issues.

  1. I updated your repeater’s Item Loaded with two cases
    Case 1: If [[Item.DataDocReqCell]] equals “” Hide Delete button
    Case 2: Else if true Set Text DateDocReqField to [[Item.DataDocReqCell]]

  2. It looks like you want the delete button to clear all text, or if empty, delete the row–but not if it is the only row in the repeater. Makes sense, but when you click this delete button the text field loses focus and thus tries to update the repeater–which it does, but this resets the delete button as well, so it didn’t work correctly. To handle this, I added some case logic to the text field’s Lost Focus that tests “If cursor is not over area of Delete button”. This lets the delete button do its job on the current row with no need to update the repeater.

  3. the delete button needed some changes to its logic to handle three basic situations (cases):
    a. If text field not blank, clear it
    b. Else if repeater has more than one row, delete the row
    c. If repeater has only one row, just hide the delete button (to create the initial default state)

  4. (And this one still has me stumped) your “add 1 more request” button did not work on the first click, but does work on the second click. I thought it might be due to that button being a Master, or perhaps a timing issue with updating the repeater twice (first for Lost Focus, then for the button click) but it turns out it is simply because the button is in a group. I have no idea why, but moving it out of the group allowed it to work correctly on the first click. I would call this an Axure bug. When I ungrouped and then created a dynamic panel of your “2 buttons” everything works correctly.

See Page 3 of this updated file:
2021.02.19 Keeping input text when updating a repeater.rp (160.8 KB)


#3

Thank you very much again mbc66!

Adding and deleting worked nearly as I wanted, except that clicking delete on a 2nd row did not removed the row at once.
I also saw an ELSEIF statement (in your 3b) which I did not understand. Did you do that on purpose?.
After changing the ELSIF into IF, I exactly works as I want - flawlessly!

Unfortunately, I am still struggling with the Send function, where I want to delete all rows except the first one, and want delete the first row’s content; i.e.: set the component back to it’s original state.
I tried 2 things in vain:
(1) applying the delete rows action, but there I there I ran into writing a rule, as I don’t see why ‘rules’ are now directly written in the Edit value dialog, while elsewhere in the application, I Condition builder is brought in place.
(2) Firing a click event on the delete button (Action group).
I could imagine that a page reload will do the trick as well, but this does not bring me further understanding repeaters.

Rest me to ask you if you can recommend me some good sources to improve my repeater skills - making me less dependent on you and this forum …

Kind regards,

Igor


#4

I just misunderstood your intent–I thought if the field contained text and user clicked ‘x’ it would clear the text, otherwise if blank it would delete the row. Glad it works for you now though!

I wish there were an “All rows” option in the Delete Rows and Update Rows actions, but alas…
I agree that a condition builder dialog would make things easier. I haven’t looked at RP10 beta yet–maybe Axure has improved this?
But in general, you’ve got two steps here: 1) Delete all the rows; 2) Add a new blank row.
Two approaches I know of for step 1:

  • First, mark all rows, then choose the “Marked” radio button in Delete Rows action. I think this is the easiest.
  • Or, in one Delete Rows action you can specify a rule that would apply to all rows, no matter what content is in the repeater dataset. Something like, [[TargetItem.index != -1]] (because it is impossible to have a negative index, this would logically refer to all rows.)

For step 2, just include an Add Rows action with a blank value for at least the first column (and you have only one column anyway.) Double-check that the resulting Interaction code reads “… add 1 row” and not “… add 0 rows” (because that is a possibility for some strange reason.) In the updated RP file below, this is what I added for the DOSEND event from your button master:

image

2021.02.19 Keeping input text when updating a repeater.rp (161.6 KB)

Honestly, I’ve found this forum to be the best source. First, try to search for what you need to see if it has been covered already (although the search function is not all that great…) One of the most knowledgeable users on this forum is josephxbrick and he created an article on Medium about Axure repeaters. See this thread: Source on How to Use Repeaters and Local Variables?