Results 1 to 26 of 26

Thread: Intro to the Repeater Widget

  1. #1
    Axure Marketing
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,645
    Thanks
    258
    Thanked 513 Times in 284 Posts


    My Twitter My LinkedIn

    Post Intro to the Repeater Widget

    What is a Repeater?

    There are 2 parts, drag a repeater onto your wireframe and double-click to begin editing.

    1) Repeater Items (Dataset) can be Text, Image (Set Image), Page (Open Link).


    2) Item Wireframe


    Put the text from the dataset into the wireframe using OnLoad -> Set Text on Widget = [[Item.ColumnName]]


    The wireframe is repeated as many times as there are items/rows in the dataset.



    Conditions

    You can also use Item.ColumnName in conditions. I've added a third column called 'letters_in_name' to signify the number of letters in each person's name, and given them all values. I've also added a 3rd shape widget to the Item Wireframe, and given it a selected style (blue fill).

    What I'm going to do is set the lettersinname column to selected if the value is less than or equal to 3. Take a look at Case 2.



    looks like this...


    Troubleshooting: If you're having trouble with this make sure your Case 2 is an IF (Right-click to toggle IF/ELSE IF). Also make sure you've defined a selected style on your widget.

    Setting Images
    You can reference images as data as well. Right click on a cell and click "Import Image" to add the image.



    Then use the action "Set Image", select the image where you'll be setting the image to, then enter the [[item.ColumnName]] variable as a value.



    Repeater Formatting

    Let's jazz up the way this repeater looks. I've opened up the repeated and rearranged my shapes. I also added text to my widgets just so I can visualize the layout (this text will be dynamically overwritten with my actions).



    Next, I want this repeater to go horizonally instead of vertically, so I will go to the Repeater Formatting tab and select "Horizontal". I also only want to display 3 items, and then wrap, so I enter that value as well.

    Lastly, I want some padding between my rows and columns, so I enter a value for Row and Column padding.



    Let's check out the result.



    Next: http://www.axure.com/forum/v7-beta-r...-repeater.html
    Attached Files Attached Files
    Last edited by Paul; 07-09-2013 at 01:30 PM.

  2. #2
    Newbie Level
    Join Date
    Jul 2013
    Location
    Indianapolis, IN
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    This is a great add. Looks really promising. I'm wondering if there's any documentation on the repeater's pagination feature?

    I've been trying to figure out how to update pagination links after adding items dynamically to a repeater. If I have the repeater set to 10 items per page and I add an 11th item I want my pagination links to say "Showing page 1 of 2" or "<< 1 2 >>".

    Does any one know if this is possible? I haven't been able to find a way to get the page count or current page number for a repeater.

  3. #3
    Apprentice Level
    Join Date
    Dec 2012
    Location
    London
    Posts
    27
    Thanks
    3
    Thanked 2 Times in 2 Posts


    This will take some time to get my head around but I can see this being really useful. I think v7 is going to be truly a great update

  4. #4
    Apprentice Level
    Join Date
    Nov 2008
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Not sure if a majority of users would found that easy, but it would definitely be a great opportunity for widget creators.

  5. #5
    Apprentice Level
    Join Date
    Mar 2012
    Location
    Guangzhou, China
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 1 Post


    sorry. currently have no idea how to use this mighty new function

  6. #6
    Apprentice Level
    Join Date
    Mar 2012
    Location
    Guangzhou, China
    Posts
    20
    Thanks
    0
    Thanked 3 Times in 1 Post


    How to understand the function Pagination in Repeater Formatting?

  7. #7
    Newbie Level
    Join Date
    May 2012
    Location
    Norwalk, CT
    Posts
    3
    Thanks
    0
    Thanked 1 Time in 1 Post


    My Twitter My LinkedIn
    I'm trying Axure7 for the first time on OSX 10.8.4
    I dragged repeater object...but double clicking doesn't change anything...no way to see the repeater widget properties...Name:  Screen Shot 2013-07-08 at 5.16.36 PM.png
Views: 2388
Size:  128.5 KB

  8. #8
    Newbie Level
    Join Date
    Oct 2011
    Location
    Burlington, MA
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts


    Setting Images
    You can reference images as data as well. Right click on a cell and click "Reference Image" to import the image.


    Maybe I'm not doing something correctly, but I am not seeing a "Reference Image" option in the menu.
    Name:  reference_image.png
Views: 1981
Size:  14.8 KB

  9. #9
    Axure Marketing
    Join Date
    Jul 2011
    Location
    San Diego, CA
    Posts
    1,645
    Thanks
    258
    Thanked 513 Times in 284 Posts


    My Twitter My LinkedIn
    Quote Originally Posted by shepholland View Post
    I'm trying Axure7 for the first time on OSX 10.8.4
    I dragged repeater object...but double clicking doesn't change anything...no way to see the repeater widget properties...Name:  Screen Shot 2013-07-08 at 5.16.36 PM.png
