Add file function with repeater

#1

Dear Axure Community,
I would like to build the following function for a project with repeaters. Unfortunately I can’t figure out how to implement it. Can anyone help me with this.

Thanks for your support

SebastianAdd file function for repeater.rp (70.6 KB)

#2

Here I upload my first try with a repeater.
The Repeater “Target” should show the selected number and add a new "selection field. (In the Repeater "Target I have created a dynamic panel with the corresponding “States”).

Please for help, from there I stand in line.

Thanks Sebastian

Try with repeater.rp (56.8 KB)

#3

It looks like you are trying to add a row to a repeater (Target Repeater) based on the data in another repeater (Source Repeater.) Repeaters are fairly advanced and they can take a lot of time and effort to learn. You might want to start with one repeater before trying to use two repeaters. If you haven’t already, you will want to review the Axure documentation for repeaters:

Some observations and questions about your prototype…

  • User needs to click on the “Target” square to show the Source list (repeater). Then clicking an item in Source Repeater transfers its data to Target Repeater. Do you intend to replace the blank row in Target Repeater, or always add a new row?

  • Clicking any row in Target Repeater will show Source Repeater, and then clicking any row in Source Repeater will add a new row to Target Repeater. Is this the way it is supposed to work?

  • In Target Repeater you have a dynamic panel named “DP Target Repeater” with two states. In both states there is a rectangle widget named “Open Select”.

    • This is not the best practice because it can be hard to tell the difference between these two widgets in the interaction code. Best to name them uniquely.
    • What is the purpose of these two states?

  • In the Source Repeater there is one rectangle widget named Source Select, and clicking it has four actions:
    image

    • What is your intent of the Set Panel State action? When you make a direct change like this to a widget in a repeater, it will affect all rows in that repeater, so for every row in Target Repeater, the “DP Target Repeater” will be set to the “Selected File” state.

      • This state change likely would never be seen because the Add Rows action will update Target Repeater, resetting all widgets to their default, meaning all would be set to the “Open Select” state.
      • Is your intent to change the state only for the newly added row?

    • The Set Text action is redundant and won’t change anything. This text is already set via the Repeater Data because you’ve connected this widget in the “Source” column.

      • Were you trying to change the text here upon a click?

    • In the Add Rows action, it looks like you are trying to assign the (only) column named “First_Name” with the data in the current Source Repeater item, e.g., clicking on the “1” item would add a new row to Target Repeater with “1” as its value.

      • However, the expression, [[TargetItem]] does not refer to anything. Thus it results in a value of “Undefined” shown in the newly added row. “TargetItem” is an object pointer–which points to the yet to be added row in the target of the Add Rows action–which in this case is Target Repeater (with repeaters, “row” and “item” mean the same thing.) So, you are referring to an object which does not yet exist.
      • Instead, you want to use “Item” which points to the current row in the current repeater (e.g., the first row in Source Repeater.) Additionally, you need to include a property of this object, such as the “Source” column. In Axure, that expression is, [[Item.Source]], where “Item” means “this row”, the dot–"."–means “property of”, and “Source” is the name of a property–the first and only column in the Repeater Data sheet. When all of this, “Item.Source” is wrapped in double-brackets ( [[ ]] ) it is treated as an expression–so its value will be the data stored in the Source column of the current row. So, in the first row it will equate to “1”, in the second row it will equate to “2”, etc., because that is what is stored in the Source Repeater Data sheet.

I’ve updated your .rp file here with these changes…
Try with repeater.rp (79.2 KB)

  • I duplicated your page to “Try with repeater (1)”

  • I made these assumptions:

    • Clicking the light blue square–the first state, “Open Select” of “DP Target Repeater”–should add a new row.
    • When a new row is added, it should have the data from the row clicked in Source Repeater, and “DP Target Repeater” should be set to the “Selected File” state.
    • Clicking an added row–in “Selected File” state–should update this row and not add a new row.

  • To control which state of “DP Target Repeater” is shown, I added a conditional case to the Target Repeater’s Item Loaded event:
    image

    • This tests the value of the “First_Name” column, and if it is not blank then the dynamic panel is set to “Selected File”.
    • I also updated the connected widget in the Repeater Data sheet because it was connected to the wrong widget.
    • (The only blank row should be the first one, used to add a new row.)

  • In the first state of the Target Repeater’s dynamic panel, I added a white ‘+’ like you had in your original file, to better indicate that a new row will be added. I grouped this with the existing “Open Select” widget and moved the latter widget’s Click or Tap action to the group–so that clicking either the white plus or the blue square does the same thing. (I could have also placed a hotspot in front of these widgets without grouping them.)

  • In the second state, I renamed its widget to “Selected”

  • So, when Source Repeater is shown and one of its rows are clicked, it needs to know if it should add a new row or update an existing row in Target Repeater.

    • To keep track of this, the selection state of the “Source Select” widget is tested. If it is not selected, a new row will be added. If it is selected, the calling row will be updated.
    • So, in the Target Repeater, prior to showing Source Repeater, the clicked widget needs to first set the selection state of “Source Select” (again, doing this directly results in every row’s Source Select widget being selected.)
      • For the “Open Select” state it sets Source Select to “false” and unmarks all rows in Target Repeater before showing Source Repeater.
      • For the “Selected File” state it sets Source Select to “true”, unmarks all rows in Target Repeater (just in case), marks the current row–the one to be updated–and then shows Source Repeater.

  • After Source Repeater is shown and a user clicks one of its items (rows) it checks its own selection state in a conditional case:
    image

    • Notice that [[Item.Source]] is used when assigning the value of Target Repeater’s “First_Name” column.
    • If the Source Select widget is selected, it needs to update the calling row from Target Repeater. This should be the only marked row in that repeater.
#4

Wow, thank you for the detailed explanation and help.
Unfortunately I don’t work with Axure as often as I would like to, so I will follow your advice and
go to the “repeater school” :wink: Thanks for the tip with axure docs I had so no longer on the screen. :wink:

Thanks again for the quick and detailed help.

Best regards from Vienna
Sebastian