Clicking a CTA filters the row in which the CTA appears

advanced-prototyping
repeater-widget

#1

Hello!

I am trying to create a prototype that mimics a file upload feature. As per the title and the attached file, i would like a user to able to remove ‘uploaded’ items one at a time when the corresponding ‘Delete’ CTA is clicked. I have it set up to delete the row at the moment, however filtering the row would allow the prototype to be reset (via a ‘remove all filters’ action) without having to do a hard refresh, and this would make my Prototype far more robust for the purposes of usability testing.

any and all pro-tips welcome!

Link to the PT on Axshare:

https://tqsv2h.axshare.com/

uploadFM.rp (202.9 KB)


#2

You can just use the Add Filter action instead of Delete Row. The trick is creating the rule for your filter …and understanding how filters work. This rule will show all the rows except the current row, based on the “DETAIL” column data: [[TargetItem.DETAIL != Item.DETAIL]]

  • (you can use any column in your repeater dataset; I chose that one as it seemed to uniquely identify each row.)
  • Here, “TargetItem” refers to the item (row) to be evaluated (the target of the rule) and “Item” refers to “this” row – in other words, the same row in which the user has clicked “Delete”.
  • Logically, the rule is stating that (for every row), show the row if the “DETAIL” column (TargetItem.DETAIL) does not match this “DETAIL” column. The result is the current (this) row will be hidden, as it does not match the filter.)

I added a “Clear Filters” button so you can verify that functionality.

See the “Uploader (2)” page in this updated file:
uploadFM.rp (285.8 KB)


#3

Ha! that’s awesome, and i really appreciate you taking the time to explain WHY it works. I owe you one, boss.

thanks again

r