Skip to main content
Microsoft logo
Power Apps
    • AI Builder
    • Automate processes
    • Azure + Power Apps
    • Build apps
    • Connect data
    • Portals
  • Pricing
    • Overview
    • Become a Partner
    • Find a Partner
    • Find partner offers
    • Partner GTM Resources
    • Blog
    • Customer stories
    • Developer Plan
    • Documentation
    • For IT Leaders
    • Roadmap
    • Self-paced learning
    • Webinars
    • App development topics
    • Overview
    • Issues
    • Give feedback
    • Overview
    • Forums
    • Galleries
    • Submit ideas
    • User groups
    • Register
    • ·
    • Sign in
    • ·
    • Help
    Go To
    • Power Apps Community
    • Welcome to the Community!
    • News & Announcements
    • Get Help with Power Apps
    • Building Power Apps
    • Microsoft Dataverse
    • AI Builder
    • Power Apps Governance and Administering
    • Power Apps Pro Dev & ISV
    • Power Apps Portals
    • Connector Development
    • Power Query
    • Power Platform Integration - Better Together!
    • Power Platform Integrations
    • Power Platform and Dynamics 365 Integrations
    • Community Blog
    • Power Apps Community Blog
    • Galleries
    • Community Connections & How-To Videos
    • Community App Samples
    • Webinars and Video Gallery
    • Canvas Apps Components Samples
    • Kid Zone
    • Business Value Webinars and Video Gallery
    • Emergency Response Gallery
    • Events
    • 2021 MSBizAppsSummit Gallery
    • 2020 MSBizAppsSummit Gallery
    • 2019 MSBizAppsSummit Gallery
    • Ideas
    • Power Apps Ideas
    • Community Engagement
    • Demo Extravaganza 2021
    • Demo Extravaganza - Components 2021
    • Power Apps Community Demo Extravaganza 2020
    • Experimental
    • Error Handling
    • Power Apps Experimental Features
    • Community Support
    • Community Accounts & Registration
    • Using the Community
    • Community Feedback
    cancel
    Turn on suggestions
    Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
    Showing results for 
    Search instead for 
    Did you mean: 
    • Power Apps Community
    • Galleries
    • Community App Samples
    • Swipe Button to delete

    Swipe Button to delete

    11-15-2021 12:52 PM

    BoHamad
    Helper I
    694 Views
    LinkedIn LinkedIn Facebook Facebook Twitter Twitter
    BoHamad
    BoHamad Helper I
    Helper I
    • Mark as New
    • Bookmark
    • Subscribe
    • Mute
    • Subscribe to RSS Feed
    • Permalink
    • Print
    • Email to a Friend
    • Report Inappropriate Content

    Swipe Button to delete

    ‎11-15-2021 12:52 PM

    Swipe to delete

    A great experience for a phone or tablet users is to swipe an item in a gallery to delete it, and it is making easier for user-experience in this article I wanna share with you my idea for that. Let's go deep 

     

    In this we need to  use,

    1- Gallery 

    2- Collection or List ( depends on you )

    3- Slider

    4- Button

     

    In OnStart for the App

    I used a collection for my case BUT,

    there is an important variable listed below

    //in OnStart for the app
    ClearCollect(
        EmployeeCollection,
        {
            Title: "Abdulrahman almutairi",
            Id: 1,
            Major: "Computer Engineer"
        },    {
            Title: "Hamad MK",
            Id: 2,
            Major: "Developer"
        },
        {
            Title: "Sarah Alcott ",
            Id: 3,
            Major: "Electrical Engineer"
        },
        {
            Title: "Bader Jassem",
            Id: 4,
            Major: "Industrial Engineer"
        },
        {
            Title: "Nader Fahed",
            Id: 5,
            Major: "Computer Engineer"
        },
    
        {
            Title: "Fatimah Jassmine",
            Id: 6,
            Major: "CEO"
        }
    )
    //Variables
    Set(varSliderValue,100)

    This is for on start

     

    For my screen I used a vertical gallery connected to EmployeeCollection. 

     

    Gallery.gif

    The data of the collection its not important its only for view, In this Gallery there are 3 buttons, a slider, and a text label these are the important components to use  for Swiping.

    1- FrontButton

    2- BackwardButton

    3- RemoveButton

    4- RemoveLabel ( you can use Trash icon instead ) 

     

     

     

    1- FrontButton

    width :

    If(Parent.TemplateWidth*Slider1.Value/100-20>Parent.TemplateWidth-RemoveButton.Width-20,
    Parent.TemplateWidth*Slider1.Value/100-20,Parent.TemplateWidth-RemoveButton.Width-20)

    height:

    Parent.TemplateHeight-20

    DisplayMode:

    DisplayMode.View

    Y:

    10 // for padding

     

    2- BackwardButton

    Width:

    Parent.TemplateWidth-20

    Color: Red

     For Height, DisplayMode, and Y same values for FrontButton

    3- RemoveButton

    width:

    90

    X:

    Parent.TemplateWidth-Self.Width-10

    OnSelect:

    Remove(EmployeeList,ThisItem)

    3- RemoveLabel

    width & Height & x & y & onselect same values for RemoveButton, and color is white

    4- Slider

    width:

    Parent.Width-RemoveButton.Width

    height:

    Parent.TemplateHeight

    Default:

    varSliderValue

     

    Set Show Value to false, and set the handle fill, Value fill, Rail to Transparent

    In OnVisible for the screen set varSliderValue to 100

     

    Here a sample for the swipe and delete

    swipe.gif

    Hope this article helps in some way for your work

    BoHamad

    Labels:
    • Labels:
    • Galleries and Forms
    • Mobile App Design and User Experience
    • button
    • Buttons
    • Collection
    • delete
    • Gallery
    Message 1 of 1
    694 Views
    2 Kudos
    Reply
    • All posts
    • Previous Topic
    • Next Topic

    Power Platform

    • Overview
    • Power BI
    • Power Apps
    • Power Automate
    • Power Virtual Agents

    Power Apps

    • Sign in
    • Sign up

    Browse

    • Sample apps
    • Services

    Downloads

    • Windows
    • iOS
    • Android

    Learn

    • Documentation
    • Support
    • Community
    • Give feedback
    • Blog
    • Partners

    • © 2022 Microsoft
    • Follow Power Apps
    • Privacy & cookies
    • Manage cookies
    • Terms of use
    • Trademarks