Lab Module 4:

Connect the data from the canvas app and

submit device request

WorkshopPLUS – Power Platform: Power Apps for Power User

Published: September 2022

Contents
Lab overview.......................................................1
Introduction............................................................................................................. 1
Objectives................................................................................................................ 1
Prerequisites............................................................................................................ 1
Estimated time to complete this lab........................................................................1
Scenario................................................................................................................... 1

Exercise 1: Ordering a device for approval.........2

Task 1: Create an edit form..................................................................................... 2
Task 2: Configure the title field................................................................................6
Task 3: Configure the Price and OrderStatus fields..................................................8
Task 4: Configure the Comments field.....................................................................9
Task 5: Add a button to submit the form...............................................................11
Task 6: On successful submission navigate to a new screen.................................13
Task 7: Verify successful submission.....................................................................16

WorkshopPLUS – Power Platform: Power Apps for Power User

Lab overview

Introduction
Now that you have created the list to store device order requests, let’s connect
Device Ordering App to this list and add a form to submit device approval requests.

Objectives
After completing this lab, you will be able to:
 Connect SharePoint list as data source
 Configure and add form
 Submit Form
 Add success screen
 Test the app
 Verify successful submission

Estimated time to complete this lab

45 mins

Scenario
The organization wishes to build an app using Power Apps to take advantage of No
Code/Low Code application development in the cloud. As part of this effort, you
are required to add new data source (SharePoint list), configure, add and submit
form, add/remove gallery controls, manipulate the navigation, and test the
functionality of your app.

1 WorkshopPLUS – Power Platform: Power Apps for Power User

Exercise 1:
Ordering a device for approval
So far, you have built the app. Users can browse and compare devices. In this
exercise you will add additional functionality so that users can create an order using
form and submit a device for approval. In this lab, device orders will be managed in
a SharePoint. Power Automate flow will be created in subsequent exercises to
manage the approval process.

Task 1: Create an edit form

In this task, you will add an Edit Form to the Compare Screen.

1. Select Main Screen

2. Select a few devices by clicking on checkboxes, while holding Alt-key

2 WorkshopPLUS – Power Platform: Power Apps for Power User

 3. Select Compare Screen.
You will now have the selected devices.

4. Select the Insert tab, open Input tree, and select Edit form. Rename Form1
to frmSubmitOrder

5. Select frmSubmitOrder
In Properties Pane, select Data source drop-down and then select
your DeviceOrder list (SharePoint data source)

3 WorkshopPLUS – Power Platform: Power Apps for Power User

 6. In Properties Pane, click Edit fields

7. The only fields you will show are: DeviceName, Price, Status and
Comments. Remove all other fields.

8. Set Columns property to 1 and Default mode to New

4 WorkshopPLUS – Power Platform: Power Apps for Power User

Task 2: Configure the title field

In the next few steps, you will configure each of the form fields.
1. Let’s start by configuring Title form field to display the manufacturer
and device name for the selected device.
For example, if the user selects the Surface Pro device, we want the
device order to have the title: “Microsoft – Surface Pro.”
2. Expand and select Title_DataCard1

Notice that the default card contains a few controls:

 StarVisible1: This is a label control that has an asterisk (*) which has
its Visible property set to true or false depending on whether the field
is Required or not. Since the Title field was marked as Required when
you configured the entity, its Required property is set to true.
 ErrorMessage1: This is a label that is just below the main data entry
field which displays error messages.
 DataCardValue1: This is the text input control where you can enter
the Title. For this scenario, we will set the title based on the selected
device.

5 WorkshopPLUS – Power Platform: Power Apps for Power User

  DataCardKey1: This is the label that displays the title of the field.
3. Select Title_DataCard1 and click Advanced

4. Click Unlock to change properties, so you can customize the card

For the next few steps, we will use the Advanced properties pane to
customize control properties within the form, note that you can
perform the same customizations using the property drop-down, and
formula bar in the top left of the studio.
5. Change DisplayName and Required fields as below

6. To display the selected item in the Title field, set the Default property
to

galCompareList.Selected.ManufacturerName & "-" &

galCompareList.Selected.Title

Default galCompareList.Selected.ManufacturerName & "-"

