Exercise - Use source code in Visual Studio Code

Completed

In this scenario, you have been asked to create an account management app for your organization. You decided to create a canvas app and to make the app source available in text format to comply with the organization's legal requirements. Your company's development policies require that all assets that are created by developers are stored in the source control repository. Source code should be committed to the repository in text format, wherever possible, to simplify the process of collaborating in a project team environment and to make the source available for automatic scanning and differencing.

Requirements

To complete this exercise, you need to have a Microsoft Dataverse environment with database installed.

Objectives

The goal of this exercise is for you to learn how to:

  • Edit a canvas application in Visual Studio Code.

  • Package a canvas application in Visual Studio Code.

  • Upload a canvas application to Power Apps Studio.

  • Create and initialize local and remote Git repositories.

  • Synchronize local and remote repositories and work with changes.

Prerequisite

Make sure that you have completed the prior lab from this module before starting this exercise.

Exercise 1: Edit the application

In this exercise, you'll edit the account manager application in Visual Studio Code.

Task: Edit the app

In this task, you'll edit the application in Visual Studio Code.

  1. Open Visual Studio Code.

  2. If the Learn lab account manager folder doesn't open automatically, select File > Open Folder. Locate and open the Learn lab account manager folder.

  3. Expand the src folder, then expand the Src folder, and then select BrowseScreen1.fx.yaml file.

    Screenshot of the BrowseScreen file.

  4. Locate LblAppName1.

  5. Change the Text value of LblAppName1 to Companies and the Size to 28.

    Screenshot of the text value and size value.

  6. Locate IconNewItem1.

  7. Change the Navigate formula transition from None to CoverRight, and then add the following Trace() expression:

    ;Trace("New Item Selected")

    Screenshot of the Navigate formula transition and the Trace expression.

  8. Select the DetailScreen1.fx.yaml file.

  9. Locate LblAppName2.

  10. Change the Text value of LblAppName2 to Companies and the Size to 28.

  11. Select the EditScreen1.fx.yaml file.

  12. Locate LblAppName3.

  13. Change the Text value of LblAppName3 to Companies and the Size to 28.

  14. Select File > Save all.

Exercise 2: Pack and upload

In this exercise, you'll package the application and upload it to your environment.

Task: Pack and upload

In this task, you'll package and upload the application.

  1. Open Terminal and then run the following command:

    pac canvas pack --msapp "Account manager.msapp" --sources src

    Screenshot of the package application command.

  2. You might receive a warning message stating, Warning PA2001: Checksum mismatch. You can safely ignore this message.

  3. Switch to browser, go to Power Apps maker portal, and then make sure that you are in the correct environment.

  4. Select Apps.

  5. Select the Account manager app and then select Edit.

  6. Select File > Open > Browse.

    Screenshot of the Browse files button.

  7. Select the Account manager.msapp file that is located in the Learn lab account manager folder and then select Open.

    Screenshot of the canvas app to import.

  8. Select Preview the app.

    Screenshot of the Preview the app button.

  9. The label text should show the changes that you made in Visual Studio Code. Select the plus (+) icon to add a new account.

    Screenshot of the add new account button.

  10. The label text should show the changes that you made in Visual Studio Code. Fill out the form and then select Save.

    Screenshot of the create new account window.

  11. Select to open the new account.

  12. The label text should show the changes that you made. Close the app preview.

    Screenshot of the close application preview button.

  13. Select File > Save.

  14. Select Publish.

  15. Select Publish this version and then wait for the publishing process to complete.

Exercise 3: GitHub (Optional)

In this exercise, you'll create a new repository in GitHub, initialize the repository, and then work with changes.

Task 1: Initialize the remote repository

In this task, you'll initialize the remote repository.

  1. Go to GitHub and sign in. If time is your first, select Sign up and then follow the prompts to complete the sign-up process.

  2. Select the plus (+) button and then select New repository.

    Screenshot of the New repository button in GitHub.

  3. Enter Contoto_Man for the Repository name, select Private, and then select Create repository.

    Screenshot of the Create a new repository window, showing the Private option selected.

  4. Copy the URL and then paste it in Notepad to use later.

    Screenshot of the copy repository URL button.

Task 2: Initialize the local repository

In this task, you'll initialize the local repository.

  1. Open Visual Studio Code.

  2. If the Learn lab account manager folder doesn't open automatically, select File > Open Folder. Locate and open the Learn lab account manager folder.

  3. Select the View menu and then select SCM (source control manager).

  4. Select Initialize Repository.

    Screenshot of the Initialize Repository button.

  5. Hover the cursor over the Changes option and then select the plus (+) icon to Stage All Changes.

    Screenshot of the Stage All Changes button.

  6. Type Initial commit for the message and then select Commit (checkbox button).

    Screenshot of the commit changes button for the Initial commit.

Task 3: Add and sync a remote repository

In this task, you'll add a remote repository and then sync the repository.

  1. Select the ellipsis (...) button and then select Remote > Add Remote.

    Screenshot of the Add Remote button.

  2. Paste the repository URL that you copied previously and then select Add remote from URL. Sign in if prompted.

    Screenshot of the Add remote from URL button.

  3. Type Origin as the remote name and then press the Enter key.

    Screenshot of remote name set as Origin.

  4. Select the ellipsis (...) button and then select Pull, Push > Sync.

    Screenshot of the Sync repositories button.

  5. Select OK.

  6. Go to GitHub and open the Contoso_Man repository.

  7. Select to open the src folder.

    Screenshot of the repository folder.

  8. Examine the contents of the folder.

Task 4: Work with changes

In this task, you'll work with the changes.

  1. Switch to Visual Studio Code and then select the BrowseScreen1.fx.yaml file.

  2. Locate IconNewItem1 and then change the Navigate formula transition from CoverRight to UnCover.

    Screenshot of the navigation transition type.

1 Select File > Save all.

  1. Select Source Control > Stage all changes.

    Screenshot of Source Control, with the Stage All Changes button selected.

  2. Type Change transition as per UX guidelines for the message and then select Commit (checkbox icon).

    Screenshot of the commit changes button.

  3. Select the ellipsis (...) button and then select Push.

  4. Return to GitHub and open the Contoso_Man repository.

  5. Select to open the commit.

    Screenshot of the button to open the commit.

  6. Review the changes.

    Screenshot of the commit changes review.