How to: Highlight a new row in a repeater

[Tanya_Axure]

Hey there, I’d like to share several methods that can be used to highlight a new row in a repeater. You can follow my explanation by opening the attached .rp file.

First method: Applying the selected style on the group of widgets inside the repeater where the repeater’s row is the last one.

Setup: You will need text fields, a repeater widget, and a button to click to add a row to the repeater widget.

Summary: Whenever you add a new row to the repeater, this row will be highlighted by applying the “Selected” widget style to the group of the widgets inside a repeater.

Action:

1. Group all widgets inside the repeater by selecting them> right-click>Group.
   
2. Add the Selected Style to all widgets inside the group created in step 1. To do that, go on the Interaction Pane>Add Style Effect>Selected Style. In my file, I set the filing color to blue.
   
   
   
   Tip: Add this style to one widget and copy and paste it by selecting another widget and using key shortcuts Ctrl/Cmd+C, Ctrl/Cmd+V.
3. For the button, add the interaction “Click or Tap” on the Interaction pane and select the action “Add Rows”. Select the target repeater inside the action and click the “Add Rows” button. Inside the “Add Rows to Repeater” dialog, click on the formula button for each cell, add a local variable that stores the text from each text field, and assign the cell’s value to this variable.
   
   
   
   
4. Select the repeater, go to the Interactions Pane, click on the button “New Interaction”, and select the “Item Loaded” interaction. Hover over this interaction and click on the button “Add case”. In the “Condition Builder” dialog, click on the button “New Condition” and add conditions that check if the row in the repeater is last and how many rows are visible. If you skip the latter condition, then the current last row inside the repeater will be highlighted every time when the page is loaded, so this condition helps to see if a new row was added to the current structure.
   “Item.IsLast” parameter is used to define which row is the last one inside a repeater dataset.
   “Item.Repeater.visibleItemCount” parameter is used to avoid unnecessary default highlighting when the page is loaded for the very first time because the ItemLoaded event fires right after the page is loaded.
   
   
   
   
   
5. Add the “Set Selected/Checked” action that targets the group created on step 1 and set this group’s status selected to “true”.
6. Add the “Wait” action to hold this state for some time.
7. Add the “Selected/Checked” action that targets the group inside the repeater and sets its selected state to “false”.
   
   

Second method: Using a colored bar and editing the repeater dataset to distinct a new row.

Setup: You will need text fields, a hidden colored bar that has the width and height of the repeater’s row and belongs to the repeater, an additional empty column in the repeater dataset, and a button to click to add a row to the repeater widget.

Summary: Whenever you add a new row to the repeater, a new value will be added to the empty column to distinguish that it’s the last row in the repeater dataset, and then this row will be highlighted by showing a colored bar.

Action:

1. For the button, add the interaction “Click or Tap” on the Interactions pane and select the action “Add Rows”. Select the target repeater inside the action and click the “Add Rows” button. Inside the “Add Rows to Repeater” dialog, click on the formula button for each cell, add a local variable that holds text from each text field, and assign the cell’s value to this variable. For the extra column, in our case, it is named “NewRow”, set its value to “true”. This way, whenever you add a new row, Axure will know what row is the last one because it will store this “true” value.
   
   
   
2. Select the repeater, go to the Interactions Pane, click on the button “New Interaction”, and select the “Item Loaded” interaction. Hover over this interaction and click on the button “Add case”. In the Condition Builder, click on the button “New Condition” and add conditions that check if the value in the “NewRow” column equals “true”. If it is, show the colored bar using the “Show/Hide” action.
   “Item.NewRow” parameter with its “true” value is used to define the last row in the repeater dataset.
   
   
   
3. Select the colored bar, go to the Interactions pane, and add the interaction “Shown” along with the “Wait” action and “Edit Row Data” action that sets the value inside of the “New Row” column to nothing. This way, when you add a row next time, it will have this unique “true” value that Axure uses to distinguish this last row in the dataset.
   
   
   
   

You can check this link to see both methods in action, and here is my .rp file:HighlightNewlyAddedRow.rp (69.8 KB)

I hope you find these solutions helpful, and please feel free to reach out to me if you have any additional questions.