& galCompareList.Selected.Title
{
7. Change the DisplayMode to DisplayMode.View. This will prevent users
from changing the value within the text box. (you must do this in the
Advanced properties panel on the right side):

6 WorkshopPLUS – Power Platform: Power Apps for Power User

Task 3: Configure the Price and Status fields
In this task, we are going to set the price to the price of the item and then
make it read-only.

1. Expand Price_DataCard1.
2. Select the DataCardValue2.

3. Select the Advanced tab and click Unlock to change properties.

4. Change the Default property to:

Text(galCompareList.Selected.Price, "[$-en-US]$##, ###.00")

Default Text(galCompareList.Selected.Price,"[$-en-US]
$##,###.00")

7 WorkshopPLUS – Power Platform: Power Apps for Power User

 Select Price_DataCard1 and change the DisplayMode property to
DisplayMode.View.

5. Select Status_DataCard1 and in Advanced property tab Unlock to

change properties

6. For Status_DataCard1, set DisplayMode to DisplayMode.View

7. For Status_DataCard1, set Default property as "Pending"

Task 4: Configure the Comments field

1. Expand the Comments field and select the DataCardValue.

2. Select the Advanced tab and Unlock to change properties.

8 WorkshopPLUS – Power Platform: Power Apps for Power User

 3. Change the Mode to TextMode.MultiLine

4. Select the Properties tab and change the Size -> Height value to

80.
5. Optionally, you may select the Text Input control DataCardValue4
and set its HintText property to: “Enter justification” (without quotes).

9 WorkshopPLUS – Power Platform: Power Apps for Power User

Task 5: Add a button to submit the form

1. Select the Main Screen

2. Copy the Compare button from the first screen, which has the correct
color values.
3. Go back to the Compare Screen and paste (Ctrl+V) the button.
4. Position it in the bottom right of the screen, center aligned with the
Form.
5. Make the button larger – you can resize to 280x60 using the Properties
pane on the right.
6. Set the button’s Text property to “Submit device request”

7. Rename the button to btnSubmit

8. The button should be enabled only if a device is selected. To do this,
change the button’s DisplayMode property to:

If(!IsBlank(galCompareList.Selected), Edit, Disabled)

DisplayMod If(!IsBlank(galCompareList.Selected), Edit,

e Disabled)

for alternate/European locales, enter:

DisplayMod If(!IsBlank(galCompareList.Selected); Edit;
e Disabled)
Note: You might notice the exclamation mark (!) in the formula !
IsBlank() Normally if you just have IsBlank() the check is for blank.
Adding the exclamation mark (!) in front of it changes it to check if it is
NOT blank.
9. Next, we are going to configure what we want to happen when the
button is clicked. For btnSubmit, set the OnSelect property to:

10 WorkshopPLUS – Power Platform: Power Apps for Power User

 SubmitForm(frmSubmitOrder); NewForm(frmSubmitOrder)

OnSelect SubmitForm(frmSubmitOrder); NewForm(frmSubmitOrder)

Now, when the button is pressed, the form data will be submitted to
the SharePoint list, and a new form will be set.
10. Finally, the submit form should look like below:

11 WorkshopPLUS – Power Platform: Power Apps for Power User

Task 6: On successful submission navigate to a new
screen

1. Create a new screen (Success) and rename it as Success Screen

2. Update the text of the new screen as shown below

“Device request was successfully submitted”

OR
make it a bit more fun and add a giphy or another image or icon
instead. Remove the blue circle and icon (just delete everything in the
blue circle) and click on “Insert” > “Media” > “Image”:

12 WorkshopPLUS – Power Platform: Power Apps for Power User

 and then click on the right panel “Add an image file” in the “Image”
box:

There is an image in the library on the SharePoint site that you can
download, as in the screen shot above. It is called “thumbsup.gif”. Use

13 WorkshopPLUS – Power Platform: Power Apps for Power User

 that and position it as you like. Go to Citizen Development Events - App
in a day - All Documents (sharepoint.com) and download it there.
3. Insert a Timer control to the Success Screen

4. Select Timer1 and in Advanced property pane specify the following:

OnTimerEnd: Navigate(‘Main Screen’, None)

Duration: 3000
Reset: true
AutoStart: true
Visible: false (optional, to make timer invisible)

14 WorkshopPLUS – Power Platform: Power Apps for Power User

 5. Select Compare Screen > frmSubmitOrder > Advanced, set
OnSuccess value:

Navigate(SuccessScreen, ScreenTransition.Fade)

OnSuccess Navigate('Success Screen', ScreenTransition.Fade)

for alternate/European locales, enter:

OnSuccess Navigate('Success Screen'; ScreenTransition.Fade)
6.

6.

15 WorkshopPLUS – Power Platform: Power Apps for Power User

Task 7: Verify successful submission

1. Save your app by pressing Ctrl+S

2. Test application by selecting a few laptops and by submitting an order
for one of them. Make sure that navigation between screens works
correctly.
3. Browse to the SharePoint list with Order Data
4. Make sure successful submissions are stored in the list with status
“Pending”.

16 WorkshopPLUS – Power Platform: Power Apps for Power User