PCF Swipe Detection

Swiping is an integral part of the mobile experience, and the PCF Swipe control enables swipe detection on Power Apps Canvas apps. In this article, I will step you through how you can build, deploy/test the Swipe detection PCF control.

Demonstration

Code Logic

The logic for this app is quite simple, firstly we retrieve the starting swipe location and ending swipe location (x,y coordinates). If the difference is greater along the x axis this is considered a horizontal swipe, and conversely if the difference is greater on the y axis this is vertical swipe.

if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {

Next we check if the difference between the starting point and the end point on the axis plane is greater than 0 (indicating a right motion) or less than 0 (indicating a negative motion).

if ( xDiff > 0 ) {
  /* left swipe */ 			   
  this.touchDirection = direction.Left;
} else {
  /* right swipe */				
  this.touchDirection = direction.Right;
}     

Then we include another option, and that is Edge Detection. You can use this option to determine if the swipe is originating from the edge of the screen. We need a number of variables to check the starting point is at the edge of the screen. The variables we will need are:

• Starting coordinates (startX, startY)
• Direction of swipe (direction)
• Current Window dimensions (windowWidth, windowHeight)
• and our Edge of Screen allowance (detectionPixelDistance)

We can then use this within our code to test the logic required for setting the Direction.

switch ( this.touchDirection ){
   case direction.Down : 
      if( this.startY < this.detectionPixelDistance ){ 
           console.log ("Started from Top"); } break;
   case direction.Up : 
      if( this.startY > (this.windowHeight - this.detectionPixelDistance) ){ 
           console.log ("Started from Bottom" ); } break;
   case direction.Right :
      if( this.startX < this.detectionPixelDistance ){ 
           console.log ("Started from the Left" ); } break;
   case direction.Left :
      if( this.startX > (this.windowWidth - this.detectionPixelDistance) ){ 
           console.log ("Started from the Right"); } break;
  default:
      break;

Finally, once we have details about our swipe, we can output these variables from our PCF for use by other components in your canvas app.

return {			
   downSwipe: outDownSwipe,
   upSwipe: outUpSwipe,
   leftSwipe: outLeftSwipe,
   rightSwipe: outRightSwipe,
   windowHeightDetected: <number>outWindowHeightDetected,
   windowWidthDetected: <number>outWindowWidthDetected,
   xStartDetected: <number>outxStartDetected,
   yStartDetected: <number>outyStartDetected			
};

Testing

1. Compile and install the PCF code into your solution.
2. Insert the Slide control onto your canvas environment
3. Create a few labels and access properties of your slide control to make changes based on a given value. Here’s an example:

Now it’s time to preview your app.

If you choose to test your app within a browser, you need to turn on Developer Tools within your browser and switch to Device Mode. Your mouse drags are now detected as Touch Events.

Hope you enjoyed this quick overview of how to swipe using a PCF control.

Source Code

For source code, managed solution package, and the example Canvas App go to: https://github.com/365lyf/PCFControls/tree/master/Swipe