Filtering repeater

So - I have been playing around with repeater widgets and filtering - the behaviour i am after is to toggle the min and max columns per “look” using the “toggle look X” CTA leaving only the Total values visible
Example
Clicking “Toggle look 1” should filter the min and max columns under the “Look 1” column header and re-size / show a smaller column header above only the total column while the other looks still show 3 columns each - clicking the other “Toggle look X” CTAs should do the same for corresponding
Look columns.

I have found this rather challenging any help appreciated!

Filtering.rp (92.1 KB)

https://5wp281.axshare.com/#c=2

I did a few things:

  1. You had the text like “Toggle Look” and “Look” in the data set, which made it difficult to align between the repeaters. I took that static text out of the dataset and applied it in the set text actions instead so you have a unique identifier between the two repeaters.

  2. I added persistence of the toggles by adding a column to the toggle look repeater. That way you can add a new look without losing which toggles were selected.

  3. I put a case in the data repeater that hides the columns you wanted and put logic in place to change the size of the header. These are hidden based on a new column I added called “Hide”. Key here is the pull items on hide as well as setting the repeater to fit to HTML (which it does by default)

  4. Finally, I updated the logic on click of the look button to update the data repeater with based on whether or the button is selected.

Take a look at the file and let me know if you have any questions.

Filtering_Revised.rp (100.0 KB)

Note: I made the changes in the Home(1) version - would have been way more complicated in the other page in your file.

2 Likes

:grinning:
This is exactly what i was after! Will go over the file to understand how you did this - thanks a lot! :grinning:

ok so looking at the file this seems very different to how i thought I could solve this problem - this is a real eye opener and great lesson - really appreciate it!

You are very welcome. Was a fun challenge and I’m glad you were able to dissect and figure it out. If you get stuck on anything feel free to reach out :slight_smile:

well i wouldn’t say i have exactly understood what you have done but i managed to duplicate it!
Its really interesting that you added a column title in the repeater that didn’t have a widget in the repeater like “hide” and setting them to true to hide the grouped columns - also using [[Target.width-This.width]] inspected of setting a set size is really cool.

I still dont really understand how the look toggle persistence works but I am picking over the file after work to help me improve and make more robust prototypes when using repeaters - it will prove to be a valuable resource! :slight_smile:
How did you get so good at Axure? Do you have a coding background?

I think it’s awesome that you’re picking it apart! Yeah, the “target” and “this” prefixes are wonderful time savers and essential if you’re going to do anything where widgets resize. It makes editing/managing the prototype much easier down the road too :slight_smile:

So the column thing - anytime you need changes to persist in a dynamic repeater you typically will want to store that value or “state” in this case in the repeater data set. The key thing to remember with repeaters is that any time you update a row, add a filter, add a new item, etc, the whole repeater redraws. If you don’t store the state of items, you’ll lose all of them when any of those changes are made. In this case it’s helpful that everything is re-rendered because we can intentionally trigger that re-render and hide the columns we want.

Regarding the look persistence - most of the action happens on click of the button inside the repeater:

First thing is to toggle the selected state of the button - this is first because i’m using whether or not the button is selected to set the value of the hide column in the data repeater. The important thing to remember is that if the button was previously selected, it’s selected state was set to “True” when the repeater was loaded.

Next action updates the “data” repeater’s hide column. The “[[LVAR1]]” used here is referencing “Is Selected” of the button. If it’s currently selected (meaning the associated columns are currently hidden, we toggle that to unselected and it sets the “Hide” column to false in the data repeater so that the rows are then shown for that look. If it’s not selected, the opposite is done by because it will set “Hide” to true.

Lastly, we update the dataset for your Look repeater, so that if we add any looks or make any other dataset changes, we can set the selected state appropriately using the 2nd case statement OnItemLoad.

I dunno if that helps, but hopefully it does :slight_smile:

I’ve been using Axure for a very long time… when I started it was Axure 6.5. I have done a lot of user testing and find that the more accurate the prototype, the better your results will be. Plus, i’m pretty anal about things. I do have some coding knowledge, which does help, but mostly I learned from playing around and also from getting lots of people’s ideas from this forum. If you’re bored and looking to learn more, check out the posts from guys like @nkrisc - https://forum.axure.com/u/nkrisc/summary and @josephxbrick - https://forum.axure.com/u/josephxbrick/summary. These guys are super active on the forum and are pretty much geniuses. Seeing how they approach specific instances can be really helpful. Plus the best thing is there are so many ways to do the same thing - so you can take the things they do that are really cool and make them your own. The more you do it, the more you’ll find what works quickly and efficiently for you.

Also, asking lots of questions helps!

Sorry for the long post… but of course please holler if you have any questions!

2 Likes