OnClick trigger in a repeater item by its index

Hello everyone,

I would like to ask some technical help.
I made a prototype where I am using the repeater widget for navigation purposes.

If I click onto an element within the repeater, it reloads the target page in the iframe that is inherited from a curtain repeater collumn.

I have a header with Next and Back navigation. When the page is loaded, I would like to achieve the function of loading the page that is after the current page that is already loaded in the repeater, by clicking the next button in the header (and navigate backward with the same mechanism).
Somehow I would like to do that by storing the index of the current element and increase the index by 1 (let say my current element that is loaded has index 5, and the current +1 is the next one.).

I hope it makes sense.
I can’t achieve, therefore I would like to ask some help.
I uploaded the project file.

Some important notes:

  • I would like to keep aligned center the whole page with fix navigation

Thank you very mutch!

navigation-back-and-forth.rp (94.4 KB)

@jakabbalint,

If I understand you correctly, you want the BACK and NEXT buttons to navigate through your page list, not a “page history” list. Your repeater on “Page 0…” really doesn’t have anything to do with this (unless for some reason you want to prevent users from navigating with BACK and NEXT until and unless they click on a repeater tile–more on this later…)

Here is an .rp file with a few different approaches to solve this.
navigation-back-and-forth-2.rp (187.0 KB)

A straightforward and reliable way to do this is to track the currently loaded page with a global variable. Whenever a page loads in the inline frame, it can set OnLoadVariable to its own name, which is a built-in Axure variable, [[PageName]]. As long as you have a number in the page’s name, and the page naming syntax is consistent, you can extract that number to use as your index number. (You could save some hassle and name your pages only with numbers (“03” instead of “Page 3”); or you could have each page set OnLoadVariable to a unique number if you don’t want to use numbers in the page names.) In this way, it doesn’t matter how a user gets to a page (in your inline frame) --the currently loaded page will always be known.

In the example .rp file, have a look at the OnPageLoad event for each of the numbered pages. Then look at interaction code for the BACK and NEXT buttons on the Home page. There are a series of conditions that test if OnLoadVariable contains a known number (0, 1, 2, 3, 4, 5) and if so, loads the appropriate page. While straightforward, it is not the most efficient or easily scalable method. So, if you wanted to add ten more pages, you’d need to add ten more conditions to each button.

Now have a look at the buttons on the Home (B) page. These use some Axure string functions to extract the digits in OnLoadVariable and then compose a page URL based on your page naming syntax. Again, you could save hassle with all this if your page names were numbers only because Axure translates the page names in the prototype to lowercase only and replaces spaces with underscores. With this approach, you can keep adding pages without needing to update the code for your BACK and NEXT buttons.

To demonstrate a different approach, I added a copy of your page structure under a folder named “Alternate”. This approach greatly simplifies everything and uses a true index for the pages. The page names are simple numbers, and I placed your repeater on the Home (C) page, which allows it to be always visible (or you could hide it once a page number is clicked,if for some reason you do not want it available when any of the numbered pages are loaded.) Notice the repeater does not need to have a column for the reference pages as they are all simple numbers. I also added some text widgets in the menu dynamic panel which are hidden from view. These act as “local page variables” so that no global variables need to be used. One is “pageIndex”: a text field that gets updated when the repeater or the menu buttons get clicked. When its text changes it loads the appropriate page or disables the appropriate menu button (so this is where all the code magic happens.) The other is pageMax which sets the upper limit for number of pages. So, if you later add more pages, you just need to update the value of pageMax (otherwise you’d get a 404 error for trying to load page “6” if it did not exist, for example.)

As a note of caution, you might want to use the term “PREVIOUS” instead of “BACK” as the latter is so highly associated with “browser back” on web pages, and it is more semantically consistent with “NEXT” (as would the terms “back” and “forward”.) For example, if I first click “3” (in your repeater) and then “BACK” I would expect to go to Page 0 (where I came from) and not Page 2 (where I haven’t yet been.)

I’m afraid I don’t understand you here…

1 Like

Thank you @mbc66, I really appreciate your help! It works perfectly!

You should not worry about my note (I would like to keep aligned center the whole page with fix navigation).

I just written because I wanted to avoid solutions where the iFrame is not inside of a dynamic panel, and solutions without using iframe.

Thanks again, you are rock!