Views: 2388
Size:  128.5 KB
    Can you submit a bug report or email us at support @ axure dot com?

    Setting Images
    You can reference images as data as well. Right click on a cell and click "Reference Image" to import the image.

    Maybe I'm not doing something correctly, but I am not seeing a "Reference Image" option in the menu.
    reference_image.png
    It's actually Import Image, I'll update the original post.

  10. #10
    Newbie Level
    Join Date
    Jul 2013
    Location
    St. Petersburg, Russia
    Posts
    2
    Thanks
    1
    Thanked 1 Time in 1 Post


    My Twitter My LinkedIn
    Unfortunately all items output with text align = center

  11. #11
    Apprentice Level
    Join Date
    May 2012
    Location
    Chicago, IL
    Posts
    49
    Thanks
    6
    Thanked 28 Times in 9 Posts


    My LinkedIn
    Quote Originally Posted by alex.kotomanov View Post
    Unfortunately all items output with text align = center
    Alex, you'll want to select the widget for the text in the repeater > Edit Text > and choose left align icon.

    Name:  change-repeater-style.jpg
Views: 2603
Size:  117.7 KB

  12. The Following User Says Thank You to jimbunzol For This Useful Post:

    scaridi (08-23-2013)

  13. #12
    Axure user
    Join Date
    Jul 2013
    Location
    Netherlands
    Posts
    3
    Thanks
    0
    Thanked 2 Times in 2 Posts


    My Twitter My LinkedIn
    This feature would be so freakin' awesome if you guys could add a data-importer (database/webservice)! I'm also using iRise sometimes (sorry for that!) and think that their data import functionality is really sweet. Fingers crossed!

    I also tried to copy/paste from Excel files but that is also not working (yet?). I can see this has so much potential with a little extra effort! I think a lot of users (like myself) will be copying their data from other sources......

    Anyways, thanks for this great feature!

  14. The Following User Says Thank You to Jappo For This Useful Post:

    firewalkcreative (09-11-2014)

  15. #13
    Newbie Level
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Question Support for custom item elements layout

    Hi,
    I've started using prototyper pro a few months ago because of the dataset and datagrid feature. One thing that rocks is the possibility of arrange and layout the items elements as we want, and then the repeater just repeat the items rows with the layout I configured. Is it possible to do this with the axure repeater or is it limited about custom layout of items fields?

  16. #14
    Newbie Level
    Join Date
    May 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts


    any news about my point? I was an Axure user but switched to prototyper pro because of the lack of a feature like this and other cute features prototyper had. That's why I'm asking this question so I can eval again becoming an Axure User.
    Thank you in advance.

  17. #15
    Axure QA
    Join Date
    Dec 2012
    Location
    San Diego, CA
    Posts
    467
    Thanks
    93
    Thanked 111 Times in 92 Posts


    Hi Mogarick,

    Just saw your question--apologies for the delay. Yes, that sounds like it's exactly what the Repeater is designed to do. It'll take your layout and repeat it for each of the Items. Let me know if this doesn't work for you.

    Ben

  18. #16
    Newbie Level
    Join Date
    Jul 2013
    Location
    St. Petersburg, Russia
    Posts
    2
    Thanks
    1
    Thanked 1 Time in 1 Post


    My Twitter My LinkedIn
    Quote Originally Posted by jimbunzol View Post
    Alex, you'll want to select the widget for the text in the repeater > Edit Text > and choose left align icon.

    Name:  change-repeater-style.jpg
Views: 2603
Size:  117.7 KB
    Thank you! It's very unobvious way for text formating.
    I tried to change widget's property before. But it doesn't work.

    Btw, your method also doesn't work sometimes. I don't know why, but these font properties are sometimes disabled:
    https://www.evernote.com/shard/s25/s...0f5293a5cf1df5

  19. The Following User Says Thank You to alex.kotomanov For This Useful Post:

    Leon (08-02-2013)

  20. #17
    Apprentice Level
    Join Date
    Jun 2012
    Location
    Netherlands
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts


    My Twitter My LinkedIn
    Quote Originally Posted by alex.kotomanov View Post
    Thank you! It's very unobvious way for text formating.
    I tried to change widget's property before. But it doesn't work.

    Btw, your method also doesn't work sometimes. I don't know why, but these font properties are sometimes disabled:
    https://www.evernote.com/shard/s25/s...0f5293a5cf1df5
    I tried changing the styling (font, font size, color) in the repeater itself and in the case, but neither work. Is there any way to style?

  21. #18
    Apprentice Level
    Join Date
    May 2012
    Location
    Chicago, IL
    Posts
    49
    Thanks
    6
    Thanked 28 Times in 9 Posts


    My LinkedIn
    Quote Originally Posted by alex.kotomanov View Post
    Thank you! It's very unobvious way for text formating.
    I tried to change widget's property before. But it doesn't work.

    Btw, your method also doesn't work sometimes. I don't know why, but these font properties are sometimes disabled:
    https://www.evernote.com/shard/s25/s...0f5293a5cf1df5
    Same thing has happened to me before, but I don't remember how I got it working. It's weird.

    Quote Originally Posted by prohibited13 View Post
    I tried changing the styling (font, font size, color) in the repeater itself and in the case, but neither work. Is there any way to style?
    You have to select (highlight) the entire text to apply the style.

  22. The Following User Says Thank You to jimbunzol For This Useful Post:

    prohibited13 (07-22-2013)

  23. #19
    Apprentice Level
    Join Date
    Jun 2012
    Location
    Netherlands
    Posts
    10
    Thanks
    2
    Thanked 0 Times in 0 Posts


    My Twitter My LinkedIn
    Thanks that did it for the styling.

    Next one: making the an image canvas round. It previews nice in my Home tab in Axure but when Previewing in browser the effect is not there.

  24. #20
    Axure Developer
    Join Date
    Feb 2012
    Location
    San Diego, CA
    Posts
    2,008
    Thanks
    95
    Thanked 496 Times in 399 Posts


    Quote Originally Posted by jimbunzol View Post
    Alex, you'll want to select the widget for the text in the repeater > Edit Text > and choose left align icon.

    Name:  change-repeater-style.jpg
