Exercise - Create the Dive Center canvas app

  • 18 minutes

In this exercise, you apply your learned knowledge by creating a Dive Center canvas app.

Scenario

You work at a dive center, servicing and selling dive gear. You manage the organization's Dataverse environment.

The service department employees require a Power Apps app that allows them to proceed with the check-in and check-out processes for customers who bring in dive gear for repairs.

To support these processes, the employees require the following features:

  • A list of customers for the repair services

  • The ability to store check-ins

  • A list of dive gear to identify the type of equipment to be registered

The users have expressed other requests, and you may also want to include the following features:

  • Enable the ability to proceed with check-outs for completed service requests.

  • Create new dive gear with picture, color, and gear type specified.

  • Capture pictures and the type of service at time of check-in.

  • Capture a signature to complete the checkout.

  • Create new customers.

Exercise

Prerequisite: The solution and data source referred to in this exercise are explained in the previous unit Exercise - Prepare for the Dive Center canvas app. Start in your environment titled Dive Center App, where your app Dataverse tables already reside.

  1. From your environment screen's command bar, select New > App > Canvas app to create a new canvas app named Service Request.

    Screenshot of a Dataverse solution. Focus is on New Canvas app menu option.

    Select Phone as the format of the canvas app. Then select Create.

    Screenshot of the new canvas app from blank form. Focus is on app name, phone format, and the Create button.

  2. In the Power Apps canvas studio, insert an image to use as the main logo.

  3. Position and size the image based on available screen estate and other components to include in the app. You can also adjust the background of the screen to the logo color by using the Fill property.

    Screenshot of the canvas app studio. Focus is on the Image control and the properties for the control.

  4. To provide navigation to subsequent screens, add three buttons for Check In, Check Out, and Exit. Define colors, positions, and size based on the expected user experience.

    Screenshot of the canvas app studio. Focus is on the Button control and the properties for the control.

  5. Rename default controls and screens by using names that represent their usage. This is best practice to identify them more easily. You can double click each control in the Tree view to rename it or use the ellipsis next to the control and select Rename.

    Screenshot of the canvas app studio. Focus is on the Rename option for the screen components.

  6. Create the check-in screen by selecting Duplicate Screen from the Home Screen and rename the new screen "CHECKIN".

    Screenshot of the canvas app studio. Focus is on the Duplicate screen option.

  7. Remove the buttons from the new screen, and then resize the main image to provide room for the form that is added for the check-in process.

  8. Insert an Edit form, connect the data source to the Dataverse Service Requests table, set the Default mode property of the form to New, and rename it frmCheckIn.

    Screenshot of the canvas app studio. Focus is on the Edit form and data source property for the control.

  9. On the form, move and resize it to use the screen real-estate, and select the Edit fields option from the Properties panel so you can modify the form's fields.

  10. Copilot auto-suggests what fields should be included and orders them accordingly, but let's arrange them for the check-in process as follows, by dragging and dropping them in the Fields panel as follows from top to bottom (you can refer to the image below): Name, Customer, Gear, Details, and Estimated Completion. (You can position any optional fields below these fields.)

    If you don't see these fields in your form, select the + Add field button to find/add them.

    Screenshot of the canvas app studio. Focus is on the Add field option for a form control.

    You will need to add data to your Dive Gear table, and perhaps your Contacts table too, to see the results in your combo box within the Gear and Customer portion of your form.

  11. Check your combo box control fields for the Customer and Gear cards on your form. They may not show the correct data, so you may need to unlock these cards and make a couple of tweaks. For the Customer combo box, ensure you update the DisplayFields property to show [fullname] and for the Gear combo box, set the DisplayFields property to ["msft_name"].

  12. To provide update and navigation functionality to the users, add two buttons at the bottom of the canvas screen. Update the text for them to "SAVE" and "BACK", and rename them as btnSaveCheckIn and btnBackCheckIn, respectively.

    Screenshot of the canvas app studio. Focus is on the Button controls and the properties for the controls.

  13. To update the form when the btnSaveCheckIn button is selected and allow a new check in to be processed, enter the following PowerFx script in the OnSelect property of the button:

    SubmitForm(frmCheckIn); NewForm(frmCheckIn);

  14. To navigate back to the HOME SCREEN when the btnBackCheckIn button is selected, enter the following PowerFx script in the OnSelect property of the button:

    Navigate('HOME SCREEN',ScreenTransition.Fade);

  15. To navigate to the CHECKIN screen from the HOME SCREEN when the btnCheckIn button of the HOME SCREEN is selected, enter the following PowerFx script in the OnSelect property of the button:

    Navigate(CHECKIN,ScreenTransition.Fade);

  16. To allow the users to close the app when they select the btnExit button of the HOME SCREEN, enter the following PowerFx script in the OnSelect property of the button:

    Exit();

  17. At this point, you can save and play the app to test the navigation between the screens and the creation of new check-in entries.

