# 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.

![](/files/-LADqge-DW0tcLAXNSpD)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.starcounter.io/2.3.2/hello-world-tutorial/cancel-and-delete.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.