Repeater show and hide columns onclick event

newbie-question

#1

Hi I have a repeater with 5 columns of data the last two columns (message and summary of the message). Each entry in each column on single a line should be seen only when you click on separate button.

I want to automatically generate all the buttons associated with the entries of these two columns.
What is the easiest way to do that. ?
I already looked at different examples but I can’t get my head around it.
Thank you in advance for your help.
Jean


#2

What is special about the last two columns? Are these the only columns with data that can be hidden/shown?

Is “separate button” in the repeater or outside the repeater? If inside the repeater, is there a unique button per column/entry (5 buttons per row? Or maybe 2 buttons per row), or do you want one button per row?

You can set this up visually in the repeater cell. Just style and place button widgets where you would like them to appear. Assign interaction behaviors to each button, referring to the repeater data, for example,

OnClick Set Text of messageTextWidget to value of [[Item.Message]]

…where “messageTextWidget” is the name of a widget in the repeater cell and “Message” is the name of a column in the repeater dataset.
Or another approach would be to set your text widgets to Hidden by default, assign their text value normally in the repeater’s ItemLoaded event, and use the buttons to Show (or Toggle Show/Hide) the associated text widget.

It would help me and other forum users here to get our heads around your questions if you could upload an .rp file with your setup and progress so far. Or a pointer to a website that does this already, or some screenshots or hand sketches depicting some key states, user interactions and results. If a picture is worth 1,000 words, a demonstration (working website with similar feature) is worth 10,000 words, and your .rp file is worth 100,000 words :slight_smile:


#3

AxureRP8.rp (60.4 KB)

What I am trying to achieve is to use the active email box as a button to show MCcontent and ObjectReq for each of the line added in the repeater.
then to have each button in one pile without any space like an email client.
When the active button has been used the indicator update disappear and if I click again in the zone the color goes back again.
Does that make sense?
Thanks again


#4

I copied your Home page to Page 1 and made some changes based on what I think you are asking for.

repeater show-hide AxureRP8.rp (87.3 KB)

You have an OnClick event to show these two widgets and OnMouseOut to hide them and that works. Because the "Active_eMail" widget is behind other widgets, it can only be clicked where it shows between the widgets in front of it. I created a group of all the widgets in front of and including Active_eMail and moved the interactions to that group, so it is easier to use.

What you show in your screenshot is not possible the way you have set up your repeater because ExternalAPI1, Mcontent, ObjectReq, and the image are all in the repeater, so they all get repeated in each row. I’ll assume you do not want these widgets to be repeated, but rather their content gets updated based on which row in the repeater is clicked. So, I cut all these from the repeater cell and pasted on the page outside the repeater. That leaves the three text rectangles, the indicator and the Active_Email widget in the repeater, so each row is stacked “without any space”.

I added a simple “(Show) Toggle Indicator_update” action to the repeater group’s OnClick to handle this.


#5

test.rp (52.1 KB)
Okay I did not get how you were able to get the data updated for each button, can you explain that?

In the new example I sent I was able to stack the buttons by using move but when I click on it they move like the content of the message.
I want to be able to change the content of message and the content active button with the repeater.
Can you tell me why did you use a dynamic panel?
Thank you that was already really helpful.


#6

Look at the interaction code for the Active_eMail_Group. The Click or Tap event sets text using the repeater datasheet values for that row.

I put the repeater in a dynamic panel so it wouldn’t overflow what looked like your “application area”.


#7

all good for this one thank you