Selecting row of repeater, show values of selected row in widget

repeater-widget

#1

Hi all,

Im currently struggling with a repeater.

My Goal is as follows:

  • Starting from a text field, I can search for (in this case) accounts, within a repeater.
    Depending on what characters are entered in the text field, only a few or 1 result are shown. This works as desired
  • When clicking 1 result, I want the values of that row in the repeater, to be displayed in the text field that was used to enter the search.

At the moment, i can’t seem to figer out how to make these values be shown in the field. On top of that, the visualisation of the original search field (empty or search state) is different from the filled state.

I’ve added this part of my file here.

My coding skills are non-existing, so I hope someone can help me :slight_smile:
Thanks in advance!

Repeater issue.rp (143.9 KB)


#2

It is difficult to take advantage of repeaters without some coding skills. But learning repeaters can help build those skills.

Using your structure, I made a few changes for a quick solution on Page 1. I also show a more flexible and extensible solution on Page 2. But first, for Page 1…

Repeater issue get row data.rp (190.7 KB)

  • You already set up the “Veld Opdrachtgever” dynamic panel with one state for each row in your repeater, so clicking a row in the repeater just needs to set the corresponding state in “Veld Opdrachtgever”
  • I started by using the repeater’s row index to reference the state number. This doesn’t work because the search field sets a filter, thus changing the index of each row. For example, if you search for “cir” it filters the repeater, showing only the “Circusschool” row, so that row’s index changes from 4 to 1.
  • So, better to have a unique number for each row which doesn’t change.
    • I renamed your “Column0” to “Num” (for number) in the repeater datasheet (which was not being used.) I set numbers for each row, from 1 to 7.
    • In your repeater cell, I named the group of widgets, “row group” for clarity. When this group is clicked, it sets the panel state of “Veld Opdrachtgever” to the value of the “Num” column plus 1 (because the first state of this dynamic panel is the “Empty” search field.) So, Row 1 of your repeater corresponds to state 2 of “Veld Opdrachtgever”.
    • The interaction code for this Click or Tap event is
      Set Panel State Veld Opdrachtgever to [[Item.Num + 1]]
      • …where the square brackets, [[ ]] , are how Axure uses expressions and variables
      • …and Item.Num is how Axure refers to repeater column values.
      • “Item” means “this row”
      • The period, or dot, is a property delimiter
      • “Num” is the name of a column in the repeater datasheet. It can be thought of as a property of the row.
      • You can use the “Insert Variable or Function…” link in the Edit Value dialog (by clicking the little fx icon at the end of an input field in the interaction code builder to browse variables and built-in functions–and get this without having to type it in. Great time-saver!

To handle this, I added a Resized event to “Veld Opdrachtgever” that moves your dropdown (dynamic panel with your repeater in it) so it always stays right below automatically.

To help test and demonstrate this prototype, I also use the “Empty state…” rectangle to reset things to default.


The Page 1 solution works for what you have now. But if you ever need to change any content in the repeater–fix typos, rename an item, add more rows later, etc. you would also have to edit and/or add states to “Veld Opdrachtgever”. Much better if you can dynamically update the filled state with whatever is in the clicked row. A solution for this is shown on Page 2.

  • For this solution, you only need two states in “Veld Opdrachtgever”: Empty and Filled.
  • Clicking the “row group” in the repeater copies its data to the Filled state using the Set Text action and referring to the columns in its own row. Then it sets the panel state to “Filled” to show it.
  • Take a look at the repeater cell to see how it works. I created this quickly by clicking into the “Insert Variable or Function…” like so: