I am attempting to build a feature where a user may add contacts. Due to design patterns I am locked into the approach seen in the file, I understand this would be much easier with a button outside of the repeater.
The Problem:
Users may skip adding contacts so we want them to select ‘+ Add Contact’ if needed which then shows a list of contact information they must provide in the scenario where they have additional contacts.
I want to use a repeater to handle this functionality, however, I’m struggling with keeping added contact info lists visible after selecting ‘+ Add Contact’ (see file), and limiting the added contacts to 10.
I’m starting to suspect that this may involve variables, however, I cannot wrap my head around them as I have no coding background.
I can’t quite picture what you are going for. Do you want just one contact visible at a time, and then have the ability to navigate through them? If so, you can use the repeater’s Pagination feature. Turn on pagination (in the Style tab) and set items per page to 1.
If that’s not what you are trying to do, perhaps an illustration of the desired outcome would help.
To limit the contacts to 10, put this in your button.
OnClick
If (value) [[Item.Repeater.dataCount]] is less than 10
-- allow adding another
Joseph,
Thanks for the input, I had not considered, nor was I aware of the ability to count repeater items! So awesome!
I’ve added a page titled “Goal” in the prototype and added the conditional logic to the mockup.
I am hoping to keep all contact cards information visible as the user adds more contact cards. Right now I can only get Axure to show one. Add Contact Cards.rp (64.4 KB)
I would put the push button outside of the repeater and move it on each click
In the attached example, the push button is moving 32px to the right of the right border of the repeater on each click. With the OnMove interaction I’ve controlled the number fo contacts added, seting the push button as “disabled” when it reaches 10
The number of each contact is set by
OnItemLoad
Set Text in "Contact <number>" to "Contact [[Item.index]]"