List where items can slide and be clicked

mobile-prototyping

#1

New user here so forgive me if it’s something I haven’t come across in the tutorial. I just wanted to start trying some things out. I’m trying to create a list similar to how checking email on the Gmail app functions.

I’m trying to create a list where the items of the list should be buttons that can either be clicked or slide for a prompt to delete. I’ll keep scouring the forums/tutorial, but any help would be appreciated.


#2

Here’s one thread from earlier this year:

That solution uses a repeater for the list items, and repeaters are fairly advanced. I created an updated version using nested dynamic panels to show the basics of how to implement the slide to delete–more accurately, slide to expose buttons underneath. If you want to show a prompt (e.g. popup dialog) you can do that with an action to show that prompt widget immediately after the Move action. Take a look at Page 1 of the file below. On Page 2 is the solution using a repeater; a big advantage of the repeater is that only one “list item” and its behaviors need to be created–the rest of the list items are duplicates–they are repeated.

When you combine possible actions on one widget–either click or drag (slide)–it is important to isolate those events. This can be tricky, so let’s look at what happens in fine detail.

  • A Click or Tap event involves:
    • Pressing down (on mouse button or with finger/stylus)
      • This event is actually ignored, but is necessary for a “click”
      • Any mouse/finger/stylus (cursor) movement is ignored
    • Releasing mouse or finger/stylus
      • If the cursor is over the area of the widget, the Click or Tap event is fired
      • Else if not over area of widget, nothing happens (with regards to a “click”)
  • A Dragged event involves:
    • Pressing down
      • Cursor movement is handled. Even 1 px of movement fires the Drag Started and Dragged events.
      • (This is where you can move your list item)
    • Releasing
      • The Drag Dropped event fires
      • Other events, like Click or Tap can also fire–but sometimes not. I’ve found this is unpredictable–it’s like a “race horse” scenario, where one or the other happens first, and sometimes both.
      • In your situation you want to only handle only one, not both. In other words, you need figure out if the user intended to “slide to delete” or “click” to do something else.

A method I devised years ago is to use the Dragged event to set the value of a global variable (or text value of a widget as a “local page variable”) --something like "Set value of isDragged to “true”. " and test for this in a Drag Dropped and/or Click or Tap or Mouse Button Up event. I’ve found that Mouse Button Up is more reliable when used in combination with drag events. You can read through my description of other details about this in thread above and inspect the code in my demo file below. Let me know if you have any questions.

click or slide list row.rp (130.9 KB)