Often times we hit the delete button by accident and wish there was an undo button. We could add a validation modal with the “Are you sure you want to Delete this item?”. In some cases this will work, but in most cases this slows down the user experience and we can still possibly delete something by mistake before hitting save.

In this post we look at adding a temporary delete function that will allow users to hit “undo” until they hit the save button to apply their changes.

Below we have a gallery of expenses and we want to give the end-user the ability to Delete but also the ability to Undo the delete:

Before Delete

After Delete

Here are the steps to create this feature:

STEP 1:

On the “Delete” button set the OnSelect to :

If(IsBlank(LookUp(TempDelete,ThisItem.ID=tID,tID)),
Collect(TempDelete,{tID:ThisItem.ID}),
RemoveIf(TempDelete,ThisItem.ID=tID))

What this formula is doing is: If the item you delete does not exist in a collection called “TempDelete” Then Collect the ID of the item delete to this TempDelete Collection. If the item does exist then Remove it from the “TempDelete” Collection as your are “Undoing” the Delete.

*Note: I am using a SharePoint List in this example so ID will always be unique. If you do not have an ID column you will need to use a unique column in your dataset.

STEP 2:

Now using this formula: ThisItem.ID in TempDelete.tID we can now indicate that the row has been “Temporarily Deleted”

In this case we have all the labels with Strikethrough set to true when it is delete. On the Label under Strikethrough paste the code: ThisItem.ID in TempDelete.tID since the will return a true or false you do not need to include an IF statement.

On the Icon we have it changing from a “Trash” icon to an “Erase” icon. “Trash” when the item is not deleted and “Erase” when it is deleted. On the icon add the following formula: If(ThisItem.ID in TempDelete.tID,Icon.Erase,Icon.Trash)

You could also add a rectangle Icon to the row and have it with a faded grey or red. Basically any indication you want to add and just use the “ThisItem.ID in TempDelete.tID” to know if its deleted or not.

STEP 3:

Now we need to make these deletes apply when they hit the Save Button. In this case we delete them from the SharePoint list but you could also just have a Yes/No column called “Deleted” which you can mark true if they deleted for a consistent undo feature.

Here is the formula we use to delete from the SharePoint list on the save: If(CountRows(TempDelete)>0,ForAll(TempDelete, RemoveIf(ExpenseItems_1,ID=tID)))

We then run any other formulas concurrently or steps after as required.

Have any questions?

Don’t hesitate to email info@creospark.com for more information on this topic.