# Form and Date Picker

### Creating a form

Steps:

1. Insert a new screen
2. Insert a form on Edit mode
3. Change columns property to 2
4. Change the background color to "#FCFCFC"
5. Unlock datacards 'Start date' and 'Due date'
6. Replace the datepicker objects with lowcodera datepicker
7. Change the Input format property to "DD/MMM/yyyy"
8. Rename the form name to "**FormTasks**"

| Object     | Property        | Value             |
| ---------- | --------------- | ----------------- |
| DatePicker | InputFormat     | "DD/MMM/yyyy"     |
| DatePicker | X               | 30                |
| DatePicker | Width           | Parent.Width - 60 |
| Form       | BackgroundColor | "#FCFCFC"         |
| Form       | Columns         | 2                 |
| Form       | Name            | FormTasks         |

### Create New Item

On **Task Screen** create a new button. On the property OnChange use the following formula:

```csharp
NewForm(FormTasks);Navigate('New Task Screen', Fade)
```

Create a button and rename the label to "Save". On the OnChange property paste the below formula:

```csharp
SubmitForm(FormTasks)
```

{% hint style="info" %}
After submiting a form you can define the behavior for success or failure.&#x20;
{% endhint %}

OnFailure:

```csharp
Notify("Something went wrong" ,Error)
```

OnSucess:

```csharp
Back();Notify("Item saved", Information)
```

### Editing Items

Let's create a feature to edit items displayed in our gallery.

At OnSelect property of the gallery let's use the following formula:

```csharp
Set(_Record, ThisItem);EditForm(FormTasks);Navigate('New Task Screen')
```

In this snippet we are:

1. Setting a variable to store the record.
2. Setting the form mode to Edit
3. Navigating to the 'New Task Screen'

![A form is one practical way of creating, editing and viewing records.](https://3220951636-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FnUfK4SRGZUB01uvHGeDB%2Fuploads%2FYGqCEQqpNYfrOe8lxW5u%2Fimage.png?alt=media\&token=8ef5fbf8-0489-4522-92e3-27a74918bc19)

### Deleting Items

To delete the selected item let's create a new button and change the label to "Delete"

Use the below code OnChange property

```csharp
Remove(WorkProgressTracker, _Record); Back(); Notify("Item deleted", Information)
```
