Form and Date Picker

In this session let's see how to create new records and use the date picker component

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:

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

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

SubmitForm(FormTasks)

After submiting a form you can define the behavior for success or failure.

OnFailure:

Notify("Something went wrong" ,Error)

OnSucess:

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:

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.

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

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