How: Multiselect Repeater data across MULTIPLE pages

#1

Scoured the forums trying to find this answer, couldn’t find exactly what I was looking for.

Imagine a multiselect repeater data set on page 1:

  • 2020 Mazda CX3
  • 2020 Mazda CX5
  • 2020 Mazda CX9

I multiselect the CX3 and CX9 models and click ‘Next’ button to go to page 2:
On page 2, I want to show a page title of just the FIRST of the two models I selected on page 1.
The page title includes the model year, model brand and model name.

I click on the ‘Next’ button on page 2 to go to page 3:
On page 3, I want to show a page title of just the SECOND model I selected on page 1.

Basically I want to be able to select multiple rows of data on page 1 and then show the data of each row selected per page.

I am able to successfully pass data from page 1 to page 2 on single select. But unsure how to pass data from page 1 to page 3, 4, 5 on multi-select.

How to make an 'add to favourites' function
Multiselect data from repeater, parse it on a different page
#2

Hi!

Here’s an example for you. The repeater builds a list of the selected items into a variable, and a widget on other pages extracts the desired item from the list.

Live sample

File: extract_value_from_list.rp (92.7 KB)

#3

OMG, I’ll have to take a closer look, but this seems to be working thank you!

#4

The way to do this is with global variables. It sounds like you’ve done this successfully with one selection, so you just need to build on that.

Two basic approaches for tracking selection order: (1) create as many global variables as you have possible choices (rows in your page 1 repeater; three in your example) or (2) use one global variable as a sort of array then parse it on your subsequent pages. The first is more straightforward and easy, the second is trickier (using some string routines) but more elegant and flexible.

While I was typing my reply I see that @josephxbrick just replied with an example. It uses the second approach, with some awesome wizardry in the getItemByIndex master that makes parsing the global variable easy, but I notice the selection order is lost–CX3 is always before CX5 and CX5 is always before CX9 --I presume because that is the order of the rows and thus order they are processed in OnItemLoad. …I’m sure he’ll have a good fix for this soon!)

Here is an adaptation that preserves the order of selection by changing the global variable v_carList on selection change of the widget in the repeater instead of in the OnItemLoad event. Note this will only work if the repeater is not dynamically changed (like a user adding or updating a row) because the selection state would be lost. But even then, you could probably live with having selections wiped when changing the repeater list.

extract_value_from_list_preserve_order.rp (108.0 KB)

#5

@mbc66 and @josephxbrick

Can you guys create one more example with repeater that has 3 columns of data instead of just one?

Col 1: Car Year
Col 2: Car Brand
Col 3: Car Model

I tried to recreate it myself using your guys example file but its not working for me :frowning:

#6

@Jaewoo

Not clear if you want three columns in the repeater dataset or three columns in your repeater widgets (what gets displayed.) I created both.

extract_value_from_list_preserve_order_v2.rp (116.4 KB)

With three columns in the dataset and one display column, we just have to concatenate the values into one string. Axure makes this easy (I think) and you can see how I did this in the OnItemLoad event: Set text on carModel equal to "[[Item.Year]] [[Item.Brand]] [[Item.Model]]"

However, this made it harder to then create the v_carList string dynamically, because we have three columns of data to again concatenate when adding or removing a car selection by clicking it. To simplify things, I added another global variable, named v_carTemp and do the concatenation in the OnClick event before selecting the carModel widget. I then use the v_carTemp value to add or remove an item to v_carList.

With three display columns, things work similarly. I created three widgets in the repeater, one for Year, one for Brand, one for Model. and grouped them. I assign the OnClick to the group so that clicking anywhere on the row will select the whole row. Unfortunately, Axure does not have OnSelect and OnUnselect events available for groups, so those events have to be on individual widgets. I decided to create a fourth widget to serve as a background for the whole row and place it in back. When it is selected it adds the row’s data to the list and when unselected it removes that data. This widget also allows the whole row to show with the “white on gray” selection style. Oh, I also needed to set the default style for carYear, carBrand and carModel widgets to no fill in order to allow the background to show when selected. The carBackground widget may be hard to find at first because it is white on white, but if you click into the group and keep clicking it will eventually be highlighted. Hope that makes sense.