Add names to a list, and delete them on profile site

advanced-prototyping
#1

Hello!

I have a problem and i need you guys to find out how to solve this.

Pages what i have:

Add site:
Add name to a list

List site:
List the names in a rows + buttons in the row what linked to the profile site

Profile site:
Just show the name what i added on the Add page.

What I want:

I want to add a name on the Add site, and list that on the List page with a button what linked to a Profile site what contains the name what I entered. If I add a second name I want it to put to the 2. Row, under the row 1. If I click the Profile button on the List site and when the Profile site opened we see a delete button. Delete button have to remove the line what contains the name what I see on the Profile site.

Example:

On the Add site I add a name: Kyle. I get redirected to the List page and I see the name Kyle in the 1. Row. I click on the Add new button and I add the second name: Jesse. Jesse show up in the 2. Row, under Kyle. I click the on Kyle’s Check profile button and I delete him on his Profile page. I go back to the List page and I see Jesse on the 1. Row.

The problem:

I can make only one row at this moment with using global variables ( i added a set variable value on “InputName” and i used the set text OnPageLoad on the other sites. But how can i add a second name that show up on the List page in the 2 row? Is it possible to make a event that automatically generate a new global variable like “Name2”? I tried with repeater but if I try with Add Row I can not select the target repeater widget because that’s not on the same page where is my Add button. (It’s the reason why I try to solve this with global variables)

Can you guys help me with this? Thanks for your answer, and sorry for my bad English.

File: add-remove-from-list.rp (69.4 KB)

Sorry for my bad english, and thanks for all comments.

#2

If i try with repeater i have no chance to Add row to the repeater what is not on the same page where my button is. I just cant find the target widget.

#3

It has been awhile since you posted this… hopefully this doesn’t come too late.

The first thing to realize is every time a page loads, it loads with the initial widgets, properties, states and values, as you set them up in the editor. There is no “memory” of what was done previously on a page or any other pages–with the exception of global variables–which is the only way to pass data between pages in Axure. (Websites typically use cookies and/or backend database systems to accomplish this.) So, if you want to keep a list on a separate page based on activity in other pages, you’ll need to recreate it every time your “list” page is loaded.

There are several approaches you could take to solve this. The easiest might be to put everything on one Axure page with each “virtual page” (add, list, profile) as different states in a dynamic panel. Then, when the user clicks a button to “another page” you fake it by changing the dynamic panel state. The advantage is the list will be easy to update as long as the user stays on the same Axure page–which they will (should) if it is the only page in your prototype.

If you need or really want separate pages, then you can create a scheme to build the list in the Page Loaded event, based on your global variable(s).

Regardless, if you use basic widgets, like the rectangles on your “list” page, you’ll need to create the longest possible list (however many rows you need to demonstrate the concept or test with users --what is the purpose of this prototype? Don’t overdo it.) This should be as short as possible to save you work. Decide if you need only 3 rows, or maybe 10, or 20. You can use what you already have in “list” page. Group the 5 widgets you have in a “Row 1” then Ctrl+drag down to duplicate it. Repeat for each row you need. Hide them all. In the Page Loaded event you can then update “the next” row, using global variables, and show it to “add a row”.

If you use a Repeater widget for your list, it will be much easier to add new rows, sort, edit, hide/show, delete them, etc. Repeaters can be difficult to learn, but it is well worth the time spent.

No, you cannot create new global variables dynamically, but you can create them manually beforehand. Axure recommends 20 or fewer, but again you probably don’t need that many. Or, you can use one global variable and a “hash” to fake an array (because Axure doesn’t support arrays.) As an example, you can use a semi-colon to separate your names in your “Inputadded” variable: “Kyle;Jesse;John Smith;” See this recent thread for further details: Create tag from dynamic pannel element .

I created a demo of these approaches in this updated file.
add-remove-from-list.rp (118.3 KB)

#4

Thank you for your answer!

Yep it was a late a bit :smiley: I already solved the problem with “Faking pages”. I also contacted with axure support, and they write this message back to me: (i copy this here because it can be useful to somebody who have similar problem)

Thanks for reaching out! Repeaters in Axure RP do not have global datasets, so it’s a bit tricky to control adding and deleting rows in a repeater when the repeater is on a different page than the button controls. The easiest solution that we would recommend would be to have the repeater and button controls all on the same page, and to simulate different pages by putting each “page” into different states of a single dynamic panel. This would allow your “Add” and “Delete” buttons to target the repeater directly while still simulating changing pages.

That said, some of our forum power users have come up with clever ways to simulate the repeater being accessible on different pages by leveraging global variables and some advanced logic. Below is an example built by one of our power users that allows you to add and remove entries to a list via controls on another page. They’ve included a good explanation of the setup as well:

Another way that people have passed multiple data values from one page into a repeater onto a different page is with a single global variable, separating text with symbols such as “$”. This take a bit more leveraging of string functions in Axure RP but uses fewer variables than the first approach to get a similar result. Here’s a link to an example file where you can take a look at the logic to see if you’d prefer this method:

Hopefully one of these options helps!

This answer from Alyssa, but thanks again all you guys who tried to help me!