Repeaters

advanced-prototyping
repeater-widget

#1

Hi all

I know you can’t have a repeater that persists between pages but I’m trying to make a repeater hold it’s data when you navigate away from the page with the repeater on and then back to it again. Is this possible?

My repeater is blank to start with and is filled by the user selecting items from a dropdown to populate it. This all works until I navigate away from the page. When I go back to the page with the repeater, it’s blank again.

Best regards
Andy


#2

Hi -
You actually can utilize a repeater within a “master” … regardless, without taking a look at your file, my guess would be you need to add an “OnPageLoad” event "set text (using repeater values) to the page with the repeater. Again, this is without looking at your file, if you post a demo of your file; I’d be happy to take a look.
TG


#3

Hi

Thanks for the quick reply. Here is a copy of the basic RP file. I have had a look at the OnPageLoad events for repeaters but I can’t work out where to start.

It’s a really simple repeater with one column. I just want to be able to add some rows, switch to the dashboard and back to the repeater page, and have the rows I added still there.

Cheers
Andy
app v1.1.rp (148 KB)


#4

There’s a couple different ways to accomplish what you’re looking for. One method is by utilizing global-variables to “capture” the “added rows”, then…when you navigate away-then-back to the ‘Repeater’ page … the rows will be re-populated with the global-variable values (i.e. the previous selections).

app v1.1–UPDATED_11_21_2016.rp (149 KB)

Again…this is one way to approach it.
Hope it helps
TG


#5

Thanks for that. The only problem with it is that it relies on creating a fixed number of variables, which then becomes the maximum number of rows in the repeater.

I suppose the obvious thing would be to have one page and put everything into different states on a single dynamic panel. I might have a play with that and see if it would make everything too difficult to work with.

I’m surprised Axure haven’t got to grips with this one a bit better. Repeaters could be such a powerful tool but the inability to allow for some sort of persistence across pages, or to persist on the same page within a session removes a great deal of the value.


#6

Hi ajacobsuk,

It’s a bit tricky to pull off, but you can accomplish what you’re looking for without limiting the maximum number of rows that can be added to the repeater. Instead of using one variable for each row of the repeater’s dataset, you’ll use one variable for each column. This variable will hold all the individual values for each row of the repeater, separated by a special character that won’t appear in the rows’ values. Every time the page is loaded, the repeater will loop through this variable’s value, extracting the bits between the special characters and using them to fill in the dataset.

Rather than edit your RP file, I’ve chosen to attach a simple, stripped-down example file to better demonstrate this setup. Take a look and then read on for an explanation of how the file works.

See it live! | PersistentRepeater_EXAMPLE.rp (70.5 KB)


Note: The magic in this setup relies on the substring() and indexOf() JavaScript string methods. If you aren’t familiar with these, take a moment to read the linked reference guides before continuing.

The “ADD ROW” Button

The droplist and text field widgets are used to populate the repeater’s two dataset columns, “Number” and “Comment”. Clicking the “ADD ROW” button adds a row to the repeater using the values from the droplist and text field, and it also adds those values to the existing values of two global variables, “NumberVar” and “CommentVar”, followed by a tilde character, ~.

This format, [[VariableName]][[NewValue]]~, adds the new value to the end of the variable’s existing value, ensuring that later, when the page is loaded again, the individual values are added back into the repeater in the correct order. The tilde characters give us a means of determining the end of each individual value.

The Repeater’s First OnLoad Case

When the page is loaded, the repeater’s first OnLoad case begins by using the variable values to add rows to the repeater:

[[VariableName.substring(0,VariableName.indexOf("~"))]] selects the portion of the variable value from the beginning to the first tilde, i.e. the first individual row value. Once that row is added, the “Set Variable Value” action removes the first individual row value from the variable with the expression [[VariableName.substring(VariableName.indexOf("~")+1)]], which sets the variable value to only include whatever comes after that first tilde. Now, the second individual row value is the first, and it gets added to the repeater when the OnLoad case fires itself again with the “Fire Event” action at the end of the case.

The Repeater’s Second OnLoad Case

The repeater’s first OnLoad case continues to loop until one of the variable values contains no more characters, i.e. until there are no more individual row values to add to the repeater. At this point, the repeater’s second OnLoad case fires, moving a rectangle in the repeater—this could be any widget in the repeater with an unused OnMove event—by (0,0), triggering its OnMove event:

This case uses a “Set Variable Value” action with the expression [[VariableName]][[Item.CorrespondingColumn]]~ to build the variable values back up, allowing the repeater to be repopulated again on subsequent page loads. Because events on widgets in repeaters fire in item order, the individual row values will be added to the variable values in the correct order.


I hope that this helps! Have a go at implementing this setup in your file, and let me know if you have any questions.


Transferring objects inside a repeater between screens
Save repeater contents to global variables, then use them to build a copy of the repeater?
Passing data from repeater to another page
Upload data drom repeater to another on next page
closed #7