Hide specific cells in repeater table

repeater-widget
#1

I’d like to show additional info in a table on click, but only one at a time. This additional info lives in the 3rd column.

I found a way to show a hidden cell in a repeater table, but no way to hide it again.
What I did is add a “toggle visibility” action to the base widget (that forms column 1), which works fine. It shows and hides the cell in column 3 of this row of the table.

But when I click on any other row, the previously shown cell still stays visible, of course:
this_way_it_is

It should behave like this (hiding all cells in column 3 except the one in the row just clicked):
this_way_it_should_be

So, in short: Clicking on a first name should hide all items in columns 3 and show the item in column 3 of the clicked row only.

Here is my take on this: Show-hide-cells.rp (48.3 KB)

Any hint appreciated!

#2

Hello @jjac! :grin:

To achieve this behaviour, where you only show the age of the clicked person (i.e. row) and in the same action hides the rest (i.e. all the other rows), you need to create some logic where each row knows about each other. The rows in your repeater currently don’t know about each other.

I would start by seeing if there is something in this post that could help you with that: Selecting an item from a repeater

If that is not enough, I will try and help you a bit more. But this would be my hint for now! :sunny:

#3

Hi Bahcos, thanks for your kind reply!

In fact I did see the post you linked and had a look at the example file. I know the solution for my problem is somewhere inside it, but I could not get my head around it. There is so much going on in this file…

I feel really stupid, because I did some serious programming in the past, but I am at a complete loss with the way Axure puts it. I also did play around with the move event as event listener, but to no avail.

My problem is, I don’t even understand how to properly address a single cell in a repeater. There is no way to address them like [[column.row]] which I would expect, right?

And I can’t attach a script to a single cell, just to all cells in a column, right?

Thank you so much for helping me here!

#4

@jjac I’m a bit curious why you want to use a Repeater? I would not recommend using Repeaters, unless you are expecting to create a prototype with ALOT of data, where the list dynamically needs to change depending on user input :).

test.rp (61.6 KB)

I have made this prototype; it’s not pretty and it does not scale very well - but it gets the job done in terms of what you wanted to achieve. I’m sorry if it does not totally hit the spot. If that is the case, try and explain the use case behind this scenario you are trying to solve! :slight_smile:

#5

Thank you so much, this does what I want. And I am happy I can understand your script :slight_smile:

The reason I want to use a repeater is that I have 50 rows of data. If I understand your script correctly, I would need to copy & paste the case action 50 times then, or am I mistaken here? That is what I tried to avoid…

I am open to any other solution, if it is possible without repeaters, all the better… (The usecase is: I have a long table with contents of a product, and the user should be able to show details for each ingredient. Because these are very long, only one of these detailed descriptions should be visible at a time.)

#6

Hello again @jjac. Yes, you would have to copy it 50 times. Im curious why you are trying to avoid it? If you only have to copy it 50 times once? It would still work - but maybe you are afraid to run into performance issues? Remember it will never be more than a “dumb” prototype - it’s not a real application, nor should you strive to make it so.

But here is another version that you can go with, which does not require you to copy a case X times! :slight_smile: It uses two repeaters; one with “real data” and one that serves only as a proxy, and moves to the position that is required to imitate/show the data on one line, as if it was only 1 repeater:

test2.rp (71.0 KB)

#7

Hi @Bahcos, thank you so much!! This does exactly what I want. :slight_smile:
I’d like to avoid copying the script 50 times because, well, I am lazy?

Albeit, I have no idea why your solution works. Would you mind explaining what is happening here? When I look at the page’s outline, I don’t even see the widget which displays the score. And what is this script doing? I can’t see any actions in it, only cases…

:confused:

Thank you so much for bearing with me!

#8

Sure, no problem @jjac !

It’s quite simple, actually. I have created 1 repeater called ‘RealData’ which contains all the data you want. When you click one of the rows (contained by a dynamic panel called ‘ClickMe’) I do the following:

  • I store a global variable containing the [[item.index]]
  • I add the specified/clicked row’s ScoreReal data to the proxy Repeater’s first row
  • I move the proxy repeater’s first row to be at the position of the real repeater’s row :slight_smile:

Outline:
image

@jjac would you mind marking the message with ‘test2’ as the solution? So that other users can find it in the future? :slight_smile:

#9

Thank you so much!
Your description makes sense to me. The problem is, I can not find the script in the file… I only see one script, attached to the dynamic panel ClickMe. And I don’t understand what this does—it is just a collection of three conditions, no actions, or am I completely mistaken here?

Screenshot_01
Screenshot_01.png1042×594 127 KB

The only other place where I see scrips in the file are in the Components, but they are not used, are they?

It would be great if you’d help me learn this :slight_smile:

But, even greater: I keep running into stupid questions… I tried to add a row and to move the widgets. But somehow the proxy table gets behind my new row. In Axure it looks fine (left in the screenshot), but in the browser it is broken (right in the screenshot):

Screenshot_02
Screenshot_02.png1956×248 74 KB

What did I do wrong here? I can’t thank you enough helping me with this!
(If it helps, here is what I tried: test3.rp (73.7 KB) )

#10

Hello @jjac :hugs:

The reason why you stumble into issues with this project is that it touches upon many different techniques at once, that you may not have learned yet. I would advide you to see a video like this: https://www.youtube.com/watch?v=4g-sWoIj7EM&t=58s

Furthermore the reason why the proxy repeater dissapears behind the other repeater is because you are not positioning the proxy repeater accordingly (horizontally), only vertically.

image
image.png731×324 5.32 KB

The proxy is always positioned at 120 x (horizontally). When ‘Move’ is set to ‘to’ (and not ‘by’), it’s position relative to the first parent it finds --> that would be the dynamic panel that encalsulates all your stuff :smiley:

#11

Thanks for the link to the video. It explains the concept nicely.

And I understand your explanation regarding the move action. My only struggle is: To which widget is this action attached? Me, stupid, can not find it in your file…

#12

The action, to move the proxy repater, is attached to the dynamic panel called ‘ClickMe’, which is created for each row in the ‘dataTable’ - all the logic is placed in there :slight_smile:. Instead of bulding on top of the project I provided, I would suggest you try and re-create it from scratch - then you will learn all the techniques that is used for it :slight_smile:

image
image.png718×892 15.5 KB

#13

Thanks, @Bahcos, my ignorance laid somewhere else: I never realized you can fold in code and that the small rectangles with the plus mean you can expand them… and everything was folded in in the file for me (like you see in my screenshot), that’s why I wrote there is no code :man_facepalming:

Thanks again for helping me with this, now I get everything you did here!

#14

Ah, no worries! Happens the the best of us :slight_smile:

I very curious to see your final prototype. Will you share it once you are done?

#15

OK, here you go.

Everything easy so far—but while you are at it: Do you have any idea why the repeater does not show the first row when I use the On Rotate listener trick to show the first item active on default? It seems to show the last instead.

I could work around it by copying the text in the script, but since I have 8 versions of this prototype, I’d prefer a general script…
test4.rp (174.4 KB)

#16

Great, thanks that everything described in detail, there were no questions at all.

#17

See my file in the previous post…

closed #19

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.