Swipe Button to delete

BoHamad · ‎11-15-2021

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.

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:

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

Hope this article helps in some way for your work

BoHamad