# Cancel and Delete

You have probably noticed that in the current app you can only add new expenses. That means that the database and the list of expenses will continue to grow endlessly.

In this part, we will add a cancel and delete button which allows the user to either cancel a change that has not been committed or delete all the expenses of a person.

Similar to how the "Add new expense" button was implemented, the process to add this functionality requires three steps:\
1\. Add trigger properties\
2\. Add elements to increment the trigger properties\
3\. Add event handlers

## Adding Trigger Properties

We start by adding our needed trigger properties for our future buttons to the `PersonJson.json`.

{% code title="PersonJson.json" %}

```javascript
{
  "Html": "/HelloWorld/PersonJson.html",
  "FirstName$": "",
  "LastName$": "",
  "SaveTrigger$": 0,
  "FullName": "",
  "Expenses": [{}],
  "NewExpenseTrigger$": 0,
  "CurrentBalance": 0,
  "CancelTrigger$": 0,
  "DeleteAllTrigger$": 0
}
```

{% endcode %}

## Add Buttons to the View

Now, let's add the buttons that will increment these values in the same way that our save and new expense button does now.

Delete button:

{% code title="PersonJson.html" %}

```markup
<button value="{{model.DeleteAllTrigger$::click}}" onmousedown="++this.value">Delete all expenses</button>
```

{% endcode %}

Cancel button:

{% code title="PersonJson.html" %}

```markup
<button value="{{model.CancelTrigger$::click}}" onmousedown="++this.value">Cancel</button>
```

{% endcode %}

We'll place the delete button at the bottom of the page and the cancel button next to the save button.

## Create Event Handlers

The next step is to build handlers to react accordingly. We will also do that similar to the way we did with the other buttons.

{% code title="PersonJson.json.cs" %}

```csharp
void Handle(Input.CancelTrigger action)
{
    Transaction.Rollback();
}

void Handle(Input.DeleteAllTrigger action)
{
    Db.SQL("DELETE FROM Expense WHERE Spender = ?", this.Data);
    this.Expenses.Clear();
}
```

{% endcode %}

`Transaction.Rollback()` simply rolls back the state of your application to where you last ran a `Transaction.Commit()`.

The `DeleteAllTrigger` handler deletes all the expenses for the current `Person` in the database and clears the `Expenses` property in the view-model

## Result

You can now run your application again and rollback any mistakes you make or delete all expenses.

![](https://3760276903-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2Fstarcounter%2Fe48b74d0-8680-11e7-9944-1f85270462c6%2Fe504c380-8680-11e7-9944-1f85270462c6%2Fresizedpart6.gif?generation=1503327411295174\&alt=media)

If you get any errors, you can check your code against the [source code](https://github.com/StarcounterApps/HelloWorld/commit/e8424d4129d79379154281174cd31ad236bd8e22).