I’m experiencing a few puzzling issues that I’m hoping someone might help me resolve.
First, I’m encountering a strange occurrence where a circle inexplicably appears on the second page each time I open my website for the first time. Can anyone explain why this might be happening or suggest ways to prevent it?
[[Screenshot Removed]]
Secondly, when I try to remove an item from page two, it does not appear on the first page as expected. Are there any specific settings or configurations that could influence this behavior?
The last hurdle I’m facing is related to the movement of items between pages. When I try to transfer items from page 1 to page 2, only one item seems to move, despite my intention to shift multiple items. Has anyone else experienced this, and if so, how did you manage to overcome it?
Well, this is because you have that circle in your repeater, and the Page Loaded event adds one row to this repeater. If you don’t want it shown by default, you can hide it by default in the editor. Then you can add a conditional case to the repeater’s Item Loaded event to show it when you want it shown. If you don’t want anything shown in the repeater by default, then you need to set it that way in the editor. In your case you could set the text values for all widgets to be blank, and hide the ellipse and ‘x’ shape. Or, another approach you could take, if you want this circle shown whenever there is data to show, then don’t add a row to the repeater if your associated global variables are blank. You can add a conditional case to Page Loaded that tests the value of all global variables used to create rows in the repeater–or maybe even just one critical global variable, something like,
Page Loaded
Case 1
If length of value of Repeater_File_name is greater than “0”
Add Rows
Moved Repeater add 1 row…
Whenever you change a page in the browser (prototype player) that new page is reset when it loads, so however you have it set in the editor is how it will look each time it loads. If you want to update or change anything from the default, like showing some item removed from another page, then you’ll need to track this by storing all necessary information in global variables prior to leaving Page 2 and then using this data on Page 1 to make the necessary changes–for example, in the Page Loaded event, or the Loaded event of any widget(s) that need to change. …You are already doing this on Page 2, so you just need something similar for Page 1.
So far, you’ve only provided functionality to copy one row at a time on Page 1, and add one row on Page 2. Storing data for N rows is possible but significantly more difficult in Axure because it doesn’t support arrays. So you either need (N * repeater_items) number of global variables (in your case, if you wanted to transfer 3 rows you’d need 3 * 8 = 24 global variables) which is tedious and limited, or you need to manually create a format for each global variable so it can be stored and later retrieved like an array. Retrieving data (e.g., on Page 2) from an array-like global variable can be quite tricky, but it is possible. See this thread for an example:
However, you really only need to go that route if you absolutely must have both of these two features:
Truly unique browser pages.
Just because you are envisioning two different browser pages, and/or the app or site will be coded that way, doesn’t necessarily mean your prototype needs to be structured this way. You can do all of this on one actual page. Just place all the content from each “page” in a dynamic panel state.
For your example so far, you could have a dynamic panel named, “Page Panel” with two states: “1” and “2”.
Select all widgets currently on Page 1 and make a dynamic panel from them.
Then, add a new blank state and paste all widgets from Page 2 into this second panel state.
Wherever you have an Open Link action, change it to a Set Panel State action.
Because everything is on one actual page, you don’t need global variables, and it is far easier to have each row “copy itself over” to another repeater on the same page–with an Add Rows action and referring to this row’s own content from the datasheet–and then removing “this” row. This is especially easier if you have dynamically editable repeater content.
Dynamically editable repeater content.
If a user can add a new row with unique data to the repeater, or if the repeater has a text field or ability to hide/show elements, that makes it “dynamically editable” --in other words, things can change in unique and unknown ways. For example, maybe the filename, date, or status could be changed.
This would require saving each row content in global variable(s) as you’ve done so far, in addition to some method to create an array structure in these variable(s), and a method to parse the array(s) and create rows using that stored data.
So far, I don’t see any affordance for editing or adding rows in your example, so all the repeater rows/data on Page 1 are static. If this is the case, and you can’t live with just one actual page, then you don’t need to store all the data in a row, you only need to store a unique identifier for each row, for example, a row number or the filename ( [[CFile_]] in your datasheet).
Here is a demo of how this can work. See the “Solution 1” folder in this updated .rp file for a single-page approach, and the “Solution 2” folder for a multi-page approach. Repeater_Global_variable_ask1.rp (203.5 KB)
Essential details for Solution 1:
Everything is on one Axure page.
No global variables required.
I added a “Page Tabs” panel for page navigation.
All the widgets from your original Page 1 are in state “1” of a dynamic panel named, “Pages Panel”, and all widgets from your original Page 2 are in state “2”.
There are no rows assigned to the second repeater in state 2, so it is blank by default.
The “Move” button in the first repeater adds a row to the second repeater, using its own data to create it, then shows the “Moved” state for the button, and then marks its own row.
When the “Page 2” tab is clicked it changes the Pages Panel to “2”, and whenever Pages Panel changes state to “2” it deletes all marked rows from the first repeater.
The “x” button in the second repeater adds a row to the first repeater, using its own data, then deletes its own row.
Essential details for Solution 2:
On both Page 1 and Page 2 the repeaters have the same datasheets. The only difference in the repeater widgets is the “Move” button and “x” button.
Clicking the “Move” button in any row on Page 1 adds the value of CFile_ (its filename) to the Repeater_File_name variable, using a semi-colon as a delimiter.
Clicking the “x” button in any row on Page 2 removes the value of CFile_ from the Repeater_File_name variable.
On Page 2, The Page Loaded event tests the value of Repeater_File_name and applies filters accordingly.
If no row has been moved, Repeater_File_name should be blank, and if so a filter hides all rows.
For each possible row, the value of Repeater_File_name is tested to see if it contains the value of CFile_. If it does, a filter is added with an “any” option, thus showing that row in the repeater.
On Page 1, The Page Loaded event tests the value of Repeater_File_name and applies filters accordingly. But, the logic is inverted; if Repeater_File_name contains a row’s filename that row should not be shown (because it has been moved) so the filter is applied with a “does not equal” rule.
Methods I’ve used in RP 8 and RP 9 to create and parse a pseudo-array in a global variable to apply multiple filters (one per possible row) don’t seem to work any longer in RP 10. The basic approach is to walk through “array elements” in the global variable and apply a filter for each element, using a recursive function. However, in RP 10 each additional filter cancels out any previous filters, regardless of selecting the “any”, “all”, or “smart” filter options. My guess is the multiple filters don’t get unique names/identifiers, so instead of adding another filter for each recursive loop it replaces the same filter. So, instead I cheated a bit and created one conditional case per possible row, hard-coding values from the repeater. (For a prototype I consider this an acceptable hack, however if you change any values in the first column of the repeater or add additional rows you’ll need to update the Page Loaded interaction code.)
First and foremost, I’d like to express my appreciation for all the help received so far. It has been invaluable in resolving my previous concerns. Now, I have a new challenge and I believe your expertise could help me find a solution.
My current task involves moving a row from one page to another. Rather than just indicating “moved,” I’m trying to set it up so that clicking on ‘move’ will actually transfer the row to the second page. Please provide insights on how to make this happen.
What changes need to be implemented to allow this action? Are there any specific settings or scripts that I should be considering?
The method in the “Solution 2” folder of the file I posted does just that. Navigate to Page 2 and you’ll see the transferred row(s). Then, navigate back to Page 1 and the transferred rows are not shown.
If you want to show Page 2 right away when a user clicks a “Move” button, just put in an Open Link action after setting the global variable value. Or, if you want to see the row on Page 1 removed right away, just choose “Reload current page” in the Open Link action. Or, you could apply a filter right away to filter out the current row.
There is no actual Page 2 in Solution 1. I explained in the post above how it works–a row is transferred to the “virtual page 2” (the second dynamic panel state) by adding a row to the repeater in the second state. Each column’s data value is set using the current row’s value.
Here is the Axure documentation for Repeaters, and Text Fields and Text Areas, which you can use to learn how to add and manage rows in repeaters, and provide editing features.
