Practice Lab 6 – Forms

In this lab you will use forms to create and edit records in a data source.

What you will learn

How to add screens
How to navigate between screens
How to use a form to create a record in a data source
How to use a form to edit a record in a data source
How to delete a record from a data source
How to link a form to a gallery

High-level lab steps

Create new screens
Navigate to a screen when a record is selected in a gallery
Navigate between screens
Display a record with a form
Delete a record
Edit a record with a form
Create a new record with a form

Prerequisites

Must have completed Lab 5: External data

Detailed steps

Task 1.1 - Edit the app

Navigate to the Power Apps Maker portal https://make.powerapps.com
Make sure you are in the Dev One environment.
Select the Apps tab from the left navigation menu.
Select the Booking Request app, select the Commands (…), and select Edit > Edit in new tab.

Task 1.2 - Add screens

In the app authoring menu, select Tree view.
At the top of the Tree view, select + New screen.
Select Blank.
Rename the screen to EditScreen.
At the top of the Tree view, select + New screen.
Select Header and footer.
Rename the screen to DetailScreen.

In the Tree view, expand BookingRequestList in the MainScreen.
Select NextArrow in BookingRequestList.

Set the OnSelect property of NextArrow in the formula bar to:

 Collect(colRequests, ThisItem);Navigate(DetailScreen, ScreenTransition.Cover);

Select EditScreen.
In the app authoring menu, select Insert (+).
Expand Icons.
Select Back arrow.
Set the OnSelect property of the icon to:
```
 Back()
```
Rename the icon to BackIconEdit.
In the Tree view, select the icon and select the Commands (…) and select Copy.
Expand DetailScreen.
Expand ScreenContainer.
Select HeaderContainer and select the Commands (…) and select Paste and select Paste.
Rename the icon to BackIconDetail.

Exercise 2 – Details screen

Task 2.1 - Add display form

In the app authoring menu, select Tree view.
Expand DetailScreen.
Expand ScreenContainer1.
Select MainContainer1.
In the app authoring menu, select Insert (+).
Expand Input.
Select Display form.
In the FormViewer’s properties, select Booking Requests for Data source.
Select 10 selected next to Fields.
Add or remove the fields so that they are arranged in following order :
1. Pet Name
2. Owner Name
3. Owner Email
4. Start Date
5. End Date
6. Decision
7. Cost
Close the Fields pane.
Set the Item property of the form viewer control in the formula bar to:
```
 BookingRequestList.Selected
```

Task 2.2 - Add label

In the app authoring menu, select Tree view.
Expand DetailScreen.
Expand ScreenContainer1.
Select FooterContainer1.
Select + within the Footer container.
Select Text label

Set the Text property of the label to:

 BookingRequestList.Selected.'Pet Name'

Task 2.3 - Add delete button

In the app authoring menu, select Tree view.
Expand DetailScreen.
Expand ScreenContainer1.
Select FooterContainer1.
In the app authoring menu, select Insert (+).
Select Button.
In the app authoring menu, select Tree view.
Rename the Button to Deletebtn.
Set the Text property of the button to:
```
 "Delete"
```

Set the OnSelect property of the button to:

 Remove('Booking Requests', BookingRequestList.Selected); Back();

Exercise 3 – Edit screen

Task 3.1 - Add Edit form

In the app authoring menu, select Tree view.
Select EditScreen.
In the app authoring menu, select Insert (+).
Select Edit form.
In the Form’s properties, select Booking Requests for Data source.
Select 9 selected next to Fields.
Add or remove the fields so that they are arranged in following order :
1. Pet Name
2. Owner Name
3. Owner Email
4. Start Date
5. End Date
6. Cost
Close the Fields pane.
Set the Item property of the form control to:
```
 BookingRequestList.Selected
```
In the app authoring menu, select Tree view.
Rename the form to BookingRequestForm.
Set the properties of the form as follows:
1. X=0
2. Y=125
3. Height=500
4. Width=Parent.Width
5. Columns=1
6. Layout=Horizontal

Task 3.2 - Add submit button

In the app authoring menu, select Tree view.
Select EditScreen.
In the app authoring menu, select Insert (+).
Select Button.
Drag the button below the form.
In the app authoring menu, select Tree view.
Rename the Button to Submitbtn.
Set the Text property of the button to:
```
 "Submit"
```
Set the OnSelect property of the button to:
```
 SubmitForm(BookingRequestForm)
```
Select BookingRequestForm.

Set the OnSuccess property of the form to:

 Navigate(MainScreen, ScreenTransition.UnCover)

In the app authoring menu, select Tree view.
Expand DetailScreen.
Expand ScreenContainer.
Select HeaderContainer.
In the app authoring menu, select Insert (+).
Expand Icons.
Select Edit.
In the app authoring menu, select Tree view.
Rename the icon to EditIcon.

Set the OnSelect property of the icon to:

 Navigate(EditScreen, ScreenTransition.Cover)

Task 3.4 - New record

In the app authoring menu, select Tree view.
Select MainScreen.
In the app authoring menu, select Insert (+).
Expand Icons.
Select Add.
In the app authoring menu, select Tree view.
Rename the icon to NewIcon.
Set the properties of the icon as follows:
1. X=0
2. Y=0
3. Height=80
4. Width=80
5. Color=Color.White