Optional features

The following section provides the steps required to proceed with the optional features of the app. Some of these features require tables and columns defined in the unit Exercise - Prepare for the Dive Center canvas app earlier in this module.

Check-out feature

To provide check-out functionality to the users of the app, follow these steps:

  1. Create a duplicate of the CHECKIN screen and rename it CHECKOUT. Rename the screen components, and then perform the following actions:

    1. Change the "SAVE" button to read "CHECK OUT".

    2. Edit the frmCheckOut fields to remove the Name field.

    3. Add/move the optional Attachments field to just under the Estimated Completion field.

    4. Set the Default mode to View so the form displays as Read-Only.

    Screenshot of the canvas app studio. Focus is on the properties for a form control and the renamed components of a screen.

  2. To provide a list of service requests that are available to check out, add a Drop down input to the top of the screen and then perform the following actions:

    1. Rename the drop-down to ddServiceRequestForCheckOut.

    2. Position the drop-down above the frmCheckOut form (resize your form accordingly).

    3. Set the Items property to the Service Requests table.

    4. Set the Value property to be the Name column.

    Screenshot of the canvas app studio. Focus is on the Drop down control and the properties of the control.

  3. To display the selected Service Request from the drop-down control, enter the following PowerFx script in the Item property of the frmCheckOut form:

    ddServiceRequestForCheckOut.Selected

  4. To display only the list of service requests that are available for checkout, enter the following PowerFx script in the Items property of the drop-down input:

    Filter('Service Requests',IsBlank('Actual Completion'))

  5. So the service request appears as checked out when the btnSaveCheckOut button is selected, enter the following PowerFx script in the OnSelect property of the button:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now()});

  6. To navigate to the CHECKOUT screen from the HOME SCREEN when the btnCheckOut button on the HOME SCREEN is selected, enter the following PowerFx script in the OnSelect property of the button:

    Navigate(CHECKOUT,ScreenTransition.Fade);

  7. At this point, you can save and play the app to test the navigation between the screens and the check-out process.

Create dive gear feature

To let users create new dive gear with color, gear type, and a picture, follow these steps:

  1. Create a duplicate of the CHECKIN screen and rename it DIVEGEAR. Rename the screen components, and then perform the following actions:

    1. Edit the frmGear properties to use the Dive Gear table as the data source

    2. Select the different fields that you want to provide to the users, including the Picture field.

    Screenshot of the canvas app studio. Focus is on the properties for the form control and the renamed components of the screen.

  2. To create the dive gear when the btnSaveGear button is selected and allow creation of new dive gear, enter the following PowerFx script in the OnSelect property of the button:

    SubmitForm(frmGear); NewForm(frmGear); Refresh ('Dive Gear');

  3. To navigate back to the CHECKIN screen when the btnBackGear button is selected, enter the following PowerFx script in the OnSelect property of the button:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. To navigate from the CHECKIN to the new Dive Gear creation you built, unlock the properties of the data card for the Gear field of the frmCheckIn form on the CHECKIN screen. Resize the combo box of the data card to provide space to insert an Add icon next to it.

    Screenshot of the canvas app studio. Focus is on the Icons control and the properties of the control.

  5. To navigate to the DIVEGEAR screen, enter the following PowerFx script in the OnSelect property of the Add icon:

    Navigate(DIVEGEAR,ScreenTransition.Fade);

  6. To ensure that the list of gear is updated when new gear is created, change the data source property of the Combo box to the Dive Gear table.

    Screenshot of the canvas app studio. Focus is on the Data source property of a combo box.

  7. At this point, you can save and play the app to test the navigation between the screens and the creation of new dive gear.

Capture pictures and service type feature

To let users capture pictures and type of service at time of check-in, follow these steps:

  1. Ensure you've added Type of service, Attachments, and Accepted On as fields to the frmCheckin form.

    Screenshot of the canvas app studio. Focus is on fields for a form.

  2. To set the Accepted On value to the date and time the service request is created, unlock the Accepted On data card, and then set the Update property with the following PowerFx script:

    Now()

  3. At this point, you can save and play the app to test the addition of pictures as attachments to the service request.

Capture signature feature

