Nested Repeater Alternative?

newbie-question
repeater-widget
mobile-prototyping
#1

Hi Axurers,

I’ve glanced at some replies about nested repeaters not being possible in Axure. I’m wondering if any of you would have a good idea of an alternative method to nested repeaters.

I’m making a flashcard style list:

Here’s a sample of one item in the parent repeater (obviously it can’t be a repeater item):
Horizontal Repeater Resize.rp (1.2 MB)

As a bonus question, do you know how to get the browser to not show the scrollbar?

Thank you all.

#2

I think i get what you’re trying to do, but not sure why you need the second internal repeater. In your example, you could just add columns to your first (outer) repeater for:
Image | Kingdom | Word | Type1 | Type2 | Type3 | etc… | Sound

Then, in the onItemLoad event, you’d need a case for each column, just like the existing “set Text” for the first column to assign “Chicken” and “get fired”. Just make a separate rectangle for everything you’d put into that second repeater. Let me know if this doesn’t make sense and I’ll post an example when I have more time.

What kind of scrollbar are you trying to hide? In the browser window on mobile devices, you can prevent elastic scrolling and limit the scaling to 1.0 --learn more here:
[https://www.axure.com/support/reference/viewing-projects-on-mobile-devices]
(https://www.axure.com/support/reference/viewing-projects-on-mobile-devices)

In the ltem List in your prototype, you can right-click and control scrollbars for fields and inline frames:

image.png765×393 14.1 KB

#3

Hi mbc66,

Thanks for your suggestions.

I think I understand what you mean about having a case for each column, however, I want to simulate the users adding new tags. I guess I can make placeholder rectangles up to 10 for example. I suppose that would suffice to show the proof of concept.

The scrollbar is exactly as you have shown in the screenshot. I realise that it doesn’t show on the mobile version, however, for scrolling to work on a desktop, the scrollbar must be shown. If I choose Never Show Scrollbars then the scrolling feature is disabled. On the desktop, it seems that there’s no way enable scrolling and hide scrollbar.

To developers
I think the wording in the Scrollbars menu is not so clear, even misleading.

My initial thoughts when I first saw this was:

  1. “Does showing actually mean enabling?”
  2. “Can I enable scrolling without showing the scrollbars?”
  3. “Does as needed mean that it’ll be shown only when I’m scrolling (or when my mouse is over the scrollable area)? Because if I’m not scrolling at the moment then clearly it is not needed?”

Maybe you could improve these for the sake of the newbies.

#4

Do your tags need to be interactive? If not you could just build a single string by appending the tag to it as tags are added. Then it’s just all text. Removing tags is still possible too, just a little extra work.

#5

Ni nkrisc,

Excellent idea. I’ll have to think about whether they would be interactive or not. I was thinking, maybe clicking on a tag would go to a page that shows all the items that has that tag.

But if this is not required, then appending to a string is a perfectly good solution.

Do you have an example of removing a matched portion of a string?

#6

Mactuarchitect,

See this thread where nkrisc has examples of string searching and concatenation:

For scrolling a nested area without scrollbars, I think you have to pretty much build it yourself with onDrag or onScroll events. The basic approach is:

  1. Define the scrollable area with a dynamic panel–the Mask. Uncheck “Fit to Content” so its size is fixed.
  2. Inside the Mask, make another dynamic panel–the List. Check “Fit to Content” so it will dynamically size itself based on its contents.
  3. Put your interaction code on the Mask panel so that onDrag or onScroll moves the inner List panel.
  4. In the onMove event, use the Bounds: Add boundary to limit the movement, using the size of the List to calculate the endpoints. In this way, the list size can change dynamically and still scroll properly.
  5. If you need items in the List (or any content inside the Mask panel) to be clickable, I recommend using onMouseUp and tracking when an onDrag event is actually a drag versus a click. Otherwise, onClick can be unreliable–sometimes it is a click, sometimes a drag. Basic means for this is looking at the drag amount, available with the built-in variable [[TotalDragX]]; If it is less than some fixed amount, say 5 px, treat it as a “click” instead of a drag real drag and ignore the onMove event. If it is greater, then ignore the onMouseUp events.

Take a look at this revision of your prototype:
Horizontal Repeater Resize v2.rp (1.9 MB)

Here is the code on the Mask panel:

  • The [[TotalDragX]] is negative for “left-drag” motion and positive for “right-drag” so the math.abs() function returns the absolute value, giving us the total movement in either direction.

Here is the code on any clickable item in the List panel (your “tagName” rectangle in this example):

The “dragHold” widget is just a rectangle in the Mask panel, used as a temporary variable. I could have used a global variable for this, but in this way it is wholly contained in the “scrolling object” so easier to reuse. (I did add a global variable, ListItem so the text on the tagName could be passed to Page 2 when it is clicked.)

#7

Also… if you’re looking to add real sound to your prototype, check out this thread:

And, for text-to-speech, which seems like it is your intent here, e.g., hearing someone pronounce “chicken”, you can look at this thread:

Prototyping for Accessibility and Screen Readers
#8

Hi mbc66,

These are so good. Thanks for sharing. I can’t wait to try them out.

closed #9