iPhone style slide gesture for navigation in Power Apps

A user on the community had added a slider control at the bottom of the screen to navigate from one screen to another and back. Because more often than not, we use the OnSelect of a button/label or use the OnSuccess property of a form to navigate to another screen. So this was a very simple yet a different way for navigation.

I wanted to try if I could extend this functionality and make it exactly how you would perform a slide gesture on an iPhone e.g. to answer a call. Or more importantly for an eBook app like Amazon Kindle which is where I think this can be most useful. Also, I did not want the slider to be visible and wanted to allow the users to perform the gesture anywhere on the screen.

To test this concept, I wanted to use a different concept than to simply navigate from one screen to another as that was easier. For this use case, if the value of a slider on screen 1 increased, you could navigate to the next screen using the OnChange property of the slider. And similarly, you could use the same concept to navigate to screen 3. Or if the value of the slider decreased, navigate to the previous screen i.e. screen 1.

I started off with an out-of-the-box (OOB) tutorial screen which uses a gallery to show the current text/image you are on in your navigation through a tutorial but all on the same page. The OOB screen uses the OnSelect property of a right and left navigation buttons to achieve this functionality.

The OnSelect property of the Next icon is:

Set(_guideStep, Min(_guideStep+1, Last(TutorialNavigator2.AllItems).Step))

The OnSelect property of the Previous icon is:

Set(_guideStep, Max(_guideStep-1, First(TutorialNavigator2.AllItems).Step))

Here are the steps I followed to implement the sliding functionality using a slider control:

• Set the Visible property of the Next and Previous icons to false
• Added a slider control at the bottom of the screen with the following properties:
  • Set a variable to the slider's current value on the OnSelect of the slider using the following expression:

    Set(currentValue, Slider1.Value)

  • Set the OnChange property of the slider to the following (using the OnSelect properties of the Next and Previous icons):

    If(
        Slider1.Value > currentValue,
        Set(
            _guideStep,
            Max(
                _guideStep - 1,
                First(TutorialNavigator1.AllItems).Step
            )
        ),
        Set(
            _guideStep,
            Min(
                _guideStep + 1,
                Last(TutorialNavigator1.AllItems).Step
            )
        )
    );

    If the new slider value is greater than the old slider value, use the expression from the OnSelect property of the Next icon and if the new slider value is lesser than the old slider value, use the expression from the OnSelect property of the Previous icon.

  • Set some other properties of the slider as shown below:
    • Default = 0
    • Min = 0
    • Max = 2000
    • Show value = false
    • Rail fill = RGBA(0, 0, 0, 0)
    • Value fill = RGBA(0, 0, 0, 0)
    • Handle fill = RGBA(0, 0, 0, 0)
    • Hover color = RGBA(0, 0, 0, 0)
    • Handle hover fill = Slider1.HandleFill
    • Pressed color = RGBA(0, 0, 0, 0)
    • Handle active fill = RGBA(0, 0, 0, 0)
• To allow slide anywhere on the screen, I added another slider covering the top half of the screen

With these properties in place, I first tested out the functionality on the computer. When that worked, I tested this on a phone. I have tried to capture the slide functionality on a phone. It wasn't easy and I am not sure if I did a good job at it. If the slide isn't easily noticeable, I can record a video showing the sliding with a finger. Anyways, here is what I have:

The slide wasn't too apparent on this so I used changed the screen colors to reflect Dark Mode:

Hope you like this and find a scenario to use this slide navigation!

Have fun! Get addicted!