iFrame in Repeater [show the other pages of the project]

repeater-widget
#1

Hello!

A simple question, might be stupid but I cannot find the way to make it work:

I have a fist “Home” where I want to place a repeater. Inside the repeater I placed an inline frame and I would like to “show” inside the iFrames, all the other pages.

My idea was to give a name to the Pages EQUAL to the data set in the column of the repeater, so that I could make the condition: IF I [[Page.Name == Item.ColumnName]] than: open link: [[PageName]].
This clearly does not work. Someone can help?

#2

The proper way to call a page in a repeater is by using the “Reference Page” option in the dataset. Right-click in a data cell and choose “Reference Page” then point to a page in your prototype (or paste an external URL) You’ll see a little page icon in the data cell. Here is the Axure reference for this:
https://docs.axure.com/axure-rp/reference/repeaters/#reference-pages-and-urls

See the Home page of this little demo:
repeater page references.rp (93.1 KB)

You can also manually build a URL to any page in your prototype by converting a string (the page name as it appears in Axure RP) to lowercase, replacing all spaces with underscores, and appending “.html”. When you do this, do note that the page will open in its own “webspace” with all global variables set to default.

See Home (b) page of the demo for an example.

You don’t need conditional logic to handle this. …Unless there is something else you need to do, or want to set it up differently?

#4

Actually, there is a way to AVOID to reference the page for each row? Imagine I would like to do it for a library of 300 icons… where on the “Home” I would like to show all the icons together and I do not need to open the page, just to show the page inside the inline frame…

I do not know if I am clear enough…

#5

Well, technically, no; you will need some kind of reference to each page–otherwise the repeater would have no way to know which page to load in the inline frame. You don’t have to manually create this in the repeater dataset, though. You could come up with an algorithm for naming your pages, e.g., “iconNNN” : “icon001”, “icon002”, “icon003”, etc. and use this with the basic method I showed in the Home (b) page to call a page by its name. Then you’d need a recursive function to repetitively add rows to your repeater–using your naming algorithm.

I’ll pause here to mention this is starting to get beyond “prototyping” and into full-on functional programming. If you really have 300 or more icons/pages and want to create a kind of contact sheet to show them all, you are better off with a real programming or graphics application instead of a prototyping application like Axure. Potentially though, you could have a server-side script (e.g., Perl, Python, ASP) create a contact sheet webpage (or PDF, PNG, TIFF, …anything with a URL you can access) and then just load that into one inline frame–or have one page in your prototype simply load that URL in it’s Page Loaded event. Come to think of it, I’ve had to do just this–probably a dozen years ago–with GraphicsMagick, which has a nifty and fast ability to make a contact page from a folder of images.

Alright, back to Axure and prototyping… This was a good challenge to see if it could all come together. Take a look at this updated .rp file:
repeater page references.rp (216.5 KB)

The Home ( c ) page has a blank repeater that “creates itself” by recursively adding rows. Here’s how it works:

  1. The Page Loaded event initializes the global variable, OnLoadVariable to zero.
  2. The Loaded event of the repeater has a conditional case of “If value of OnLoadVariable is less than 12” (the number of icon pages.) which increments OnLoadVariable by 1, adds a “blank” row, then fires Loaded again --so that 12 rows are created.
  3. Each time a row is added, the repeater’s Item Loaded event is fired. This loads a page in the inline Frame widget (within the repeater) using this expression:
    icon[[ ('x00' + Item.index).slice(-3) ]].html
    A. The resulting effect for the first row, with index of 1 (Item.index), is: “icon001.html” --the URL of the first icon page.
    B. The ‘x00’ and .slice(-3) is a method to ensure leading zeros in the page number. I got this from an old thread here, thanks to the master, josephxbrick : Time stopwatch

So, you’ll have to know how many pages to load (changing the “12” in step 2 to N) and if you later add pages, you’ll need to update this again. As the number of rows in the repeater increases, the page load time will increase (and it will vary depending on the operating speed of the computer/device/browser.)
With some adjustments to the expression in step 3 you could allow for more complex page names, like “AddressBookIcon_001” , “MenuIcon_002” , “rabbit_003” , etc. as long as there is a consistent numbering scheme (or other hash system) where you can parse out the sequence indicators (just the numbers.)

closed #6

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