Views: 2603
Size:  117.7 KB
    Hi all,

    The controls being disabled in that text editor was a bug. It should be fixed in the latest beta, 7.0.0.3111, Download V7 Beta | Axure.

  25. #21
    Newbie Level
    Join Date
    Aug 2013
    Location
    Enschede, The Netherlands
    Posts
    9
    Thanks
    7
    Thanked 1 Time in 1 Post


    My Twitter My LinkedIn
    Quote Originally Posted by jimbunzol View Post
    Alex, you'll want to select the widget for the text in the repeater > Edit Text > and choose left align icon.

    Name:  change-repeater-style.jpg
Views: 2603
Size:  117.7 KB
    I was searching for this, thanks! Although, it is very non-intuitive to have to do it in here, instead of editing the text style of the widget your repeater-text goes into... Especially since you do have to set the padding settings there...

  26. #22
    Newbie Level
    Join Date
    Aug 2013
    Location
    Chicago
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts


    Has this bug been fixed yet? I don't have access to the repeater properties in 7.0.0.3115 Mac OSX Mountain Lion https://www.evernote.com/shard/s34/s...433e85b73c6368


    Thanks

  27. #23
    Axure QA
    Join Date
    Dec 2012
    Location
    San Diego, CA
    Posts
    467
    Thanks
    93
    Thanked 111 Times in 92 Posts


    Hey Ashapiro75,

    It looks like you aren't "in" the Repeater in that screenshot; Repeaters are like Dynamic Panels in that you need to double-click to enter them for editing. Once you've done that, you should see all of the Repeater properties. Let me know if this doesn't work for you.

    Ben

  28. #24
    Apprentice Level
    Join Date
    Jun 2013
    Location
    Beaverton, OR
    Posts
    16
    Thanks
    2
    Thanked 0 Times in 0 Posts


    Quote Originally Posted by Ben Axure View Post
    Hey Ashapiro75,

    It looks like you aren't "in" the Repeater in that screenshot; Repeaters are like Dynamic Panels in that you need to double-click to enter them for editing. Once you've done that, you should see all of the Repeater properties. Let me know if this doesn't work for you.

    Ben
    I had a problem with align and a repeater and i was definitely in the element. I had to rectangles, one was centered and the other was left aligned, but when I get back to the main screen or preview they are both centered. I had to delete the repeater and re-create it and now it's working. I should have saved the file that was weird and sent it, but alas I forgot. Maybe you guys will have some success re-creating the bug.

  29. #25
    Apprentice Level
    Join Date
    Jun 2013
    Location
    Milan, Italy
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post


    My Twitter My LinkedIn

    Question

    Name:  Schermata 2013-08-23 alle 15.36.04.png
Views: 1851
Size:  28.0 KB

    Hi Ben,
    I have a problem with padding.

    In your screenshot there is some padding option that are don't avalaible to me.

    I need this to create space between the elements of the repeater.

    Could you help me?
    Stefano.

  30. #26
    Axure QA
    Join Date
    Dec 2012
    Location
    San Diego, CA
    Posts
    467
    Thanks
    93
    Thanked 111 Times in 92 Posts


    Hi Scaridi,

    We've actually removed the Repeater padding settings from the latest beta builds. Those "Spacing" values should do what you're looking for, though--they're the distance between repeater items. Give them a try and let me know if they don't work as you'd like.

    Ben

Similar Threads

  1. Using Widget from 3rd party widget library resulting in graphic changing to letter or number.
    By Jonathan Firestone in forum 6.x Technical Troubleshooting
    Replies: 2
    Last Post: 05-25-2012, 11:15 AM
  2. Replies: 3
    Last Post: 04-27-2012, 03:11 PM
  3. Replies: 1
    Last Post: 03-30-2012, 11:23 AM
  4. An Intro to Prototyping in Axure Webinar: 10/19/11
    By DaniD in forum Support-at-Axure.com Collection
    Replies: 0
    Last Post: 10-19-2011, 06:59 PM
  5. An Intro to Prototyping in Axure Webinar: 10/5/11
    By DaniD in forum Support-at-Axure.com Collection
    Replies: 2
    Last Post: 10-07-2011, 09:26 AM

Search Engine Optimization by vBSEO 3.6.0 PL2