Swipe Gesture in PowerApps

(ESTIMATION TIME: 4 MINUTES)

There are scenarios where drag’n’drop capabilities or gestures recognition missed so much in Power Apps. Fortunately there are some tricks that allows you to achieve some of these effects ie. Drag’n’Drop or Swipe. In this blog post I’ll show you how you can create a swipe gesture in PowerApps.

WOW Effect

On the last Modern Workplace Conference 2019 in Paris I had a session with Tomasz Poszytek about “Support in-field employees with Office 365, PowerApps and more“. During 50 minutes talk we explained business context of our solution, describe solution architecture and build the solution…from scratch! No prepared screens, no hidden code snippets or pre-configured platforms. The audience were like:

But the true bomb cam at the end. We showed what could be next steps and further development of the whole solution. We’ve presented versions 2.0 of our favorites parts (that was prepared before the session of course). Tomasz showed his “specialite” which was actionable message inside Microsoft Teams channel – it was beautiful and superbly improve readability of the message. My “specialite” was Power Apps for quick approve/reject of requested job.

Adaptive cards looks like this:

Power Apps looks like this:

And people were like:

Also the day before the session there was a question regarding implementation of swipe gesture in PowerApps on twitter PowerAddicts group. So I decided to write this post 🙂

Adoption is a key

If you want to increase your app adoption (for whatever reasons: revenue, targets or just ambitions) you have to care about UX (User Experience). Swipe behaviors can help you with that. How?

• Positive effect of the Swipe gesture is connected to our brain neurology. The move, if used in a write context, contribute to a feeling of empowerment in the user. The more positive effect your app has – the higher is its adoption.
• The tendency to abandon a shopping session is often attributed to choice paralysis — the inability to make a decision in the face of too many options and too much information. Swipe supports a binary output: yes or no, right or wrong, accept or reject, left or right.
• Swiping behavior are more attractive to mobile users
• Swipe will be natural in eCommerce, gastronomy and all company processes that requires binary decisions preferably with an image information

(Source: https://medium.com/app-partner-academy/the-psychology-of-swiping-in-apps-464895b2b485 )

Another point is that gallery control in Power Apps may cause delay in items display when user quickly scroll so using swiping behavior with one item display at a time can positively influence overall app UX.

The technique

As an example let’s implement Tinder-alike Swipe Gesture PowerApps . Items that user will move left or right are stored on a SharePoint Online list. To manage which item user should see on the screen we would use a variable that we will increase on every swipe. After every swipe user should see some feedback information. On the YT video above I’ve presented 2 different approaches (with extra screen and with simple toast notification). Below instruction applies to extra screen implementation.

The trick goes like this:

• On app start set a variable that we will be using as an iterator
  Set(Iterator,1);
• In screen OnVisible function load an item in the place equivalent to the iterator value
  Set(DisplayedItem,Last(FirstN(SPOSourceList,Iterator)))
• Place an item on the screen you want a user to move (ie. an Image1 control). Remember to set Image value to value of proper column of DisplayedItem.
• Add slider control and put it above of added item in tree view
• Set the item X value as:
  (‘Screen1’.Width*Slider1.Value/100)-Image1.Width/2
  Above function counts the position of the item center based on the slider handle value
• Remember to make slider big enough so a user always hit its handle. In my case I’ve used handle size of 200. Your screen should look and behave like this now:
  

• Now in slider OnChange place below function. The function make action once a slider handle will be placed on the left or right side of the screen. In my case I’m Navigating user to screen AND do Patch function to update data source.

If(
    Slider1.Value < 40,
    Navigate(Rejected,ScreenTransition.Cover);
    Patch(
        SPOSourceList,
        DisplayedItem,
        {<yourColumnName>: false}
    ),
    Slider1.Value > 60,
    Navigate(Accepted,ScreenTransition.CoverRight);
    Patch(
        SPOSourceList,
        DisplayedItem,
        {<yourColumnName>: true}
    );
);

• On both screens (Accepted and Rejected) I have invisible timers that after (OnTimerEnd property) 1 second (1000 ms) run following function

Set(Iterator,Iterator+1); //increase iterator
Reset(Slider1); //place next image to display in the middle of the screen
Navigate('Screen1',ScreenTransition.Fade) //navigate

And this is how you can implement Swipe Gesture in PowerApps! Simple, right? 🙂