To let users capture a signature to complete a check-out, follow these steps:

  1. Add a container to your CHECKOUT screen and stretch the container to fit the entire screen. Set the Fill property of the container to: RGBA(149,149,149,0.4)

  2. Add the following labels to the container control

    Name Text Position/Size Other info
    lbl_SignatureCapture <empty> X: 0
    Y: 338
    Width: 640
    Height: 384    		 Fill: RGBA(255, 255, 255, 1)
    lbl_SignatureLine <empty> X: 0
    Y: 587
    Width: 640
    Height: 13    		 Fill: RGBA(0,0,0,1)
    lbl_CustomerSignature Customer Signature X: 21
    Y: 600
    Width: 560
    Height: 70    		 Font size: 21
    lbl_OK OK X: 388
    Y: 599
    Width: 60
    Height: 70    		 Font size: 21
    lbl_Cancel Cancel X: 492
    Y: 599
    Width: 122
    Height: 70    		 Font size: 21

    The result should be similar to the following screenshot.

    Screenshot of the canvas app studio. Focus is on the Text label control and the multiple label controls of a screen.

  3. Add the following Icons controls to the container in the CHECKOUT screen. They will appear just to the left of your Cancel and OK labels and will be selectable.

    Name Icon Position/Size Color
    ico_Cancel Cancel X: 448
    Y: 615
    Width: 35
    Height: 39    		 RGBA(255,0,0,1)
    ico_OK Check X: 346
    Y: 615
    Width: 35
    Height: 39    		 RGBA(51,176,75,1)

  4. To capture the customer signature, add a Pen input control into your container. Rename it PenCustomerSignature and set the properties for Show controls to Off. Set the position and size so it is above the lbl_SignatureLine control.

    Screenshot of the canvas app studio. Focus is on the Pen input control and the properties of the control.

  5. We will add a variable to display and hide the container with the signature-related controls based on the stage of the process. Replace the current OnSelect property of the btnSaveCheckOut button with the following PowerFx script:

    Set(flgSignature, true);

  6. To display and hide the container with the signature-related controls based on the status of the flgSignature variable, set the Visible property of the container to:

    flgSignature

  7. To provide the option to cancel the signature capture and get back to the CHECKOUT screen, set the OnSelect property of ico_Cancel with the following PowerFx script:

    Reset(PenCustomerSignature);Set(flgSignature, false);

  8. To update the Service Request with the captured signature and complete the check-out process, set the OnSelect property of ico_OK with the following PowerFx script:

    Patch('Service Requests',ddServiceRequestForCheckOut.Selected,{'Actual Completion':Now(),'Customer Signature':PenCustomerSignature.Image}); Reset(PenCustomerSignature); Set(flgSignature, false);

  9. At this point, you can save and play the app to test the signature capture when checking out a service request.

Create new customers feature

To let users create new customers from the CHECKIN screen, follow these steps:

  1. Create a duplicate of the CHECKIN screen and rename it CUSTOMER. Rename the screen components and follow these steps:

    1. Edit the frmCustomer properties to use the Contacts table as the Data source

    2. Select the different fields that you want to provide to the users, such as First Name, Last Name, Email, and Mobile Phone.

    Screenshot of the canvas app studio. Focus is on the properties of the form control and the renamed components of the screen.

  2. To create the customer when the btnSaveCustomer button is selected and allow new customers to be created, enter the following PowerFx script in the OnSelect property of the button:

    SubmitForm(frmCustomer); NewForm(frmCustomer); Refresh(Contacts);

  3. To navigate back to the CHECKIN screen when the btnBackCustomer button is selected, enter the following PowerFx script in the OnSelect property of the button:

    Navigate(CHECKIN,ScreenTransition.Fade);

  4. To navigate from the CHECKIN to this one, unlock the properties of the data card for the Customer field of the frmCheckIn form. Resize the combo box of the data card to provide space to insert an Add icon next to it.

    Screenshot of the canvas app studio. Focus is on the Icons control and the properties of that control.

  5. To navigate to the CUSTOMER screen, enter the following PowerFx script in the OnSelect property of the icon:

    Navigate(CUSTOMER,ScreenTransition.Fade);

  6. To ensure that the list of customers is updated when a new customer is created, change the data source property of the Combo box to the Contacts table.

    Screenshot of the canvas app studio. Focus is on the Data source property of the combo box.

  7. At this point, you can save and play the app to test the navigation between the screens and the creation of new dive gear.

Next steps

You now have learned how to create a Dive Center canvas app using Dataverse as the data source. Next, you will learn how to create a model-driven app.