Adding "Updated" Tag to Rows in a Table Repeater

#1

Hello Axure community,
I’m currently working on a project where I’m using a table repeater to display data, and I’ve run into a challenge. After a user edits a row, I want to display an “Updated” tag next to that row to indicate the changes.

However, I’m encountering some issues with the implementation, and the “Updated” tag isn’t showing up as expected.

Has anyone successfully implemented a similar feature before? I would greatly appreciate any guidance, tips, or code examples you could provide to help me achieve this functionality correctly.

Thank you in advance for your assistance!

#2

@josood
The way I have done this is through local variable by comparing the data from your row displayed to the data your are changing.

Example.
Set multiple variable for the necessary columns you may have. Then, onClick of any of the cell where you display your data, set those variables with the current data. OnChanged (text or drop-down) set your new variable to that new data.
VarColumn1 vs VarNewColumn1
If data is different then OnSubmit update data and display “updated” flag.

Hope this helps

#3

@Pierre01 has a good calculation scheme to identify if data has been changed by the user, but does this solve your issue?

I’ll try to address this specific question, but without seeing your .rp file and how you’ve set up things, it’ll be some guesswork… I’m going to assume you know which row has been edited based on the click of an Update button (or triggering some kind of Submit function.) If you have some interaction code that shows a widget and then updates the repeater, it won’t work because when a repeater is updated it gets rebuilt, so the row (and thus each repeated row) starts from scratch. Whatever is shown as the default in the editor is the starting point, and the code in Item Loaded can change things based on the repeater’s datasheet. So, by default your “Updated” widget would not be shown. You need a conditional case in the repeater’s Item Loaded event to handle the update, and some way to track which row has been updated.

Here is a quick demo:
Repeater with updated tag.rp (68.5 KB)

  • I dragged in a Repeater widget, then changed the Rectangle widget to a Text Field so it is editable.
  • I added an “Update” button and assigned it as the Text Field’s submit button (so when Text Field is focused and the Enter key is pressed it triggers that button’s Click or Tap event.
  • I decided to use a dynamic panel (named, “Row Status”) to show either the “Update” button or the “Updated” status tag, …or nothing by default.
    • (I could have also chosen to just hide/show a text widget, which would work fine, especially if you want to show the Update button and “Updated” tag at the same time.)
  • I created a new column in the datasheet, named “Updated” to track if a row has been updated
    • …and it turned out to be useful to track if a row was being edited, or active.
    • …I also thought I might as well include the ability to test if the input data matched the existing data, since this was easily done with this scheme. (So an alternate way to achieve what I think @Pierre01 was demonstrating, but without variables.)
  • I think it works best if only one row–the active row–can show the “Updated” button, so I needed a way to hide any Update buttons on other rows and show it only for the current/active row. Also, any previous “Updated” tags should also be removed/hidden.
    • Otherwise, a user could click a Text Field, then click (or tab into) another row’s Text Field and both rows would show the “Update” button. …And any previously updated rows would still show the “Updated” tag, …so the repeater would get too busy/confusing after a few edits.
  • Here’s how the logic flow goes…
    • When a Text Field is clicked, it first clears the “Updated” row data for all rows (ensuring all rows set to default, thus hiding any Update buttons or status messages. It does this by marking all rows, updating marked rows so the “Updated” column has a value of “false”, then unmarking all rows.
    • Then, it updates “This” row so the “Updated” column is set to “active” which triggers the dynamic panel to be set to “Active” thus showing the “Update” button. More on this below…
    • When the “Update” button is clicked, it tests if the value in the Text Field is different from the value in this row’s “Column0” in the datasheet.
      • If so, there is new data to save, so it updates This row, setting “Column0” to the value in the Text Field.
      • If not, it updates This row, setting “Updated” to “same”, which triggers a “Same” error message to be shown.
    • When the repeater is loaded or updated, it’s Item Loaded event gets called, once for every visible row in the datasheet. I made four conditional cases to handle things:

      • Case 1 has a condition of “If true” so it is triggered every time, setting the value for the Text Field, ,using “Column0”.

      • Cases 2-4 test the value of the “Updated” column, setting the “Row Status” dynamic panel state to show the necessary status–either blank, the “Update” button, the “Updated” tag, or a “Same” tag.

      • Case 2: If “Updated” column is “true” then Row Status is set to Updated, showing the “Updated” tag/message.
        This is the critical piece of code that addresses your question.

      • Case 3: Else if “Updated” column is “active” then Row Status is set to Active, showing the “Update” button. I added a brief pause before setting the Focus to the “Row Input” Text Field to ensure the Text Field for the active row remains focused when a user clicks or tabs to it.

      • Case 4: Else if “Updated” column is “same” then Row Status is set to Error, showing the “Same” tag/message. After a 2 sec pause this message is cleared.