Advanced Prototyping: Dynamic Selection of Elements

advanced-prototyping
mobile-prototyping

#1

Hello!

I am trying to prototype a similar interaction to this one:

Where the user can select logos and have them appear in a drawer. I need this to be dynamic, so they appear in the order they select them.

Any ideas?


#2

I would arrange this with two repeater lists, one for the main area (grid of big logos) and one for the drawer area. When a logo is selected, it can add a row to the drawer repeater (using its own data), which would automatically add to the end of the list, so in the order it is selected. Style the repeaters as horizontal, with the first repeater set to “Wrap (Grid)” with 3 items per row. To set up the graphics within each repeater, I would recommend a dynamic panel with a state for each item (each team in your example) and simply change the state in the Item Loaded event as needed to set the team. If you aren’t familiar with repeater widgets, I could set up a demo for you to inspect.


#3

Hello! Thanks so much for the reply!

I have the repeater widget down, but am less familiar with the dynamic panels. When I tried to set this up, I was using repeaters and was able to get a selected state for each one, but not get the item to appear in the drawer.

I had not done a repeater for the drawer, though. When you say add a row using its own data, how do you link the two? With an interaction?


#4

Hi!

While I was typing this, mbc66 responded. It’s a different approach, not necessarily better or worse. Mine certainly isn’t any simpler, though! :rofl:

I’d use a horizontal repeater that is prepopulated with all of the icons, one row for each. This repeater will have three columns in its dataset, though you will display only the image.

  • Image
  • name
  • dateStamp

Make dateStamp initially empty for every row, sort on that row numeric ascending, and add the following filter, on Loaded (not Item Loaded) of the repeater:

[[Item.dateStamp != '']]

(Those are single quotes above.) This essentially says, “Don’t show rows where the dateStamp row is empty.” Since that row is empty to start with, no rows will initially show.

To show a row, use the following Update Row command

Update rows in repeater set column dateStamp to [[Now.valueOf()]] where Item.name equals "icon name"

This will add a date stamp (in milliseconds of the current date/time), so the sort added on Load of the repeater will put it last.

To clear the icon, use the same command above, but set the dateStamp column to empty. I’ll put together a quick example, since it’s my lunch break.


#5

Thank you so much! Would this make it so the user could just tap one in the grid to select? You all are so helpful, I am really thankful!


#6

Hi!

After implementing this, I like mbc66’s answer better. I forgot what a pain it is to use an image column in a repeater. That said, here is the file. Notes:

I changed the empty state of the column to “none” rather than blank, because as it turns out you can’t set a column to blank using the update command, which is a bug.

On click, I toggle the selection state of the icon. The icon’s selected style effect sets its fill color to orange.

I use the On Selected and On Unselected events of each icon to update the corresponding column in the repeater, either with the timestamp, or with “none”

add icon example.rp (101.3 KB)


#7

Thank you so much!

I am downloading this now.

I really appreciate you taking the time to help with this.


#8

Yes, by “its own data” I mean that each row has data in the dataset–the values in each cell–e.g., a column of “Team” can have row-by-row values of “Chelsea”, “Liverpool”, etc. So, when an item is clicked and selected in the first “teams” repeater, it can add a row to the drawer repeater using [[Item.Team]] to reference “it’s own data.” Likewise, if a selected row is clicked to unselect it, it can delete the associated row. Here is a screenshot from my demo .rp file below:

image

…and the “add 1 row” dialog looks like:
image

To make this work with images, the second “drawer” repeater needs to be preloaded with an image for every possible item. My method uses a dynamic panel with a state for each image/team. @josephxbrick uses a method in which each image is pre-loaded in a dataset column (using the “Import Image” option for a dataset cell; right-click a cell to find this feature.) Either works, as you can see. Actually, my first thought was to do something like this but I didn’t want to mess with a way to sort and ensure the order of inclusion. I like his timestamp method, though. Like @josephxbrick, I use the Selected and Unselected events to modify the second repeater, adding a row or deleting a row.

The first repeater is not critical to include, but since they are two versions of the same thing, it was fairly easy to just make it, then duplicate the first “teams” repeater for the “drawer” repeater and resize things. The repeaters are located inside dynamic panels to allow for scrolling. The drawer panel scrolls horizontally (hold down the shift key when scrolling to use on a desktop) in a nested panel–such that the outer panel hides/masks the scrollbar (you can do same for the top teams panel if you like.

build repeater 2 from 1.rp (667.7 KB)


#9

This is so great, I am going to download it now. The using its own data part makes total sense now.

Love the addition of the horizontal scroll on the drawer.

Thank you so much to you and @josephxbrick!


#10

I like the two repeater approach, because I image you’ll want to remove icons from the drawer once added by interacting with the icons in the drawer, and when you do so you’ll want he corresponding icon in the grid to become deselected. Two repeaters is the way to go for that.


#11

Agreed that is what I had in mind, so this solves for that too!