Swipe Button to delete

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:

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

Hope this article helps in some way for your work

BoHamad