diff --git a/README.md b/README.md index 344b8c1..b34ec09 100644 --- a/README.md +++ b/README.md @@ -9,9 +9,7 @@ Welcome to Power Platform Advocates GitHub repository. In this repo, the Power P ## Workshops - [Power Platform & Mixed Reality](/Workshops/MR/README.md) -- [Power Apps & DotNet](/Workshops/DotNetAndPowerApps/README.md) - [Power Apps & Java](/Workshops/JavaAndPowerApps/README.md) -- [Power Apps & Python](/Workshops/PythonAndPowerApps/README.md) - [Power BI & Synapse](/Workshops/SynapsePowerBI/README.md) ## Contributing diff --git a/Workshops/DotNetAndPowerApps/Lab0/README.md b/Workshops/DotNetAndPowerApps/Lab0/README.md deleted file mode 100644 index 4699980..0000000 --- a/Workshops/DotNetAndPowerApps/Lab0/README.md +++ /dev/null @@ -1,86 +0,0 @@ -# Lab 0 - Setup your environment - -> NOTE: -> -> If you already have a Power Platform environment or an Azure account, you're more than welcome to use any of those for this workshop. However, be careful: when you are using an environment where you are not the admin, it could happen that you don't have enough rights to perform all actions. You could for instance run into a Data Loss Prevention (DLP) policy which could block the usage of the custom connector you are going to be building later in this workshop. If you're not an admin for your Azure account, you might be blocked from creating certain resources needed to complete this workshop as well. - -## Step 1: Create your own developer tenant - -You can create your own developer tenant through the Microsoft 365 Developer Program. Go to the Microsoft 365 Developer Program website and make sure to register for a free 25-user tenant. When you are done creating the tenant, make sure to go to the next step. - -1. Go to [developer.microsoft.com/microsoft-365/dev-program](https://developer.microsoft.com/microsoft-365/dev-program) -2. Click **Join Now** - -![Screenshot of Join Now Call to action on the Microsoft 365 Developer Program page](/Workshops/DotNetAndPowerApps/Lab0/assets/join-m365-dev-program.jpg) - -3. Sign into your Microsoft account or Create a Microsoft account - -> **Note**: If you’re creating a new account, you’ll need to validate the account with a phone number. - -4. Complete the **Join the Microsoft 365 Developer Program!** form. -5. On the **Set up your Microsoft 365 E5 sandbox** page, make sure that *Instant sandbox* is selected and then click **Next**. - -![Screenshot of the Set up your Microsoft 365 E5 account page](/Workshops/DotNetAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png) - -6. Finish setting up your *Instant sandbox* by choosing your country/region, admin username, and admin password. - -> **Note**: Make sure to note down / remember this admin password because this will be the password for your developer tenant. - -7. Click **Continue**. -8. Provide a valid cell phone number and choose **Send code**. Enter the code that you receive, and then choose **Set up**. - -> **Note**: You must use a valid cell phone number and not Voice over IP (VoIP). You can only have one Microsoft 365 Developer Program account associated with your phone number. - -After the subscription is created, your subscription domain name and expiration date appear on your profile page. - -9. Copy/Save the Administrator email address for signing into the Power Apps portal. - -![Screenshot of the Microsoft 365 developer subscriptions page](/Workshops/DotNetAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png) - -## Step 2: Add a Power Platform Developer account to the Microsoft 365 Developer tenant you've just created - -The Power Apps Developer Plan gives you a free development environment to build and test with Power Apps, Power Automate, and Microsoft Dataverse. In this workshop, the Power Apps Developer Plan enables you to also create a custom connector. - -![Screenshot showing the Power Apps Developer plan features](/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png) - -1. Go to [powerapps.microsoft.com/developerplan](https://powerapps.microsoft.com/developerplan). - -2. Click **Get started free**. - -3. For **Step 1**, enter your **M365 Dev Program** email address (the **Administrator email** address). - -![Microsoft Power Apps for Developer Step One](/Workshops/DotNetAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg) - -4. You should receive the following message: - -![Microsoft Power Apps for Developer Step One](/Workshops/DotNetAndPowerApps/Lab0/assets/sign-up-message.jpg) - -Click **Sign in** and sign-in using your M365 Dev Program credentials (the **Administrator** email address and password). - -5. After you sign in and complete the process, click **Get Started**. - -![Microsoft Power Apps for Developer Step One](/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-get-started.jpg) - -6. After your licenses have been configured, you should automatically be redirected to [make.powerapps.com](https://make.powerapps.com/) - which is the Power Apps Portal. - -![Power Apps Maker Portal](/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-portal.png) - -## Step 3: Create an Azure account - -The Java API, which will serve as the backend for what you'll be bulding in this workshop, will be hosted on Azure and in order to do that - you will need an Azure account. - -You can create an Azure account for free and receive 12 months of popular services for free and a $200 credit to explore Azure for 30 days - which is more than enough for this workshop. - -1. Go to [azure.microsoft.com/free](https://azure.microsoft.com/free/) and click **Start Free**. - -![Start free with Azure](/Workshops/DotNetAndPowerApps/Lab0/assets/azure-start-free.png) - -2. Sign into your Microsoft account - -3. Fill in profile details to complete the sign up process. - -4. Once your information has been confirmed, you'll be ready to start with Azure. - -![Screenshot showing a link to the Azure Portal](/Workshops/DotNetAndPowerApps/Lab0/assets/ready-with-azure.png) - -### Next: [Lab 1 - Getting the Python API up and running in Azure](/Workshops/DotNetAndPowerApps/Lab1/) diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/README.md b/Workshops/DotNetAndPowerApps/Lab0/assets/README.md deleted file mode 100644 index d6e813d..0000000 --- a/Workshops/DotNetAndPowerApps/Lab0/assets/README.md +++ /dev/null @@ -1 +0,0 @@ -Assets for the Lab 0 tutorial diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/azure-start-free.png b/Workshops/DotNetAndPowerApps/Lab0/assets/azure-start-free.png deleted file mode 100644 index 4da5042..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/azure-start-free.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png b/Workshops/DotNetAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png deleted file mode 100644 index 5728f69..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/join-m365-dev-program.jpg b/Workshops/DotNetAndPowerApps/Lab0/assets/join-m365-dev-program.jpg deleted file mode 100644 index 19c1d78..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/join-m365-dev-program.jpg and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png b/Workshops/DotNetAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png deleted file mode 100644 index 796fb4f..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png b/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png deleted file mode 100644 index 3848381..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-get-started.jpg b/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-get-started.jpg deleted file mode 100644 index c1e9e8d..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-get-started.jpg and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-portal.png b/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-portal.png deleted file mode 100644 index 993ffe9..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/power-apps-portal.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/ready-with-azure.png b/Workshops/DotNetAndPowerApps/Lab0/assets/ready-with-azure.png deleted file mode 100644 index b7ec39e..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/ready-with-azure.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png b/Workshops/DotNetAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png deleted file mode 100644 index 8513bb4..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg b/Workshops/DotNetAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg deleted file mode 100644 index 19a60e6..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab4/README.md b/Workshops/DotNetAndPowerApps/Lab4/README.md deleted file mode 100644 index 20b76ae..0000000 --- a/Workshops/DotNetAndPowerApps/Lab4/README.md +++ /dev/null @@ -1,124 +0,0 @@ -# Lab 4 - Testing a Custom Connector - -Now that you've created a Custom Connector and added all the necessary actions, it is now time to test it to make sure that it's working properly. Testing anything you've created is very important. - -1. To ensure that we're testing the latest changes, click the ```βœ“ Update connector``` button. - -2. Every connector needs a connection for it to work so under the *Connections* section, click ```+ New Connection```. - -![Screenshot of the Connections section under the Test Tab in the custom connector wizard](/Workshops/DotNetAndPowerApps/Lab4/assets/new-custom-connector-connection.png) - -3. After creating the connection, you can proceed to test out the actions you have just created. - -**GetLists** - -Ensure that the **GetLists** action is selected under the *Operations* section on the left-hand side of the screen. - -Then click ```Test operation```. - -This should be the response. A 200 response code along with the body containing all ToDo lists: - -![GetLists action Test response](/Workshops/DotNetAndPowerApps/Lab4/assets/get-lists-response.png) - -**CreateList** - -Ensure that the **CreateList** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* id: ```2e134d62c2a44f1f8ec9a9``` -* name: ```Work``` -* description: ```My work list``` - -Then click ```Test operation```. - -You should have a 201 response code along with the body containing the new *Work* ToDo list. - -**GetListItems** - -Let's skip the *DeleteList* action for now and ensure that the **GetListItems** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```c9c74ec076c245b195447f19cb3d6bbe``` - -> **Note**: This is the *id* of the *Shopping* list that you created in [Lab 2](https://github.com/microsoft/PowerPlatformAdvocates/tree/main/Workshops/DotNetAndPowerApps/Lab2#step-2---add-your-own-list-data). - -Click ```Test operation```. - -You should have a 200 response code along with the body containing all of the *Shopping* ToDo list items. - -**CreateListItem** - -Ensure that the **CreateListItem** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` -* id: ```c5c1ed8252e14e3daa0d74``` -* listId: ```2e134d62c2a44f1f8ec9a9``` -* name: ```Send email to manager``` - -Leave the other parameters as is. - -Click ```Test operation```. - -You should have a 201 response code along with the body containing the new *Work* ToDo list item: "Send email to manager". - -**UpdateListItem** - -Let's skip the *DeleteListItem* action for now and ensure that the **UpdateListItem** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` -* itemId: ```c5c1ed8252e14e3daa0d74``` -* id: ```c5c1ed8252e14e3daa0d74``` -* listId: ```2e134d62c2a44f1f8ec9a9``` -* name: ```Send email to manager and colleague``` -* state: ```todo``` - -Leave the other parameters as is. - -Click ```Test operation```. - -You should have a 200 response code along with the body containing the updated *Work* ToDo list item: "Send email to manager and colleague". It was previously: "Send email to manager". - -![Body response of updated ToDo list item](/Workshops/DotNetAndPowerApps/Lab4/assets/updated-list-item-response.png) - -Now let's work with the Delete actions. - -**DeleteListItem** - -Ensure that the **DeleteListItem** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` -* itemId: ```c5c1ed8252e14e3daa0d74``` - -Click ```Test operation```. - -You should have a 204 response code confirming that something has been deleted. This test has deleted the "Send email to manager and colleague" list item from the *Work* ToDo list. - -**DeleteList** - -Ensure that the **DeleteList** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` - -Click ```Test operation```. - -You should have a 204 response code confirming that something has been deleted. This test has deleted the *Work* ToDo list. - -And there you have it! All actions have been tested and passed. - -![All actions with passed test](/Workshops/DotNetAndPowerApps/Lab4/assets/passed-action-tests.png) - -Click the ```βœ“ Update connector``` button and once the custom connector has been saved, click the ```X Close ``` button. - -Now that you know that your custom connector is complete, we can go ahead and use it in a Power App - which you will be building next. - -### Next: [Lab 5 - Creating a Power Apps Canvas App](/Workshops/DotNetAndPowerApps/Lab5/) diff --git a/Workshops/DotNetAndPowerApps/Lab4/assets/get-lists-response.png b/Workshops/DotNetAndPowerApps/Lab4/assets/get-lists-response.png deleted file mode 100644 index 27772e4..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab4/assets/get-lists-response.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab4/assets/new-custom-connector-connection.png b/Workshops/DotNetAndPowerApps/Lab4/assets/new-custom-connector-connection.png deleted file mode 100644 index 01d9910..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab4/assets/new-custom-connector-connection.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab4/assets/passed-action-tests.png b/Workshops/DotNetAndPowerApps/Lab4/assets/passed-action-tests.png deleted file mode 100644 index 6d81317..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab4/assets/passed-action-tests.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab4/assets/updated-list-item-response.png b/Workshops/DotNetAndPowerApps/Lab4/assets/updated-list-item-response.png deleted file mode 100644 index 7a185a7..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab4/assets/updated-list-item-response.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/README.md b/Workshops/DotNetAndPowerApps/Lab5/README.md deleted file mode 100644 index 1d98bee..0000000 --- a/Workshops/DotNetAndPowerApps/Lab5/README.md +++ /dev/null @@ -1,534 +0,0 @@ -# Lab 5 - Creating a Power Apps Canvas App - -In this lab, you'll be creating a ToDo List Canvas App which will be backed by the Custom Connector you created in the previous labs. - -1. Go to [make.powerapps.com](https://make.powerapps.com) and sign in with the administrator email and password that you created in Lab 0. - -Make sure that you're in the correct environment at the top right-hand side of the portal - it should be ```(Your name)'s Environment```. If not then click on the environment picker and change it to the correct one. - -2. Click on **Solutions** in the left hand menu. - -3. In the solution view, look for the ```DotNet + Power Workshop``` solution and then click on it's Display name. - -You should see the ```DotNetToDo``` custom connector that you've just finished creating but now we're going to add a new object - a Canvas App. - -4. Click the **+ New** button at the top of the solution. Hover over the *App* menu item and then select **Canvas app**. - -The *Canvas App from blank* dialog should pop up. - -5. Fill in the following details: - - * App name: ```DotNet ToDo App``` - * Format: ```Tablet``` - -6. Click **Create**. - -![Screenshot of the Canvas App from blank dialog](/Workshops/DotNetAndPowerApps/Lab5/assets/canvas-app-dialog.png) - -The Power Apps Studio will open up. When you're here for the first time, a welcome dialog will show. Select the **Skip** button. - -## Adding the Custom Connector as a Data Source - -1. In Power Apps, on the left panel, click the **Data** icon and click **Add Data**. - -![Data icon in the Power Apps Studio](/Workshops/DotNetAndPowerApps/Lab5/assets/data-icon-power-apps.png) - -2. In the ```Select a data source``` window, search for ```DotNetToDo``` and select the result. - -3. Select **DotNetToDo** once more. - -4. Select the **More Actions** icon and select **Rename**. - -![Renaming the Custom Connector](/Workshops/DotNetAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png) - -5. Rename to ```DotNetToDo```. - -## Adding a header - -With a connection to the DotNet ToDo Custom Connector made, you're now ready to configure the UI. - -1. First, go back to the ```Tree view```. - -![Tree View option in Power Apps panel](/Workshops/DotNetAndPowerApps/Lab5/assets/tree-view-canvas-apps.png) - -2. Rename the ```Screen1``` screen to ```ToDo Screen``` by clicking on the ... next to **Screen1** and then selecting **Rename**. - -3. With the *ToDo Screen* selected, make sure that the **Fill** property is selected on the *Properties List* dropdown. - -![The Properties list in the Power Apps Studio](/Workshops/DotNetAndPowerApps/Lab5/assets/properties-list.png) - -4. Fill in this value in the *Formula Bar*: ```RGBA(41, 41, 41, 1)``` - -![Fill property value of Screen](/Workshops/DotNetAndPowerApps/Lab5/assets/screen-fill-property-value.png) - -5. Click the **+ Insert** button on the top command bar and select **Text Label**. Rename the component to ```lblLogo```. - -6. Make sure that the **lblLogo** component is selected and then in the right *Properties Pane*, change the following properties: - * Text: ```ToDo``` - * Font: ```Segoe UI``` - * Font size: ```20``` - * Font weight: ```Bold``` - * Position: ```0 x 0``` - * Size: ```300 x 70``` - * Padding: ```5 (Top) x 5 (Bottom) x 65 (Left) x 5 (Right)``` - -![Properties configured with the Properties Pane](/Workshops/DotNetAndPowerApps/Lab5/assets/configure-with-properties-pane.png) - -7. With the *lblLogo* selected, make sure that the following properties are configured with the *Properties List* dropdown: - - * Color: ```RGBA(277, 277, 277, 1)``` - * Fill: ```RGBA(0, 120, 212, 1)``` - -> **Note**: When it comes to properties, you can configure them in multiple ways as shown above. Either in the *Properties Pane* on the right or with the *Properties List* dropdown and the *Formula Bar* at the top. - -8. Click the **+ Insert** button, search for "Check (badge)" and then select it when it pops up. Rename it to ```icoLogo```. - -9. Configure the ```icoLogo``` properties: - - * Display mode: ```View``` - * Position: ```14 x 16``` - * Size: ```40 x 40``` - * Color: ```RGBA(227, 227, 227, 1)``` - -10. Click the **+ Insert** button and select **Text Label**. Rename it to ```lblHeader```. - -11. Configure the ```lblHeader``` properties: - - * Text: ```User().FullName``` (Use the *Properties list* dropdown and *Formula Bar* for this one) - * Font: ``Segoe UI`` - * Font Size: ```16``` - * Text Alignment: ```Align right``` - * Position: ```300 x 0``` - * Size: ```1066 x 70``` - * Padding: ```5 (Top) x 5 (Bottom) x 5 (Left) x 15 (Right)``` - * Color: ```RGBA(227, 227, 227, 1)``` - * Fill: ```RGBA(2, 69, 120, 1)``` - -Your header should now look like this: - -![Screenshot of completed App Header](/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-header.png) - -12. Let's go ahead and **Save** our work by clicking on the Save icon at the top right-hand side of the screen. - -## Adding the Lists Gallery - -1. Click the **+ Insert** button and select **Rectangle**. Rename it to ```recListBackground```. - -2. Configure the ```recListBackground``` properties: - - * Position: ```0 x 70``` - * Size: ```300 x 698``` - * Fill: ```RGBA(50, 49, 48, 1)``` - -3. Click the **+ Insert** button and search for **Blank vertical gallery** and then select it when it pops up. Rename it to ```galLists```. - -4. Configure the ```galLists``` properties: - - * Position: ```0 x 68``` - * Size: ```300 x 625``` - * Fill: ```RGBA(50, 49, 48, 1)``` - * Template size: ```57``` - * Template padding: ```0``` - * Template Fill: ```If(ThisItem.IsSelected, RGBA(72,72,72,1))``` - -5. On the **galLists** component, click **Add an item from the Insert pane**. - -6. In the **Insert** pane on the left, select **Text Label**. - -7. Then search for "Vertical Line" and select it when it pops up. - -8. Go back to the **Tree View** and rename ```Icon2``` to ```icoSelector```. Also rename ```Label3``` to ```lblListName```. - -![List gallery components](/Workshops/DotNetAndPowerApps/Lab5/assets/list-gallery.png) - -8. Select the **icoSelector** component and configure the following properties: - - * Position: ```0 x 0``` - * Size: ```4 x 57``` - * Color: ```RGBA(0, 120, 212, 1)``` - * Visible: ```If(ThisItem.IsSelected, true, false)``` (Use the *Properties list* dropdown and *Formula Bar* for this one) - -9. Select the **lblListName** component and configure the following properties: - - * Position: ```24 x 12``` - * Size: ```270 x 37``` - * Padding: ```5 (top) x 5 (bottom) x 20 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -10. Let's go ahead and **Save** our work. - -## Adding the "New List" text field - -1. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtAddList```. - -2. Click the **+ Insert** button and search for **List scroll watchlist** and then select it when it pops up. Rename it to ```icoAddList```. - -3. Configure the ```txtAddList``` properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```New List``` - * Position: ```11 x 712``` - * Size: ```278 x 41``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 35 (right)``` - * Border thickness: ```0``` - * Border radius: ```0``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Focused border thickness: ```0``` - -4. Configure the ```icoAddList``` properties: - * Display mode: ```If(txtAddList.Text = "", DisplayMode.View, DisplayMode.Edit)``` (Use the *Properties list* dropdown and *Formula Bar* for this one) - * Position: ```254 x 715``` - * Size: ```35 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 5 (left) x 5 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(255, 255, 255, 1)``` - -Your app should look like this now. You're making good progress: - -![Power App with List gallery and text input](/Workshops/DotNetAndPowerApps/Lab5/assets/completed-lists-gallery.png) - -5. Let's go ahead and **Save** our work. - -## Adding the List Items Gallery - -1. Click the **+ Insert** button and search for **Blank vertical gallery** and then select it when it pops up. Rename it to ```galListItems```. - -2. Configure the ```galListItems``` properties: - - * Position: ```300 x 182``` - * Size: ```766 x 586``` - * Template size: ```59``` - * Template padding: ```0``` - * Template Fill: ```If(ThisItem.IsSelected, RGBA(72,72,72,1))``` - -3. On the **galListItems** component, click **Add an item from the Insert pane**. - -4. In the **Insert** pane on the left, select **Text Label**, - -5. Then search for "Check" and select it when it pops up. - -6. Then search for "Circle" and select it when it pops up. - -7. Go back to the **Tree View** and rename: - * ```Circle1``` to ```cirCheckMark``` - * ```Icon4``` to ```icoCheckMark``` - * ```Label4``` to ```lblListItemName```. - -![List Items Gallery components](/Workshops/DotNetAndPowerApps/Lab5/assets/list-items-gallery.png) - -8. Select the **cirCheckMark** component and configure the following properties: - * Position: ```32 x 15``` - * Size: ```30 x 30``` - * Border thickness: ```2``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover fill: ```RGBA(0, 0, 0, 0)``` - -9. Select the **icoCheckMark** component and configure the following properties: - * Position: ```32 x 15``` - * Size: ```30 x 30``` - * Padding: ```5 (top) x 5 (bottom) x 5 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -10. Select the **lblListItemName** component and configure the following properties: - * Position: ```73 x 10``` - * Size: ```680 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - -11. Let's go ahead and **Save** our work. - -## Adding the "New List item" text field - -1. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtAddItem```. - -2. Click the **+ Insert** button and search for **Check** and then select it when it pops up. Rename it to ```icoAddItem```. - -3. Configure the ```txtAddItem``` properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```Add an item``` - * Position: ```316 x 137``` - * Size: ```733 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(0, 0, 0, 0)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -4. Configure the ```icoAddItem``` properties: - * Position: ```1014 x 137``` - * Size: ```35 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 5 (left) x 5 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Visible: ```If(txtAddItem.Text = "", false, true)``` - -5. Let's go ahead and **Save** our work. - -## Adding the List label and List delete button - -1. Click the **+ Insert** button and select **Text label**. Rename it to ```lblCurrentList```. - -2. Configure the ```lblCurrentList``` properties: - * Text: ```List Name``` - * Font: ```Segoe UI``` - * Font size: ```18``` - * Font weight: ```Bold``` - * Position: ```300 x 70``` - * Size: ```766 x 57``` - * Padding: ```5 (top) x 5 (bottom) x 20 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(59, 58, 57, 1)``` - -3. Click the **+ Insert** button and search for **Trash** and then select it when it pops up. Rename it to ```icoDeleteList```. - -4. Configure the ```icoDeleteList``` properties: - * Position: ```1005 x 70``` - * Size: ```61 x 57``` - * Padding: ```15 (top) x 15 (bottom) x 15 (left) x 15 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(0, 120, 212, 1)``` - -5. Let's go ahead and **Save** our work. - -You're almost there: - -![Screenshot of app showing list item gallery and additional components](/Workshops/DotNetAndPowerApps/Lab5/assets/completed-list-item-gallery.png) - -## Adding the "Select Item" components - -1. Click the **+ Insert** button and select **Rectangle**. Rename it to ```recSelectItemBackground```. - -2. Configure the ```recSelectItemBackground``` properties: - - * Position: ```1066 x 70``` - * Size: ```300 x 698``` - * Fill: ```RGBA(50, 49, 48, 1)``` - -3. Click the **+ Insert** button and select **Text label**. Rename it to ```lblSelectItem```. - -4. Configure the ```lblSelectItem``` properties: - * Text: ```Select an item to edit``` - * Font size: ```12``` - * Text alignment: ```Align.Center``` - * Position: ```1122 x 147``` - * Size: ```188 x 53``` - * Color: ```RGBA(255, 255, 255, 1)``` - -5. Click the **+ Insert** button and search for **Document checkmark** and then select it when it pops up. Rename it to ```icoSelectItem```. - -6. Configure the ```icoSelectItem``` properties: - * Display mode: ```View``` - * Position: ```1196 x 116``` - * Size: ```40 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - -7. Let's go ahead and **Save** our work. - -## Adding a "form" to edit List Items - -1. Click the **+ Insert** button and select **Rectangle**. Rename it to ```recFormBackground``` and then configure the following properties: - * Position: ```1066 x 116``` - * Size: ```300 x 652``` - * Fill: ```RGBA(50, 49, 48, 1)``` - -2. Click the **+ Insert** button and select **Text label**. Rename it to ```lblCurrentItem``` and then configure the following properties: - * Text: ```List Item Name``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Bold``` - * Position: ```1066 x 70``` - * Size: ```252 x 46``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(59, 58, 57, 1)``` - -3. Click the **+ Insert** button and search for **Trash** and then select it when it pops up. Rename it to ```icoDeleteItem``` and then configure the following properties: - * Position: ```1318 x 70``` - * Size: ```48 x 46``` - * Padding: ```10 (top) x 10 (bottom) x 10 (left) x 10 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(0, 120, 212, 1)``` - * Fill: ```RGBA(59, 58, 57, 1)``` - -4. Click the **+ Insert** button and select **Text label**. Rename it to ```lblName``` and then configure the following properties: - * Text: ```Name``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 123``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -5. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtItemName``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```Name``` - * Position: ```1078 x 156``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -Here's a UI check-in to see if you're on the right track: - -![Screenshot of Form UI thus far](/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-name-field.png) - -6. Click the **+ Insert** button and select **Text label**. Rename it to ```lblDescription``` and then configure the following properties: - * Text: ```Description``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 200``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -7. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtItemDescription``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```Item Description``` - * Mode: ```Multiline``` - * Position: ```1078 x 233``` - * Size: ```270 x 100``` - * Padding: ```10 (top) x 5 (bottom) x 12 (left) x 10 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -8. Click the **+ Insert** button and select **Text label**. Rename it to ```lblState``` and then configure the following properties: - * Text: ```State``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 340``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -9. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtStateBackground``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Position: ```1078 x 373``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -10. Click the **+ Insert** button and search for **Drop Down** and then select it when it pops up. Rename it to ```ddItemState``` and then configure the following properties: - * Items: ```["To Do", "Done"]``` - * Position: ```1078 x 374``` - * Size: ```269 x 30``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover fill: ```RGBA(0, 0, 0, 0)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Border thickness: ```0``` - * Focused border thickness: ```0``` - * Chevron background: ```RGBA(0, 0, 0, 0)``` - * Chevron hover background: ```RGBA(0, 0, 0, 0)``` - * Pressed fill: ```RGBA(0, 0, 0, 0)``` - * Selection fill: ```RGBA(72, 72, 72, 1)``` - -Here's another UI check-in to see if you're on the right track: - -![Screenshot of Form UI thus far](/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-description-state-field.png) - -11. Click the **+ Insert** button and select **Text label**. Rename it to ```lblDueDate``` and then configure the following properties: - * Text: ```Due Date``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 418``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -12. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtDueDateBackground``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Position: ```1078 x 451``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -13. Click the **+ Insert** button and select **Date picker**. Rename it to ```dpItemDueDate``` and then configure the following properties: - * Position: ```1078 x 450``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Font size: ``12`` - * Border thickness: ```0``` - * Fill: ```RGBA(0, 0, 0, 0)``` - * Focused border thickness: ```0``` - * Icon background: ```RGBA(0, 0, 0, 0)``` - -14. Click the **+ Insert** button and select **Button**. Rename it to ```btnSave``` and then configure the following properties: - * Text: ```Save``` - * Position: ```1078 x 710``` - * Size: ```100 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(0, 120, 212, 1)``` - * Border thickness: ```1``` - * Border radius: ```5``` - * Font: ```Segoe UI``` - * Font size: ``12`` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```ColorFade(RGBA(0, 120, 212, 1), 20%)``` - * Pressed color: ```RGBA(255, 255, 255, 1)``` - * Pressed fill: ```RGBA(0, 120, 212, 1)``` - * Focused border thickness: ```0``` - -15. Click the **+ Insert** button and select **Button**. Rename it to ```btnCancel``` and then configure the following properties: - * Text: ```Cancel``` - * Position: ```1196 x 710``` - * Size: ```100 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Border thickness: ```1``` - * Border radius: ```5``` - * Font: ```Segoe UI``` - * Font size: ``12`` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```ColorFade(RGBA(41, 41, 41, 1), 20%)``` - * Pressed color: ```RGBA(255, 255, 255, 1)``` - * Pressed fill: ```RGBA(41, 41, 41, 1)``` - * Focused border thickness: ```0``` - -16. Let's go ahead and **Save** our work. - -And there you go! The Canvas App UI is now complete. - -![Complete canvas app UI without data](/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-ui.png) - -Now it's time to use our Custom Connector Actions in the Canvas App. - -### Next: [Lab 6 - Adding data to a Power Apps Canvas App](/Workshops/DotNetAndPowerApps/Lab6/) diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/canvas-app-dialog.png b/Workshops/DotNetAndPowerApps/Lab5/assets/canvas-app-dialog.png deleted file mode 100644 index e554011..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/canvas-app-dialog.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-header.png b/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-header.png deleted file mode 100644 index f901549..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-header.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-ui.png b/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-ui.png deleted file mode 100644 index c6823c9..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-app-ui.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-description-state-field.png b/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-description-state-field.png deleted file mode 100644 index 666fa3f..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-description-state-field.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-name-field.png b/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-name-field.png deleted file mode 100644 index 8c1f4ab..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-form-name-field.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-list-item-gallery.png b/Workshops/DotNetAndPowerApps/Lab5/assets/completed-list-item-gallery.png deleted file mode 100644 index dc5081c..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-list-item-gallery.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-lists-gallery.png b/Workshops/DotNetAndPowerApps/Lab5/assets/completed-lists-gallery.png deleted file mode 100644 index 8ad56c0..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/completed-lists-gallery.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/configure-with-properties-pane.png b/Workshops/DotNetAndPowerApps/Lab5/assets/configure-with-properties-pane.png deleted file mode 100644 index 70e5284..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/configure-with-properties-pane.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/data-icon-power-apps.png b/Workshops/DotNetAndPowerApps/Lab5/assets/data-icon-power-apps.png deleted file mode 100644 index 03b1bca..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/data-icon-power-apps.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/list-gallery.png b/Workshops/DotNetAndPowerApps/Lab5/assets/list-gallery.png deleted file mode 100644 index 7bc783e..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/list-gallery.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/list-items-gallery.png b/Workshops/DotNetAndPowerApps/Lab5/assets/list-items-gallery.png deleted file mode 100644 index 31bf34e..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/list-items-gallery.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/properties-list.png b/Workshops/DotNetAndPowerApps/Lab5/assets/properties-list.png deleted file mode 100644 index e4ebe30..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/properties-list.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png b/Workshops/DotNetAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png deleted file mode 100644 index 680168d..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/screen-fill-property-value.png b/Workshops/DotNetAndPowerApps/Lab5/assets/screen-fill-property-value.png deleted file mode 100644 index 723725a..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/screen-fill-property-value.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab5/assets/tree-view-canvas-apps.png b/Workshops/DotNetAndPowerApps/Lab5/assets/tree-view-canvas-apps.png deleted file mode 100644 index 1f3a4b5..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab5/assets/tree-view-canvas-apps.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/README.md b/Workshops/DotNetAndPowerApps/Lab6/README.md deleted file mode 100644 index 32dddda..0000000 --- a/Workshops/DotNetAndPowerApps/Lab6/README.md +++ /dev/null @@ -1,363 +0,0 @@ -# Lab 6 - Adding data to a Power Apps Canvas App - -In this lab, you'll be finally connecting the Custom Connector you created in the previous labs to the Canvas App you've just built. - -Let's get a working app! - -1. Go to [make.powerapps.com](https://make.powerapps.com) and sign in with the administrator email and password that you created in Lab 0. - -Make sure that you're in the correct environment at the top right-hand side of the portal - it should be ```(Your name)'s Environment```. If not then click on the environment picker and change it to the correct one. - -2. Click on **Solutions** in the left hand menu. - -3. In the solution view, look for the ```DotNet + Power Workshop``` solution and then click on it's Display name. - -4. Look for the ```DotNet ToDo App``` canvas app and then click on it's Display name to open the app in the Power Apps Studio. - -## Configure OnStart - -1. In the *Tree View*, click on **App**. Then using the *Properties list* drop down, select **OnStart**. - -![Screenshot showing the App.OnStart property](/Workshops/DotNetAndPowerApps/Lab6/assets/app-onstart.png) - -The **OnStart** property runs when the user starts the app. This property is often used to retrieve and cache data or set up global variables. - -2. Copy this [Power Fx](https://learn.microsoft.com/en-us/power-platform/power-fx/overview) formula into the *formula bar* for the *OnStart* property: - -``` -ClearCollect( - Lists, - DotNetToDo.GetLists() -); -Set( - newListDefault, - "" -); -Reset(galLists); -Set( - currentList, - First(Lists) -); -ClearCollect( - currentListItems, - DotNetToDo.GetListItems(currentList.id) -); -Set( - listItemFormVisibility, - false -); -``` - -3. Once you've added the above formula, let's initialise the OnStart process by hovering over the **App** object in the **Tree view** pane, selecting ellipsis (...), and then selecting **Run OnStart**. - -4. **Save** your work. - -## Configure the Lists Gallery - -1. Select the *galLists* gallery and then configure the following properties: - * Items: ```Lists``` - * Default: ```First(Lists)``` - -2. Select the *lblListName* control under *galLists* and then configure the following properties: - * Text: ```ThisItem.name``` - * OnSelect: - - ``` - Select(Parent); - Set( - currentList, - ThisItem - ); - ClearCollect( - currentListItems, - JavaToDo.GetListItems(currentList.id) - ); - Set( - listItemFormVisibility, - false - ) - ``` - -The *galLists* control should now be displaying the *Shopping* list that you created in an earlier lab. - -![Two lists on gallery in Power App](/Workshops/DotNetAndPowerApps/Lab6/assets/list-data-on-gallery.png) - -3. **Save** your work. - -## Configure the New List functionality - -1. Select the *txtAddList* control and set the following properties: - * Default: ```newListDefault``` - * Reset: ```resetTxtAddList``` - -There will be an error after you've set the *Reset* property. No worries - it will be rectified in the next step. - -2. Select the *icoAddList* control and set the *OnSelect* property to: - -``` -DotNetToDo.CreateList( - { - id: GUID(), - name: txtAddList.Text - } -); -ClearCollect( - Lists, - DotNetToDo.GetLists() -); -UpdateContext({resetTxtAddList: !resetTxtAddList}); -UpdateContext({resetTxtAddList: !resetTxtAddList}); -``` - -3. Then go on to set the *icoAddList* control's *Icon* property to: - -``` -If( - txtAddList.Text = "", - Icon.ListScrollWatchlist, - Icon.Save -) -``` - -4. **Save** your work. - -Test out the New List functionality by previewing the app and typing "Test List" in the *txtAddList* control. Notice how the *icoAddList* control changed to a *Save* button as soon as you started typing? - -When you're done typing, click on the *Save* button, and a new list should be populated in the *galLists* gallery. Also, the text in the *txtAddList* control will be cleared. - -![New list added to Power App](/Workshops/DotNetAndPowerApps/Lab6/assets/new-list-added.png) - -## Configure the *List Name* text label, List Items Gallery, amd the New List Item functionality - -1. Select the *lblCurrentList* control and set the *Text* property to ```currentList.name```. - -2. Select the *icoDeleteList* control and set the *OnSelect* property: - -``` -DotNetToDo.DeleteList(currentList.id); -ClearCollect( - Lists, - DotNetToDo.GetLists() -); -Reset(galLists); -Set( - currentList, - First(Lists) -); -ClearCollect( - currentListItems, - DotNetToDo.GetListItems(currentList.id) -); -``` - -3. Select the *txtAddItem* control and set the *Reset* property to: ```resetTxtAddItem```. - -4. Select the *icoAddItem* control and set the *OnSelect* property to: - -``` -DotNetToDo.CreateListItem( - currentList.id, - GUID(), - currentList.id, - txtAddItem.Text, - "todo" -); -ClearCollect( - currentListItems, - DotNetToDo.GetListItems(currentList.id) -); -UpdateContext({resetTxtAddItem: !resetTxtAddItem}); -UpdateContext({resetTxtAddItem: !resetTxtAddItem}) -``` - -5. Select the *galListItems* gallery and then configure the following properties: - * Items: ```currentListItems``` - * Default: ```First(currentListItems)``` - -6. Select the *lblListItemName* control under *galListItems* and then configure the following properties: - * Text: ```ThisItem.name``` - * OnSelect: - - ``` - Select(Parent); - Set( - currentListItem, - ThisItem - ); - Set( - listItemFormVisibility, - true - ) - ``` - -7. Select the *cirCheckMark* control under *galListItems* and then configure the following properties: - * Fill: ```If(ThisItem.state="todo",RGBA(41,41,41,1),RGBA(0,0,0,0))``` - * OnSelect: - - ``` - Select(Parent); - Set( - currentListItem, - ThisItem - ); - Set( - listItemFormVisibility, - true - ) - ``` - -With these controls configured - you can now see existing List items and add additional ones. You can also delete lists. Go ahead and test it out. - -Click on the *Shopping* list and see the list items that you added way back in Lab 2: - -![Shopping list items](/Workshops/DotNetAndPowerApps/Lab6/assets/shopping-list-items.png) - -Click on the *Test List* list and add the following items: -* Test1 -* Test2 -* Test3 - -You should now have all 3 of the above items in your *Test List* list. Weird names for list items, right? That's because you're going to test the delete list icon. - -Make sure that *Test List* list is selected, then click on the delete icon above the list items. Once you've done this, the *Test List* list and it's items will be deleted and disappear from the screen. - -## Configure the form for editing list item details. - -1. First we need to group all the controls that make up our "form" for editing list items. Press and hold the ```ctrl``` button on your keyboard and then select these 15 controls in your *Tree View*: - -![Form item names](/Workshops/DotNetAndPowerApps/Lab6/assets/form-items.png) - -2. With all 15 controls selected, click **More Options (...)** on the first control and then select **Group**. - -![Group items action in Power Apps](/Workshops/DotNetAndPowerApps/Lab6/assets/group-action.png) - -3. Rename ```Group1``` to ```UpdateListItemGroup``` - -4. Make sure that ```UpdateListItemGroup``` is selected and then change it's *Visible* property to ```listItemFormVisibility```. - -After changing the *Visible* property, the group might disappear from your app. To make it reappear, just select a list with list items and then select a list item. - -The idea here is that when you select a list item: this form should appear where you'll be able to update any of the list item's details. Let's get that set up right now. - -## Configure the the *UpdateListItemGroup* controls. - -1. Expand the *UpdateListItemGroup* and select the **lblCurrentItem** control and set the following properties: - * Text: ```txtItemName.Text``` - -This will make the **lblCurrentItem** control empty at the moment because the **txtItemName** control is also empty. This will be fixed in the following steps. - -2. Select the **icoDeleteItem** control and set the following properties: - * OnSelect: - - ``` - DotNetToDo.DeleteListItem( - currentListItem.listId, - currentListItem.id - ); - ClearCollect( - Lists, - DotNetToDo.GetLists() - ); - Reset(galLists); - Set( - currentList, - First(Lists) - ); - ClearCollect( - currentListItems, - DotNetToDo.GetListItems(currentList.id) - ); - Set( - listItemFormVisibility, - false - ); - ``` - -3. Select the **txtItemName** control and set the following properties: - * Default: ```currentListItem.name``` - -4. Select the **txtItemDescription** control and set the following properties: - * Default: ```currentListItem.description``` - -5. Select the **ddItemState** control and set the following properties: - * Default: ```If(currentListItem.state = "done", "Done", "To Do")``` - -6. Select the **dpItemDueDate** control and set the following properties: - * DefaultDate: ```If(currentListItem.dueDate <> Blank(), currentListItem.dueDate, Blank())``` - -7. Select the **btnSave** control and set the following properties: - * OnSelect: - - ``` - DotNetToDo.UpdateListItem( - currentListItem.listId, - currentListItem.id, - currentListItem.id, - currentListItem.listId, - txtItemName.Text, - If( - ddItemState.SelectedText.Value = "To Do", - "todo", - "done" - ), - { - description: txtItemDescription, - dueDate: Text( - DateTimeValue(dpItemDueDate.SelectedDate), - "yyyy-mm-ddThh:mm:ss.fffZ" - ) - } - ); - ClearCollect( - currentListItems, - DotNetToDo.GetListItems(currentList.id) - ); - Set( - listItemFormVisibility, - false - ); - ``` - -8. Select the **btnCancel** control and set the following properties: - * OnSelect: - ``` - Set( - listItemFormVisibility, - false - ); - ``` - -9. **Save** your work. - -And now you're DONE! You've now built the full solution. Go ahead and test your app! Add lists, list items, delete them, edit them, and have fun with your Power App. - -![Completed Power App](/Workshops/DotNetAndPowerApps/Lab6/assets/complete-power-app.png) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/app-onstart.png b/Workshops/DotNetAndPowerApps/Lab6/assets/app-onstart.png deleted file mode 100644 index 445f1df..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/app-onstart.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/complete-power-app.png b/Workshops/DotNetAndPowerApps/Lab6/assets/complete-power-app.png deleted file mode 100644 index e9fbb9a..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/complete-power-app.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/form-items.png b/Workshops/DotNetAndPowerApps/Lab6/assets/form-items.png deleted file mode 100644 index a5e9956..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/form-items.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/group-action.png b/Workshops/DotNetAndPowerApps/Lab6/assets/group-action.png deleted file mode 100644 index d736c66..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/group-action.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/list-data-on-gallery.png b/Workshops/DotNetAndPowerApps/Lab6/assets/list-data-on-gallery.png deleted file mode 100644 index cd9ccf8..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/list-data-on-gallery.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/new-list-added.png b/Workshops/DotNetAndPowerApps/Lab6/assets/new-list-added.png deleted file mode 100644 index b015635..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/new-list-added.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/Lab6/assets/shopping-list-items.png b/Workshops/DotNetAndPowerApps/Lab6/assets/shopping-list-items.png deleted file mode 100644 index 5339f11..0000000 Binary files a/Workshops/DotNetAndPowerApps/Lab6/assets/shopping-list-items.png and /dev/null differ diff --git a/Workshops/DotNetAndPowerApps/README.md b/Workshops/DotNetAndPowerApps/README.md deleted file mode 100644 index b4ec2fc..0000000 --- a/Workshops/DotNetAndPowerApps/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# DotNet + Power Apps Workshop - -Welcome to the DotNet and Power Apps workshop. In this workshop, you will learn how to integrate an OpenAPI backend built with DotNet, and a Power Apps frontend. - -![The complete ToDo Power App](/Workshops/DotNetAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png) - -## Agenda - -### πŸ§‘πŸ½β€πŸ’» Lab 0 - Setup your environment -This lab is all about setting up your environment. This is what you need to get started. Make sure to do this before starting the workshop. - -:link: [Lab 0 - Setup your environment](/Workshops/DotNetAndPowerApps/Lab0/) - -### πŸ§‘πŸ½β€πŸ’» Lab 1 - Getting the DotNet API up and running in Azure -This lab will help you deploy the DotNet API to Azure using the Azure Developer CLI. - -:link: [Lab 1 - Getting the DotNet API up and running in Azure](/Workshops/DotNetAndPowerApps/Lab1/) - -### πŸ§‘πŸ½β€πŸ’» Lab 2 - Adding data with the ToDo API -Now that you've got our API up and running in Azure, let's add some data so it's there, ready and waiting, for us to play with in Power Apps. - -:link: [Lab 2 - Adding data with the ToDo API](/Workshops/DotNetAndPowerApps//Lab2/) - -### πŸ§‘πŸ½β€πŸ’» Lab 3 - Creating a Custom Connector -This lab will help you enable your Power App to interact with the API in the previous lab, by creating a Custom Connector. - -:link: [Lab 3 - Creating a Custom Connector](/Workshops/DotNetAndPowerApps/Lab3/) - -### πŸ§‘πŸ½β€πŸ’» Lab 4 - Testing a Custom Connector -With the Custom Connector created, this lab will take you through the necessary steps to test it and to make sure that it's working appropriately. - -:link: [Lab 4 - Testing a Custom Connector](/Workshops/DotNetAndPowerApps/Lab4/) - -### πŸ§‘πŸ½β€πŸ’» Lab 5 - Creating a Power Apps Canvas App -In this lab, you'll be creating the UI for a ToDo List Canvas App which will then be backed by the Custom Connector you created in Lab 3. - -:link: [Lab 5 - Creating a Power Apps Canvas App](/Workshops/DotNetAndPowerApps/Lab5/) - -### πŸ§‘πŸ½β€πŸ’» Lab 6 - Adding data to a Power Apps Canvas App -In this lab, you'll be finally connecting the Custom Connector you created in the previous labs to the Canvas App you've just built. - -:link: [Lab 6 - Adding data to a Power Apps Canvas App](/Workshops/DotNetAndPowerApps/Lab6/) diff --git a/Workshops/DotNetAndPowerApps/Lab1/README.md b/Workshops/JavaAndPowerApps/Lab1.1/README.md similarity index 91% rename from Workshops/DotNetAndPowerApps/Lab1/README.md rename to Workshops/JavaAndPowerApps/Lab1.1/README.md index b6b328d..943fc81 100644 --- a/Workshops/DotNetAndPowerApps/Lab1/README.md +++ b/Workshops/JavaAndPowerApps/Lab1.1/README.md @@ -1,4 +1,4 @@ -# Lab 1 - Getting the DotNet API up and running in Azure +# Lab 1.1 - Getting the DotNet API up and running in Azure (Optional) This workshop is adsqlapting the [ToDo Application Azure sample with a DotNet API](https://github.com/azure-samples/todo-csharp-sql/ ). The sample comprises of a "complete ToDo application that includes everything you need to build, deploy, and monitor an Azure solution. This application uses the Azure Developer CLI (azd) to get you up and running on Azure quickly, React.js for the Web application, DotNet for the API, Azure SQL Databases for storage, and Azure Monitor for monitoring and logging. It includes application code, tools, and pipelines that serve as a foundation from which you can build upon and customize when creating your own solutions." @@ -50,7 +50,7 @@ This command will open your browser; prompting you to sign into your Azure accou Once you have successfully authenticated, you'll see this message in your browser: -![Message confirming that you have authenticated with Azure](/Workshops/DotNetAndPowerApps/Lab1/assets/azure-confirmation.png) +![Message confirming that you have authenticated with Azure](/Workshops/JavaAndPowerApps/Lab1.1/assets/azure-confirmation.png) Close the browser tab and return to the terminal. @@ -79,16 +79,16 @@ When ```azd up``` is complete it will output the following URLs: * ToDo Web application frontend * ToDo API application -![Screenshot of URLs that were created and deployed](/Workshops/DotNetAndPowerApps/Lab1/assets/urls.png) +![Screenshot of URLs that were created and deployed](/Workshops/JavaAndPowerApps/Lab1.1/assets/urls.png) Click the deployed service API URL to launch the ToDo OpenAPI definition. -> **Note**: Bookmark this API URL or keep it somewhere safe for later reference in Lab 3. +> **Note**: Bookmark this API URL or keep it somewhere safe for later reference in Lab 3.1. -![Screenshot of the ToDo OpenAPI definition](/Workshops/DotNetAndPowerApps/Lab1/assets/openapi-definition.png) +![Screenshot of the ToDo OpenAPI definition](/Workshops/JavaAndPowerApps/Lab1.1/assets/openapi-definition.png) We will be adding some data in the next lab. > **Note**: The ```azd up``` command will create Azure resources that will incur costs to your Azure subscription. Once you are done with the workshop, You can clean up those resources manually via the Azure portal or with the [```azd down``` command](https://github.com/Azure-Samples/todo-java-mongo#clean-up-resources). -### Next: [Lab 2 - Adding data with the ToDo API](/Workshops/DotNetAndPowerApps/Lab2/) +### Next: [Lab 2.1 - Adding data with the DotNet ToDo API](/Workshops/JavaAndPowerApps/Lab2.1/) diff --git a/Workshops/DotNetAndPowerApps/Lab1/assets/azure-confirmation.png b/Workshops/JavaAndPowerApps/Lab1.1/assets/azure-confirmation.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab1/assets/azure-confirmation.png rename to Workshops/JavaAndPowerApps/Lab1.1/assets/azure-confirmation.png diff --git a/Workshops/DotNetAndPowerApps/Lab1/assets/openapi-definition.png b/Workshops/JavaAndPowerApps/Lab1.1/assets/openapi-definition.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab1/assets/openapi-definition.png rename to Workshops/JavaAndPowerApps/Lab1.1/assets/openapi-definition.png diff --git a/Workshops/DotNetAndPowerApps/Lab1/assets/urls.png b/Workshops/JavaAndPowerApps/Lab1.1/assets/urls.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab1/assets/urls.png rename to Workshops/JavaAndPowerApps/Lab1.1/assets/urls.png diff --git a/Workshops/PythonAndPowerApps/Lab1/README.md b/Workshops/JavaAndPowerApps/Lab1.2/README.md similarity index 91% rename from Workshops/PythonAndPowerApps/Lab1/README.md rename to Workshops/JavaAndPowerApps/Lab1.2/README.md index f7376ef..9906592 100644 --- a/Workshops/PythonAndPowerApps/Lab1/README.md +++ b/Workshops/JavaAndPowerApps/Lab1.2/README.md @@ -1,4 +1,4 @@ -# Lab 1 - Getting the Python API up and running in Azure +# Lab 1.2 - Getting the Python API up and running in Azure (Optional) This workshop is adapting the [ToDo Application Azure sample with a Python API](https://github.com/Azure-Samples/todo-python-mongo-swa-func). The sample comprises of a "complete ToDo application that includes everything you need to build, deploy, and monitor an Azure solution. This application uses the Azure Developer CLI (azd) to get you up and running on Azure quickly, React.js for the Web application, Python for the API, Azure Cosmos DB API for MongoDB for storage, and Azure Monitor for monitoring and logging. It includes application code, tools, and pipelines that serve as a foundation from which you can build upon and customize when creating your own solutions." @@ -49,7 +49,7 @@ This command will open your browser; prompting you to sign into your Azure accou Once you have successfully authenticated, you'll see this message in your browser: -![Message confirming that you have authenticated with Azure](/Workshops/PythonAndPowerApps/Lab1/assets/azure-confirmation.png) +![Message confirming that you have authenticated with Azure](/Workshops/JavaAndPowerApps/Lab1.2/assets/azure-confirmation.png) Close the browser tab and return to the terminal. @@ -78,16 +78,16 @@ When ```azd up``` is complete it will output the following URLs: * ToDo Web application frontend * ToDo API application -![Screenshot of URLs that were created and deployed](/Workshops/PythonAndPowerApps/Lab1/assets/urls.png) +![Screenshot of URLs that were created and deployed](/Workshops/JavaAndPowerApps/Lab1.2/assets/urls.png) Click the deployed service API URL to launch the ToDo OpenAPI definition. -> **Note**: Bookmark this API URL or keep it somewhere safe for later reference in Lab 3. +> **Note**: Bookmark this API URL or keep it somewhere safe for later reference in Lab 3.2. -![Screenshot of the ToDo OpenAPI definition](/Workshops/PythonAndPowerApps/Lab1/assets/openapi-definition.png) +![Screenshot of the ToDo OpenAPI definition](/Workshops/JavaAndPowerApps/Lab1.2/assets/openapi-definition.png) We will be adding some data in the next lab. > **Note**: The ```azd up``` command will create Azure resources that will incur costs to your Azure subscription. Once you are done with the workshop, You can clean up those resources manually via the Azure portal or with the [```azd down``` command](https://github.com/Azure-Samples/todo-java-mongo#clean-up-resources). -### Next: [Lab 2 - Adding data with the ToDo API](/Workshops/PythonAndPowerApps/Lab2/) +### Next: [Lab 2.2 - Adding data with the Python ToDo API](/Workshops/JavaAndPowerApps/Lab2.2/) diff --git a/Workshops/PythonAndPowerApps/Lab1/assets/azure-confirmation.png b/Workshops/JavaAndPowerApps/Lab1.2/assets/azure-confirmation.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab1/assets/azure-confirmation.png rename to Workshops/JavaAndPowerApps/Lab1.2/assets/azure-confirmation.png diff --git a/Workshops/PythonAndPowerApps/Lab1/assets/openapi-definition.png b/Workshops/JavaAndPowerApps/Lab1.2/assets/openapi-definition.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab1/assets/openapi-definition.png rename to Workshops/JavaAndPowerApps/Lab1.2/assets/openapi-definition.png diff --git a/Workshops/PythonAndPowerApps/Lab1/assets/urls.png b/Workshops/JavaAndPowerApps/Lab1.2/assets/urls.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab1/assets/urls.png rename to Workshops/JavaAndPowerApps/Lab1.2/assets/urls.png diff --git a/Workshops/PythonAndPowerApps/Lab2/README.md b/Workshops/JavaAndPowerApps/Lab2.1/README.md similarity index 89% rename from Workshops/PythonAndPowerApps/Lab2/README.md rename to Workshops/JavaAndPowerApps/Lab2.1/README.md index f82d6c8..0a270d9 100644 --- a/Workshops/PythonAndPowerApps/Lab2/README.md +++ b/Workshops/JavaAndPowerApps/Lab2.1/README.md @@ -1,4 +1,4 @@ -# Lab 2 - Adding data with the ToDo API. +# Lab 2.1 - Adding data with the DotNet ToDo API (Optional). Now that we've got our API up and running in Azure, let's add some data so it's there, ready and waiting, for us to play with in Power Apps. @@ -6,11 +6,11 @@ Now that we've got our API up and running in Azure, let's add some data so it's 1. Look for the ```GET /lists``` action under the Lists API. -![The GET Lists action](/Workshops/PythonAndPowerApps/Lab2/assets/get-lists-action.png) +![The GET Lists action](/Workshops/JavaAndPowerApps/Lab2.1/assets/get-lists-action.png) 2. Expand the action and click **Try it out**. -![Screenshot of the "Try it out" button.](/Workshops/PythonAndPowerApps/Lab2/assets/get-lists-try-it-out.png) +![Screenshot of the "Try it out" button.](/Workshops/JavaAndPowerApps/Lab2.1/assets/get-lists-try-it-out.png) 3. Then click **Execute**. This will execute that API action in order to get an array of ToDo lists in the application. @@ -18,7 +18,7 @@ Scroll down to where you see the Server Response. You should see the 200 respons Since this is your first time running the API, your response body will empty: -![Screenshot of the response code and the response body](/Workshops/PythonAndPowerApps/Lab2/assets/response-code-and-body.png) +![Screenshot of the response code and the response body](/Workshops/JavaAndPowerApps/Lab2.1/assets/response-code-and-body.png) No worries - you'll be adding data in the next step. ## Step 2 - Add your own list data @@ -47,7 +47,7 @@ Scroll down to where you see the Server Response. You should see the 201 respons In the server response, you'll now see that the *Shopping* ToDo list with the new attributes is returned. Copy the new ```id``` -![Screenshot of the response code and the response body now showing 2 ToDo lists](/Workshops/PythonAndPowerApps/Lab2/assets/response-with-new-list.png) +![Screenshot of the response code and the response body now showing 2 ToDo lists](/Workshops/JavaAndPowerApps/Lab2.1/assets/response-with-new-list.png) ## Step 3 - Add your own list item data @@ -124,6 +124,6 @@ You've now added 3 list items (milk, bread, and eggs) to the *Shopping* list - a Scroll down to where you see the Server Response. You should see the 200 response code along with the 3 items that you've just added to the *Shopping* ToDo list. -![Screenshot of the response code and the response body with the 3 Shopping list items](/Workshops/PythonAndPowerApps/Lab2/assets/shopping-list-items.png) +![Screenshot of the response code and the response body with the 3 Shopping list items](/Workshops/JavaAndPowerApps/Lab2.1/assets/shopping-list-items.png) -### Next: [Lab 3 - Creating a Custom Connector](/Workshops/PythonAndPowerApps/Lab3/) +### Next: [Lab 3.1 - Creating a Custom Connector with DotNet ToDo API](/Workshops/JavaAndPowerApps/Lab3.1/) diff --git a/Workshops/DotNetAndPowerApps/Lab2/assets/get-lists-action.png b/Workshops/JavaAndPowerApps/Lab2.1/assets/get-lists-action.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab2/assets/get-lists-action.png rename to Workshops/JavaAndPowerApps/Lab2.1/assets/get-lists-action.png diff --git a/Workshops/DotNetAndPowerApps/Lab2/assets/get-lists-try-it-out.png b/Workshops/JavaAndPowerApps/Lab2.1/assets/get-lists-try-it-out.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab2/assets/get-lists-try-it-out.png rename to Workshops/JavaAndPowerApps/Lab2.1/assets/get-lists-try-it-out.png diff --git a/Workshops/DotNetAndPowerApps/Lab2/assets/response-code-and-body.png b/Workshops/JavaAndPowerApps/Lab2.1/assets/response-code-and-body.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab2/assets/response-code-and-body.png rename to Workshops/JavaAndPowerApps/Lab2.1/assets/response-code-and-body.png diff --git a/Workshops/DotNetAndPowerApps/Lab2/assets/response-with-new-list.png b/Workshops/JavaAndPowerApps/Lab2.1/assets/response-with-new-list.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab2/assets/response-with-new-list.png rename to Workshops/JavaAndPowerApps/Lab2.1/assets/response-with-new-list.png diff --git a/Workshops/DotNetAndPowerApps/Lab2/assets/shopping-list-items.png b/Workshops/JavaAndPowerApps/Lab2.1/assets/shopping-list-items.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab2/assets/shopping-list-items.png rename to Workshops/JavaAndPowerApps/Lab2.1/assets/shopping-list-items.png diff --git a/Workshops/DotNetAndPowerApps/Lab2/README.md b/Workshops/JavaAndPowerApps/Lab2.2/README.md similarity index 89% rename from Workshops/DotNetAndPowerApps/Lab2/README.md rename to Workshops/JavaAndPowerApps/Lab2.2/README.md index de65614..7b9ebfc 100644 --- a/Workshops/DotNetAndPowerApps/Lab2/README.md +++ b/Workshops/JavaAndPowerApps/Lab2.2/README.md @@ -1,4 +1,4 @@ -# Lab 2 - Adding data with the ToDo API. +# Lab 2.2 - Adding data with the Python ToDo API (Optional). Now that we've got our API up and running in Azure, let's add some data so it's there, ready and waiting, for us to play with in Power Apps. @@ -6,11 +6,11 @@ Now that we've got our API up and running in Azure, let's add some data so it's 1. Look for the ```GET /lists``` action under the Lists API. -![The GET Lists action](/Workshops/DotNetAndPowerApps/Lab2/assets/get-lists-action.png) +![The GET Lists action](/Workshops/JavaAndPowerApps/Lab2.2/assets/get-lists-action.png) 2. Expand the action and click **Try it out**. -![Screenshot of the "Try it out" button.](/Workshops/DotNetAndPowerApps/Lab2/assets/get-lists-try-it-out.png) +![Screenshot of the "Try it out" button.](/Workshops/JavaAndPowerApps/Lab2.2/assets/get-lists-try-it-out.png) 3. Then click **Execute**. This will execute that API action in order to get an array of ToDo lists in the application. @@ -18,7 +18,7 @@ Scroll down to where you see the Server Response. You should see the 200 respons Since this is your first time running the API, your response body will empty: -![Screenshot of the response code and the response body](/Workshops/DotNetAndPowerApps/Lab2/assets/response-code-and-body.png) +![Screenshot of the response code and the response body](/Workshops/JavaAndPowerApps/Lab2.2/assets/response-code-and-body.png) No worries - you'll be adding data in the next step. ## Step 2 - Add your own list data @@ -47,7 +47,7 @@ Scroll down to where you see the Server Response. You should see the 201 respons In the server response, you'll now see that the *Shopping* ToDo list with the new attributes is returned. Copy the new ```id``` -![Screenshot of the response code and the response body now showing 2 ToDo lists](/Workshops/DotNetAndPowerApps/Lab2/assets/response-with-new-list.png) +![Screenshot of the response code and the response body now showing 2 ToDo lists](/Workshops/JavaAndPowerApps/Lab2.2/assets/response-with-new-list.png) ## Step 3 - Add your own list item data @@ -124,6 +124,6 @@ You've now added 3 list items (milk, bread, and eggs) to the *Shopping* list - a Scroll down to where you see the Server Response. You should see the 200 response code along with the 3 items that you've just added to the *Shopping* ToDo list. -![Screenshot of the response code and the response body with the 3 Shopping list items](/Workshops/DotNetAndPowerApps/Lab2/assets/shopping-list-items.png) +![Screenshot of the response code and the response body with the 3 Shopping list items](/Workshops/JavaAndPowerApps/Lab2.2/assets/shopping-list-items.png) -### Next: [Lab 3 - Creating a Custom Connector](/Workshops/DotNetAndPowerApps/Lab3/) +### Next: [Lab 3.2 - Creating a Custom Connector with Python ToDo API](/Workshops/JavaAndPowerApps/Lab3.2/) diff --git a/Workshops/PythonAndPowerApps/Lab2/assets/get-lists-action.png b/Workshops/JavaAndPowerApps/Lab2.2/assets/get-lists-action.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab2/assets/get-lists-action.png rename to Workshops/JavaAndPowerApps/Lab2.2/assets/get-lists-action.png diff --git a/Workshops/PythonAndPowerApps/Lab2/assets/get-lists-try-it-out.png b/Workshops/JavaAndPowerApps/Lab2.2/assets/get-lists-try-it-out.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab2/assets/get-lists-try-it-out.png rename to Workshops/JavaAndPowerApps/Lab2.2/assets/get-lists-try-it-out.png diff --git a/Workshops/PythonAndPowerApps/Lab2/assets/response-code-and-body.png b/Workshops/JavaAndPowerApps/Lab2.2/assets/response-code-and-body.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab2/assets/response-code-and-body.png rename to Workshops/JavaAndPowerApps/Lab2.2/assets/response-code-and-body.png diff --git a/Workshops/PythonAndPowerApps/Lab2/assets/response-with-new-list.png b/Workshops/JavaAndPowerApps/Lab2.2/assets/response-with-new-list.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab2/assets/response-with-new-list.png rename to Workshops/JavaAndPowerApps/Lab2.2/assets/response-with-new-list.png diff --git a/Workshops/PythonAndPowerApps/Lab2/assets/shopping-list-items.png b/Workshops/JavaAndPowerApps/Lab2.2/assets/shopping-list-items.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab2/assets/shopping-list-items.png rename to Workshops/JavaAndPowerApps/Lab2.2/assets/shopping-list-items.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/README.md b/Workshops/JavaAndPowerApps/Lab3.1/README.md similarity index 95% rename from Workshops/DotNetAndPowerApps/Lab3/README.md rename to Workshops/JavaAndPowerApps/Lab3.1/README.md index 43e5de2..45b256c 100644 --- a/Workshops/DotNetAndPowerApps/Lab3/README.md +++ b/Workshops/JavaAndPowerApps/Lab3.1/README.md @@ -1,4 +1,4 @@ -# Lab 3 - Creating a Custom Connector +# Lab 3.1 - Creating a Custom Connector with DotNet ToDo API (Optional) In order for your Power App to interact with the API in the previous lab, we need to create a Custom Connector. To create one, you you must describe the API that you want to connect to so that the connector understands the API's operations and data structures. @@ -14,7 +14,7 @@ You're going to start off by creating a [solution](https://learn.microsoft.com/e Make sure that you're in the correct environment at the top right-hand side of the portal - it should be ```(Your name)'s Environment```. If not then click on the environment picker and change it to the correct one. -![Environment picker in Power Apps](/Workshops/DotNetAndPowerApps/Lab3/assets/environment-picker.png) +![Environment picker in Power Apps](/Workshops/JavaAndPowerApps/Lab3.1/assets/environment-picker.png) 2. Click on **Solutions** in the left hand menu. @@ -35,7 +35,7 @@ Use these fields: The solution should automatically open up - If it doesn't, it should appear in the solution list. Click on the display name of your solution to open the solution. -![Screenshot of opened solution](/Workshops/DotNetAndPowerApps/Lab3/assets/open-solution.png) +![Screenshot of opened solution](/Workshops/JavaAndPowerApps/Lab3.1/assets/open-solution.png) ## Step 2 - Creating the Custom Connector and updating general details @@ -49,13 +49,13 @@ There are 12 API actions in total but we're going to make use of 7 for now. Chan 3. At the top of the page, name the connector ```DotNetToDo```. -![The custom connector name](/Workshops/DotNetAndPowerApps/Lab3/assets/connector-name.png) +![The custom connector name](/Workshops/JavaAndPowerApps/Lab3.1/assets/connector-name.png) Right now, you're on the ```1. General``` screen. Here, you can add a connector icon, color, and a description. We will skip that for now. However, we need to fill in a *Host*. Which is the URL of the DotNet API without the ```https://``` protocol. 4. Copy the URL of the DotNet API and paste it into the *host* field and then remove the ```https://``` protocol. - ![Screenshot of DotNet API Host in Custom Connector wizard](/Workshops/DotNetAndPowerApps/Lab3/assets/host-url-for-connector.png) + ![Screenshot of DotNet API Host in Custom Connector wizard](/Workshops/JavaAndPowerApps/Lab3.1/assets/host-url-for-connector.png) 5. Navigate to the security part of the wizard by clicking on the tab ```2. Security``` or by clicking on the ```Security β†’``` button on the bottom right. @@ -81,7 +81,7 @@ Let's start with the ```GET /lists``` action under the Lists API. 1. On the left pane, select ```+ New Action```. -![New Action button in the custom connector wizard](/Workshops/DotNetAndPowerApps/Lab3/assets/new-action-custom-connector.png) +![New Action button in the custom connector wizard](/Workshops/JavaAndPowerApps/Lab3.1/assets/new-action-custom-connector.png) 2. Fill in the following details: @@ -97,13 +97,13 @@ Let's start with the ```GET /lists``` action under the Lists API. * Verb: ```GET``` * URL: ```(YOUR API URL HERE)/lists?top=20&skip=0``` -![Import request from sample screenshot](/Workshops/DotNetAndPowerApps/Lab3/assets/import-from-sample-custom-connector.png) +![Import request from sample screenshot](/Workshops/JavaAndPowerApps/Lab3.1/assets/import-from-sample-custom-connector.png) 4. Click ```Import```. The following request should get generated: -![Generated request](/Workshops/DotNetAndPowerApps/Lab3/assets/generated-request.png) +![Generated request](/Workshops/JavaAndPowerApps/Lab3.1/assets/generated-request.png) Next, we are going to improve the query parameters, so that they are more useful for the users of the custom connector. @@ -120,7 +120,7 @@ Next, we are going to improve the query parameters, so that they are more useful The other fields can be left on the default value. -![All top query properties](/Workshops/DotNetAndPowerApps/Lab3/assets/top-query-properties.png) +![All top query properties](/Workshops/JavaAndPowerApps/Lab3.1/assets/top-query-properties.png) 7. When done, scroll up and select the ```← Back``` button. @@ -147,7 +147,7 @@ Remember, in Lab 2, while you were adding data via the ToDo API - when you ran t If you go back to the ```GET /lists``` action under the Lists API, you'll see that there is a sample response given. -![Sample 200 response from API](/Workshops/DotNetAndPowerApps/Lab3/assets/sample-responses.png) +![Sample 200 response from API](/Workshops/JavaAndPowerApps/Lab3.1/assets/sample-responses.png) We will use this sample in the Custom Connector. @@ -167,7 +167,7 @@ We will use this sample in the Custom Connector. The following should be generated: -![Generated response from sample](/Workshops/DotNetAndPowerApps/Lab3/assets/generated-response.png) +![Generated response from sample](/Workshops/JavaAndPowerApps/Lab3.1/assets/generated-response.png) In the screenshot above, you can see all the properties that are available in the body payload. These properties are available because they were in our sample JSON which we used to generate the response. @@ -342,7 +342,7 @@ The other fields can be left on the default value. When done, scroll up and sele You should have 3 List actions defined by now: -![Lists of 3 actions defined so far for ToDo lists](/Workshops/DotNetAndPowerApps/Lab3/assets/list-custom-connectors-actions.png) +![Lists of 3 actions defined so far for ToDo lists](/Workshops/JavaAndPowerApps/Lab3.1/assets/list-custom-connectors-actions.png) Let's go ahead and define the ListItem actions. @@ -414,7 +414,7 @@ The other fields can be left on the default value. When done, scroll up and sele The following should be generated: -![Generated response for GetListItems](/Workshops/DotNetAndPowerApps/Lab3/assets/generated-response-listitems.png) +![Generated response for GetListItems](/Workshops/JavaAndPowerApps/Lab3.1/assets/generated-response-listitems.png) 13. For **each** of those properties in the *body* section, select the Λ… next to the property and then fill in the following: @@ -818,7 +818,7 @@ When done, scroll up and select the ```← Back``` button. That will lead you ba You've done a TON of work so far and it has paid off because you have now defined the 7 actions that you'll be using in your Power App. -![All seven ToDo actions in the customer connector wizard](/Workshops/DotNetAndPowerApps/Lab3/assets/all-seven-actions.png) +![All seven ToDo actions in the customer connector wizard](/Workshops/JavaAndPowerApps/Lab3.1/assets/all-seven-actions.png) ## Step 5 - Using Custom Code Support? @@ -826,4 +826,4 @@ If you navigate to the ```4. Code (Preview)``` tab - you'll see that you have th Select the tab ```5. Test``` to move on to the last part of the connector - Testing. Which you will be doing in the next Lab. -### Next: [Lab 4 - Testing a Custom Connector](/Workshops/DotNetAndPowerApps/Lab4/) +### Next: [Lab 4 - Testing a Custom Connector](/Workshops/JavaAndPowerApps/Lab4/) diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/all-seven-actions.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/all-seven-actions.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/all-seven-actions.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/all-seven-actions.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/connector-name.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/connector-name.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/connector-name.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/connector-name.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/environment-picker.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/environment-picker.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/environment-picker.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/environment-picker.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/generated-request.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/generated-request.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/generated-request.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/generated-request.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/generated-response-listitems.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/generated-response-listitems.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/generated-response-listitems.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/generated-response-listitems.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/generated-response.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/generated-response.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/generated-response.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/generated-response.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/host-url-for-connector.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/host-url-for-connector.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/host-url-for-connector.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/host-url-for-connector.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/import-from-sample-custom-connector.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/import-from-sample-custom-connector.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/import-from-sample-custom-connector.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/import-from-sample-custom-connector.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/list-custom-connectors-actions.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/list-custom-connectors-actions.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/list-custom-connectors-actions.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/list-custom-connectors-actions.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/new-action-custom-connector.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/new-action-custom-connector.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/new-action-custom-connector.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/new-action-custom-connector.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/open-solution.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/open-solution.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/open-solution.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/open-solution.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/sample-responses.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/sample-responses.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/sample-responses.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/sample-responses.png diff --git a/Workshops/DotNetAndPowerApps/Lab3/assets/top-query-properties.png b/Workshops/JavaAndPowerApps/Lab3.1/assets/top-query-properties.png similarity index 100% rename from Workshops/DotNetAndPowerApps/Lab3/assets/top-query-properties.png rename to Workshops/JavaAndPowerApps/Lab3.1/assets/top-query-properties.png diff --git a/Workshops/PythonAndPowerApps/Lab3/README.md b/Workshops/JavaAndPowerApps/Lab3.2/README.md similarity index 95% rename from Workshops/PythonAndPowerApps/Lab3/README.md rename to Workshops/JavaAndPowerApps/Lab3.2/README.md index d200f18..406f563 100644 --- a/Workshops/PythonAndPowerApps/Lab3/README.md +++ b/Workshops/JavaAndPowerApps/Lab3.2/README.md @@ -1,4 +1,4 @@ -# Lab 3 - Creating a Custom Connector +# Lab 3.2 - Creating a Custom Connector with Python ToDo API (Optional) In order for your Power App to interact with the API in the previous lab, we need to create a Custom Connector. To create one, you you must describe the API that you want to connect to so that the connector understands the API's operations and data structures. @@ -14,7 +14,7 @@ You're going to start off by creating a [solution](https://learn.microsoft.com/e Make sure that you're in the correct environment at the top right-hand side of the portal - it should be ```(Your name)'s Environment```. If not then click on the environment picker and change it to the correct one. -![Environment picker in Power Apps](/Workshops/PythonAndPowerApps/Lab3/assets/environment-picker.png) +![Environment picker in Power Apps](/Workshops/JavaAndPowerApps/Lab3.2/assets/environment-picker.png) 2. Click on **Solutions** in the left hand menu. @@ -35,7 +35,7 @@ Use these fields: The solution should automatically open up - If it doesn't, it should appear in the solution list. Click on the display name of your solution to open the solution. -![Screenshot of opened solution](/Workshops/PythonAndPowerApps/Lab3/assets/open-solution.png) +![Screenshot of opened solution](/Workshops/JavaAndPowerApps/Lab3.2/assets/open-solution.png) ## Step 2 - Creating the Custom Connector and updating general details @@ -49,13 +49,13 @@ There are 12 API actions in total but we're going to make use of 7 for now. Chan 3. At the top of the page, name the connector ```PythonToDo```. -![The custom connector name](/Workshops/PythonAndPowerApps/Lab3/assets/connector-name.png) +![The custom connector name](/Workshops/JavaAndPowerApps/Lab3.2/assets/connector-name.png) Right now, you're on the ```1. General``` screen. Here, you can add a connector icon, color, and a description. We will skip that for now. However, we need to fill in a *Host*. Which is the URL of the Python API without the ```https://``` protocol. 4. Copy the URL of the Python API and paste it into the *host* field and then remove the ```https://``` protocol. - ![Screenshot of Python API Host in Custom Connector wizard](/Workshops/PythonAndPowerApps/Lab3/assets/host-url-for-connector.png) + ![Screenshot of Python API Host in Custom Connector wizard](/Workshops/JavaAndPowerApps/Lab3.2/assets/host-url-for-connector.png) 5. Navigate to the security part of the wizard by clicking on the tab ```2. Security``` or by clicking on the ```Security β†’``` button on the bottom right. @@ -81,7 +81,7 @@ Let's start with the ```GET /lists``` action under the Lists API. 1. On the left pane, select ```+ New Action```. -![New Action button in the custom connector wizard](/Workshops/PythonAndPowerApps/Lab3/assets/new-action-custom-connector.png) +![New Action button in the custom connector wizard](/Workshops/JavaAndPowerApps/Lab3.2/assets/new-action-custom-connector.png) 2. Fill in the following details: @@ -97,13 +97,13 @@ Let's start with the ```GET /lists``` action under the Lists API. * Verb: ```GET``` * URL: ```(YOUR API URL HERE)/lists?top=20&skip=0``` -![Import request from sample screenshot](/Workshops/PythonAndPowerApps/Lab3/assets/import-from-sample-custom-connector.png) +![Import request from sample screenshot](/Workshops/JavaAndPowerApps/Lab3.2/assets/import-from-sample-custom-connector.png) 4. Click ```Import```. The following request should get generated: -![Generated request](/Workshops/PythonAndPowerApps/Lab3/assets/generated-request.png) +![Generated request](/Workshops/JavaAndPowerApps/Lab3.2/assets/generated-request.png) Next, we are going to improve the query parameters, so that they are more useful for the users of the custom connector. @@ -120,7 +120,7 @@ Next, we are going to improve the query parameters, so that they are more useful The other fields can be left on the default value. -![All top query properties](/Workshops/PythonAndPowerApps/Lab3/assets/top-query-properties.png) +![All top query properties](/Workshops/JavaAndPowerApps/Lab3.2/assets/top-query-properties.png) 7. When done, scroll up and select the ```← Back``` button. @@ -147,7 +147,7 @@ Remember, in Lab 2, while you were adding data via the ToDo API - when you ran t If you go back to the ```GET /lists``` action under the Lists API, you'll see that there is a sample response given. -![Sample 200 response from API](/Workshops/PythonAndPowerApps/Lab3/assets/sample-responses.png) +![Sample 200 response from API](/Workshops/JavaAndPowerApps/Lab3.2/assets/sample-responses.png) We will use this sample in the Custom Connector. @@ -167,7 +167,7 @@ We will use this sample in the Custom Connector. The following should be generated: -![Generated response from sample](/Workshops/PythonAndPowerApps/Lab3/assets/generated-response.png) +![Generated response from sample](/Workshops/JavaAndPowerApps/Lab3.2/assets/generated-response.png) In the screenshot above, you can see all the properties that are available in the body payload. These properties are available because they were in our sample JSON which we used to generate the response. @@ -342,7 +342,7 @@ The other fields can be left on the default value. When done, scroll up and sele You should have 3 List actions defined by now: -![Lists of 3 actions defined so far for ToDo lists](/Workshops/PythonAndPowerApps/Lab3/assets/list-custom-connectors-actions.png) +![Lists of 3 actions defined so far for ToDo lists](/Workshops/JavaAndPowerApps/Lab3.2/assets/list-custom-connectors-actions.png) Let's go ahead and define the ListItem actions. @@ -414,7 +414,7 @@ The other fields can be left on the default value. When done, scroll up and sele The following should be generated: -![Generated response for GetListItems](/Workshops/PythonAndPowerApps/Lab3/assets/generated-response-listitems.png) +![Generated response for GetListItems](/Workshops/JavaAndPowerApps/Lab3.2/assets/generated-response-listitems.png) 13. For **each** of those properties in the *body* section, select the Λ… next to the property and then fill in the following: @@ -818,7 +818,7 @@ When done, scroll up and select the ```← Back``` button. That will lead you ba You've done a TON of work so far and it has paid off because you have now defined the 7 actions that you'll be using in your Power App. -![All seven ToDo actions in the customer connector wizard](/Workshops/PythonAndPowerApps/Lab3/assets/all-seven-actions.png) +![All seven ToDo actions in the customer connector wizard](/Workshops/JavaAndPowerApps/Lab3.2/assets/all-seven-actions.png) ## Step 5 - Using Custom Code Support? @@ -826,4 +826,4 @@ If you navigate to the ```4. Code (Preview)``` tab - you'll see that you have th Select the tab ```5. Test``` to move on to the last part of the connector - Testing. Which you will be doing in the next Lab. -### Next: [Lab 4 - Testing a Custom Connector](/Workshops/PythonAndPowerApps/Lab4/) +### Next: [Lab 4 - Testing a Custom Connector](/Workshops/JavaAndPowerApps/Lab4/) diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/all-seven-actions.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/all-seven-actions.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/all-seven-actions.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/all-seven-actions.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/connector-name.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/connector-name.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/connector-name.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/connector-name.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/environment-picker.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/environment-picker.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/environment-picker.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/environment-picker.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/generated-request.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/generated-request.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/generated-request.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/generated-request.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/generated-response-listitems.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/generated-response-listitems.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/generated-response-listitems.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/generated-response-listitems.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/generated-response.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/generated-response.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/generated-response.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/generated-response.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/host-url-for-connector.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/host-url-for-connector.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/host-url-for-connector.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/host-url-for-connector.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/import-from-sample-custom-connector.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/import-from-sample-custom-connector.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/import-from-sample-custom-connector.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/import-from-sample-custom-connector.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/list-custom-connectors-actions.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/list-custom-connectors-actions.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/list-custom-connectors-actions.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/list-custom-connectors-actions.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/new-action-custom-connector.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/new-action-custom-connector.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/new-action-custom-connector.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/new-action-custom-connector.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/open-solution.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/open-solution.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/open-solution.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/open-solution.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/sample-responses.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/sample-responses.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/sample-responses.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/sample-responses.png diff --git a/Workshops/PythonAndPowerApps/Lab3/assets/top-query-properties.png b/Workshops/JavaAndPowerApps/Lab3.2/assets/top-query-properties.png similarity index 100% rename from Workshops/PythonAndPowerApps/Lab3/assets/top-query-properties.png rename to Workshops/JavaAndPowerApps/Lab3.2/assets/top-query-properties.png diff --git a/Workshops/JavaAndPowerApps/README.md b/Workshops/JavaAndPowerApps/README.md index 257a140..20057b7 100644 --- a/Workshops/JavaAndPowerApps/README.md +++ b/Workshops/JavaAndPowerApps/README.md @@ -11,20 +11,26 @@ This lab is all about setting up your environment. This is what you need to get :link: [Lab 0 - Setup your environment](/Workshops/JavaAndPowerApps/Lab0/) -### Lab 1 - Getting the Java API up and running in Azure -This lab will help you deploy the Java API to Azure using the Azure Developer CLI. +### Lab 1 - Getting the Java API, DotNet (optional) & Python (optional) APIs up and running in Azure +This lab will help you deploy the Java API, DotNet (optional) & Python (optional) APIs to Azure using the Azure Developer CLI. -:link: [Lab 1 - Getting the Java API up and running in Azure](/Workshops/JavaAndPowerApps/Lab1/) +1. :link: [Lab 1 - Getting the Java API up and running in Azure](/Workshops/JavaAndPowerApps/Lab1/) +2. :link: [Lab 1.1 - Getting the DotNet API up and running in Azure (Optional)](/Workshops/JavaAndPowerApps/Lab1.1/) +3. :link: [Lab 1.2 - Getting the Python API up and running in Azure (Optional)](/Workshops/JavaAndPowerApps/Lab1.2/) ### Lab 2 - Adding data with the ToDo API Now that you've got our API up and running in Azure, let's add some data so it's there, ready and waiting, for us to play with in Power Apps. -:link: [Lab 2 - Adding data with the ToDo API](/Workshops/JavaAndPowerApps/Lab2/) +1. :link: [Lab 2 - Adding data with the Java ToDo API](/Workshops/JavaAndPowerApps/Lab2/) +2. :link: [Lab 2.1 - Adding data with the DotNet ToDo API (Optional)](/Workshops/JavaAndPowerApps/Lab2.1/) +3. :link: [Lab 2.2 - Adding data with the Python ToDo API (Optional)](/Workshops/JavaAndPowerApps/Lab2.2/) ### Lab 3 - Creating a Custom Connector This lab will help you enable your Power App to interact with the API in the previous lab, by creating a Custom Connector. -:link: [Lab 3 - Creating a Custom Connector](/Workshops/JavaAndPowerApps/Lab3/) +1. :link: [Lab 3 - Creating a Custom Connector with the Java API](/Workshops/JavaAndPowerApps/Lab3/) +2. :link: [Lab 3.1 - Creating a Custom Connector with the DotNet API (Optional)](/Workshops/JavaAndPowerApps/Lab3.1/) +3. :link: [Lab 3.2 - Creating a Custom Connector with the Python API (Optional)](/Workshops/JavaAndPowerApps/Lab3.2/) ### Lab 4 - Testing a Custom Connector With the Custom Connector created, this lab will take you through the necessary steps to test it and to make sure that it's working appropriately. diff --git a/Workshops/PythonAndPowerApps/Lab0/README.md b/Workshops/PythonAndPowerApps/Lab0/README.md deleted file mode 100644 index aa50246..0000000 --- a/Workshops/PythonAndPowerApps/Lab0/README.md +++ /dev/null @@ -1,86 +0,0 @@ -# Lab 0 - Setup your environment - -> NOTE: -> -> If you already have a Power Platform environment or an Azure account, you're more than welcome to use any of those for this workshop. However, be careful: when you are using an environment where you are not the admin, it could happen that you don't have enough rights to perform all actions. You could for instance run into a Data Loss Prevention (DLP) policy which could block the usage of the custom connector you are going to be building later in this workshop. If you're not an admin for your Azure account, you might be blocked from creating certain resources needed to complete this workshop as well. - -## Step 1: Create your own developer tenant - -You can create your own developer tenant through the Microsoft 365 Developer Program. Go to the Microsoft 365 Developer Program website and make sure to register for a free 25-user tenant. When you are done creating the tenant, make sure to go to the next step. - -1. Go to [developer.microsoft.com/microsoft-365/dev-program](https://developer.microsoft.com/microsoft-365/dev-program) -2. Click **Join Now** - -![Screenshot of Join Now Call to action on the Microsoft 365 Developer Program page](/Workshops/PythonAndPowerApps/Lab0/assets/join-m365-dev-program.jpg) - -3. Sign into your Microsoft account or Create a Microsoft account - -> **Note**: If you’re creating a new account, you’ll need to validate the account with a phone number. - -4. Complete the **Join the Microsoft 365 Developer Program!** form. -5. On the **Set up your Microsoft 365 E5 sandbox** page, make sure that *Instant sandbox* is selected and then click **Next**. - -![Screenshot of the Set up your Microsoft 365 E5 account page](/Workshops/PythonAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png) - -6. Finish setting up your *Instant sandbox* by choosing your country/region, admin username, and admin password. - -> **Note**: Make sure to note down / remember this admin password because this will be the password for your developer tenant. - -7. Click **Continue**. -8. Provide a valid cell phone number and choose **Send code**. Enter the code that you receive, and then choose **Set up**. - -> **Note**: You must use a valid cell phone number and not Voice over IP (VoIP). You can only have one Microsoft 365 Developer Program account associated with your phone number. - -After the subscription is created, your subscription domain name and expiration date appear on your profile page. - -9. Copy/Save the Administrator email address for signing into the Power Apps portal. - -![Screenshot of the Microsoft 365 developer subscriptions page](/Workshops/PythonAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png) - -## Step 2: Add a Power Platform Developer account to the Microsoft 365 Developer tenant you've just created - -The Power Apps Developer Plan gives you a free development environment to build and test with Power Apps, Power Automate, and Microsoft Dataverse. In this workshop, the Power Apps Developer Plan enables you to also create a custom connector. - -![Screenshot showing the Power Apps Developer plan features](/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png) - -1. Go to [powerapps.microsoft.com/developerplan](https://powerapps.microsoft.com/developerplan). - -2. Click **Get started free**. - -3. For **Step 1**, enter your **M365 Dev Program** email address (the **Administrator email** address). - -![Microsoft Power Apps for Developer Step One](/Workshops/PythonAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg) - -4. You should receive the following message: - -![Microsoft Power Apps for Developer Step One](/Workshops/PythonAndPowerApps/Lab0/assets/sign-up-message.jpg) - -Click **Sign in** and sign-in using your M365 Dev Program credentials (the **Administrator** email address and password). - -5. After you sign in and complete the process, click **Get Started**. - -![Microsoft Power Apps for Developer Step One](/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-get-started.jpg) - -6. After your licenses have been configured, you should automatically be redirected to [make.powerapps.com](https://make.powerapps.com/) - which is the Power Apps Portal. - -![Power Apps Maker Portal](/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-portal.png) - -## Step 3: Create an Azure account - -The Java API, which will serve as the backend for what you'll be bulding in this workshop, will be hosted on Azure and in order to do that - you will need an Azure account. - -You can create an Azure account for free and receive 12 months of popular services for free and a $200 credit to explore Azure for 30 days - which is more than enough for this workshop. - -1. Go to [azure.microsoft.com/free](https://azure.microsoft.com/free/) and click **Start Free**. - -![Start free with Azure](/Workshops/PythonAndPowerApps/Lab0/assets/azure-start-free.png) - -2. Sign into your Microsoft account - -3. Fill in profile details to complete the sign up process. - -4. Once your information has been confirmed, you'll be ready to start with Azure. - -![Screenshot showing a link to the Azure Portal](/Workshops/PythonAndPowerApps/Lab0/assets/ready-with-azure.png) - -### Next: [Lab 1 - Getting the Python API up and running in Azure](/Workshops/PythonAndPowerApps/Lab1/) diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/README.md b/Workshops/PythonAndPowerApps/Lab0/assets/README.md deleted file mode 100644 index d6e813d..0000000 --- a/Workshops/PythonAndPowerApps/Lab0/assets/README.md +++ /dev/null @@ -1 +0,0 @@ -Assets for the Lab 0 tutorial diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/azure-start-free.png b/Workshops/PythonAndPowerApps/Lab0/assets/azure-start-free.png deleted file mode 100644 index 4da5042..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/azure-start-free.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png b/Workshops/PythonAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png deleted file mode 100644 index 5728f69..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/join-m365-dev-program.jpg b/Workshops/PythonAndPowerApps/Lab0/assets/join-m365-dev-program.jpg deleted file mode 100644 index 19c1d78..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/join-m365-dev-program.jpg and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png b/Workshops/PythonAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png deleted file mode 100644 index 796fb4f..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/microsoft-365-developer-subscriptions.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png b/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png deleted file mode 100644 index 3848381..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-dev-plan-custom-conn.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-get-started.jpg b/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-get-started.jpg deleted file mode 100644 index c1e9e8d..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-get-started.jpg and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-portal.png b/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-portal.png deleted file mode 100644 index 993ffe9..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/power-apps-portal.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/ready-with-azure.png b/Workshops/PythonAndPowerApps/Lab0/assets/ready-with-azure.png deleted file mode 100644 index b7ec39e..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/ready-with-azure.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png b/Workshops/PythonAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png deleted file mode 100644 index 8513bb4..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/set-up-your-microsoft-365-e5-sandbox.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg b/Workshops/PythonAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg deleted file mode 100644 index 19a60e6..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab0/assets/sign-up-for-power-apps.jpg and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab4/README.md b/Workshops/PythonAndPowerApps/Lab4/README.md deleted file mode 100644 index 6cad990..0000000 --- a/Workshops/PythonAndPowerApps/Lab4/README.md +++ /dev/null @@ -1,124 +0,0 @@ -# Lab 4 - Testing a Custom Connector - -Now that you've created a Custom Connector and added all the necessary actions, it is now time to test it to make sure that it's working properly. Testing anything you've created is very important. - -1. To ensure that we're testing the latest changes, click the ```βœ“ Update connector``` button. - -2. Every connector needs a connection for it to work so under the *Connections* section, click ```+ New Connection```. - -![Screenshot of the Connections section under the Test Tab in the custom connector wizard](/Workshops/PythonAndPowerApps/Lab4/assets/new-custom-connector-connection.png) - -3. After creating the connection, you can proceed to test out the actions you have just created. - -**GetLists** - -Ensure that the **GetLists** action is selected under the *Operations* section on the left-hand side of the screen. - -Then click ```Test operation```. - -This should be the response. A 200 response code along with the body containing all ToDo lists: - -![GetLists action Test response](/Workshops/PythonAndPowerApps/Lab4/assets/get-lists-response.png) - -**CreateList** - -Ensure that the **CreateList** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* id: ```2e134d62c2a44f1f8ec9a9``` -* name: ```Work``` -* description: ```My work list``` - -Then click ```Test operation```. - -You should have a 201 response code along with the body containing the new *Work* ToDo list. - -**GetListItems** - -Let's skip the *DeleteList* action for now and ensure that the **GetListItems** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```c9c74ec076c245b195447f19cb3d6bbe``` - -> **Note**: This is the *id* of the *Shopping* list that you created in [Lab 2](https://github.com/microsoft/PowerPlatformAdvocates/tree/main/Workshops/PythonAndPowerApps/Lab2#step-2---add-your-own-list-data). - -Click ```Test operation```. - -You should have a 200 response code along with the body containing all of the *Shopping* ToDo list items. - -**CreateListItem** - -Ensure that the **CreateListItem** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` -* id: ```c5c1ed8252e14e3daa0d74``` -* listId: ```2e134d62c2a44f1f8ec9a9``` -* name: ```Send email to manager``` - -Leave the other parameters as is. - -Click ```Test operation```. - -You should have a 201 response code along with the body containing the new *Work* ToDo list item: "Send email to manager". - -**UpdateListItem** - -Let's skip the *DeleteListItem* action for now and ensure that the **UpdateListItem** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` -* itemId: ```c5c1ed8252e14e3daa0d74``` -* id: ```c5c1ed8252e14e3daa0d74``` -* listId: ```2e134d62c2a44f1f8ec9a9``` -* name: ```Send email to manager and colleague``` -* state: ```todo``` - -Leave the other parameters as is. - -Click ```Test operation```. - -You should have a 200 response code along with the body containing the updated *Work* ToDo list item: "Send email to manager and colleague". It was previously: "Send email to manager". - -![Body response of updated ToDo list item](/Workshops/PythonAndPowerApps/Lab4/assets/updated-list-item-response.png) - -Now let's work with the Delete actions. - -**DeleteListItem** - -Ensure that the **DeleteListItem** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` -* itemId: ```c5c1ed8252e14e3daa0d74``` - -Click ```Test operation```. - -You should have a 204 response code confirming that something has been deleted. This test has deleted the "Send email to manager and colleague" list item from the *Work* ToDo list. - -**DeleteList** - -Ensure that the **DeleteList** action is selected under the *Operations* section on the left-hand side of the screen. - -Fill in the following details: - -* listId: ```2e134d62c2a44f1f8ec9a9``` - -Click ```Test operation```. - -You should have a 204 response code confirming that something has been deleted. This test has deleted the *Work* ToDo list. - -And there you have it! All actions have been tested and passed. - -![All actions with passed test](/Workshops/PythonAndPowerApps/Lab4/assets/passed-action-tests.png) - -Click the ```βœ“ Update connector``` button and once the custom connector has been saved, click the ```X Close ``` button. - -Now that you know that your custom connector is complete, we can go ahead and use it in a Power App - which you will be building next. - -### Next: [Lab 5 - Creating a Power Apps Canvas App](/Workshops/PythonAndPowerApps/Lab5/) diff --git a/Workshops/PythonAndPowerApps/Lab4/assets/get-lists-response.png b/Workshops/PythonAndPowerApps/Lab4/assets/get-lists-response.png deleted file mode 100644 index 27772e4..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab4/assets/get-lists-response.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab4/assets/new-custom-connector-connection.png b/Workshops/PythonAndPowerApps/Lab4/assets/new-custom-connector-connection.png deleted file mode 100644 index 01d9910..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab4/assets/new-custom-connector-connection.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab4/assets/passed-action-tests.png b/Workshops/PythonAndPowerApps/Lab4/assets/passed-action-tests.png deleted file mode 100644 index 6d81317..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab4/assets/passed-action-tests.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab4/assets/updated-list-item-response.png b/Workshops/PythonAndPowerApps/Lab4/assets/updated-list-item-response.png deleted file mode 100644 index 7a185a7..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab4/assets/updated-list-item-response.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/README.md b/Workshops/PythonAndPowerApps/Lab5/README.md deleted file mode 100644 index c2aa049..0000000 --- a/Workshops/PythonAndPowerApps/Lab5/README.md +++ /dev/null @@ -1,534 +0,0 @@ -# Lab 5 - Creating a Power Apps Canvas App - -In this lab, you'll be creating a ToDo List Canvas App which will be backed by the Custom Connector you created in the previous labs. - -1. Go to [make.powerapps.com](https://make.powerapps.com) and sign in with the administrator email and password that you created in Lab 0. - -Make sure that you're in the correct environment at the top right-hand side of the portal - it should be ```(Your name)'s Environment```. If not then click on the environment picker and change it to the correct one. - -2. Click on **Solutions** in the left hand menu. - -3. In the solution view, look for the ```Python + Power Workshop``` solution and then click on it's Display name. - -You should see the ```PythonToDo``` custom connector that you've just finished creating but now we're going to add a new object - a Canvas App. - -4. Click the **+ New** button at the top of the solution. Hover over the *App* menu item and then select **Canvas app**. - -The *Canvas App from blank* dialog should pop up. - -5. Fill in the following details: - - * App name: ```Python ToDo App``` - * Format: ```Tablet``` - -6. Click **Create**. - -![Screenshot of the Canvas App from blank dialog](/Workshops/PythonAndPowerApps/Lab5/assets/canvas-app-dialog.png) - -The Power Apps Studio will open up. When you're here for the first time, a welcome dialog will show. Select the **Skip** button. - -## Adding the Custom Connector as a Data Source - -1. In Power Apps, on the left panel, click the **Data** icon and click **Add Data**. - -![Data icon in the Power Apps Studio](/Workshops/PythonAndPowerApps/Lab5/assets/data-icon-power-apps.png) - -2. In the ```Select a data source``` window, search for ```PythonToDo``` and select the result. - -3. Select **PythonToDo** once more. - -4. Select the **More Actions** icon and select **Rename**. - -![Renaming the Custom Connector](/Workshops/PythonAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png) - -5. Rename to ```PythonToDo```. - -## Adding a header - -With a connection to the Python ToDo Custom Connector made, you're now ready to configure the UI. - -1. First, go back to the ```Tree view```. - -![Tree View option in Power Apps panel](/Workshops/PythonAndPowerApps/Lab5/assets/tree-view-canvas-apps.png) - -2. Rename the ```Screen1``` screen to ```ToDo Screen``` by clicking on the ... next to **Screen1** and then selecting **Rename**. - -3. With the *ToDo Screen* selected, make sure that the **Fill** property is selected on the *Properties List* dropdown. - -![The Properties list in the Power Apps Studio](/Workshops/PythonAndPowerApps/Lab5/assets/properties-list.png) - -4. Fill in this value in the *Formula Bar*: ```RGBA(41, 41, 41, 1)``` - -![Fill property value of Screen](/Workshops/PythonAndPowerApps/Lab5/assets/screen-fill-property-value.png) - -5. Click the **+ Insert** button on the top command bar and select **Text Label**. Rename the component to ```lblLogo```. - -6. Make sure that the **lblLogo** component is selected and then in the right *Properties Pane*, change the following properties: - * Text: ```ToDo``` - * Font: ```Segoe UI``` - * Font size: ```20``` - * Font weight: ```Bold``` - * Position: ```0 x 0``` - * Size: ```300 x 70``` - * Padding: ```5 (Top) x 5 (Bottom) x 65 (Left) x 5 (Right)``` - -![Properties configured with the Properties Pane](/Workshops/PythonAndPowerApps/Lab5/assets/configure-with-properties-pane.png) - -7. With the *lblLogo* selected, make sure that the following properties are configured with the *Properties List* dropdown: - - * Color: ```RGBA(277, 277, 277, 1)``` - * Fill: ```RGBA(0, 120, 212, 1)``` - -> **Note**: When it comes to properties, you can configure them in multiple ways as shown above. Either in the *Properties Pane* on the right or with the *Properties List* dropdown and the *Formula Bar* at the top. - -8. Click the **+ Insert** button, search for "Check (badge)" and then select it when it pops up. Rename it to ```icoLogo```. - -9. Configure the ```icoLogo``` properties: - - * Display mode: ```View``` - * Position: ```14 x 16``` - * Size: ```40 x 40``` - * Color: ```RGBA(227, 227, 227, 1)``` - -10. Click the **+ Insert** button and select **Text Label**. Rename it to ```lblHeader```. - -11. Configure the ```lblHeader``` properties: - - * Text: ```User().FullName``` (Use the *Properties list* dropdown and *Formula Bar* for this one) - * Font: ``Segoe UI`` - * Font Size: ```16``` - * Text Alignment: ```Align right``` - * Position: ```300 x 0``` - * Size: ```1066 x 70``` - * Padding: ```5 (Top) x 5 (Bottom) x 5 (Left) x 15 (Right)``` - * Color: ```RGBA(227, 227, 227, 1)``` - * Fill: ```RGBA(2, 69, 120, 1)``` - -Your header should now look like this: - -![Screenshot of completed App Header](/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-header.png) - -12. Let's go ahead and **Save** our work by clicking on the Save icon at the top right-hand side of the screen. - -## Adding the Lists Gallery - -1. Click the **+ Insert** button and select **Rectangle**. Rename it to ```recListBackground```. - -2. Configure the ```recListBackground``` properties: - - * Position: ```0 x 70``` - * Size: ```300 x 698``` - * Fill: ```RGBA(50, 49, 48, 1)``` - -3. Click the **+ Insert** button and search for **Blank vertical gallery** and then select it when it pops up. Rename it to ```galLists```. - -4. Configure the ```galLists``` properties: - - * Position: ```0 x 68``` - * Size: ```300 x 625``` - * Fill: ```RGBA(50, 49, 48, 1)``` - * Template size: ```57``` - * Template padding: ```0``` - * Template Fill: ```If(ThisItem.IsSelected, RGBA(72,72,72,1))``` - -5. On the **galLists** component, click **Add an item from the Insert pane**. - -6. In the **Insert** pane on the left, select **Text Label**. - -7. Then search for "Vertical Line" and select it when it pops up. - -8. Go back to the **Tree View** and rename ```Icon2``` to ```icoSelector```. Also rename ```Label3``` to ```lblListName```. - -![List gallery components](/Workshops/PythonAndPowerApps/Lab5/assets/list-gallery.png) - -8. Select the **icoSelector** component and configure the following properties: - - * Position: ```0 x 0``` - * Size: ```4 x 57``` - * Color: ```RGBA(0, 120, 212, 1)``` - * Visible: ```If(ThisItem.IsSelected, true, false)``` (Use the *Properties list* dropdown and *Formula Bar* for this one) - -9. Select the **lblListName** component and configure the following properties: - - * Position: ```24 x 12``` - * Size: ```270 x 37``` - * Padding: ```5 (top) x 5 (bottom) x 20 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -10. Let's go ahead and **Save** our work. - -## Adding the "New List" text field - -1. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtAddList```. - -2. Click the **+ Insert** button and search for **List scroll watchlist** and then select it when it pops up. Rename it to ```icoAddList```. - -3. Configure the ```txtAddList``` properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```New List``` - * Position: ```11 x 712``` - * Size: ```278 x 41``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 35 (right)``` - * Border thickness: ```0``` - * Border radius: ```0``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Focused border thickness: ```0``` - -4. Configure the ```icoAddList``` properties: - * Display mode: ```If(txtAddList.Text = "", DisplayMode.View, DisplayMode.Edit)``` (Use the *Properties list* dropdown and *Formula Bar* for this one) - * Position: ```254 x 715``` - * Size: ```35 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 5 (left) x 5 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(255, 255, 255, 1)``` - -Your app should look like this now. You're making good progress: - -![Power App with List gallery and text input](/Workshops/PythonAndPowerApps/Lab5/assets/completed-lists-gallery.png) - -5. Let's go ahead and **Save** our work. - -## Adding the List Items Gallery - -1. Click the **+ Insert** button and search for **Blank vertical gallery** and then select it when it pops up. Rename it to ```galListItems```. - -2. Configure the ```galListItems``` properties: - - * Position: ```300 x 182``` - * Size: ```766 x 586``` - * Template size: ```59``` - * Template padding: ```0``` - * Template Fill: ```If(ThisItem.IsSelected, RGBA(72,72,72,1))``` - -3. On the **galListItems** component, click **Add an item from the Insert pane**. - -4. In the **Insert** pane on the left, select **Text Label**, - -5. Then search for "Check" and select it when it pops up. - -6. Then search for "Circle" and select it when it pops up. - -7. Go back to the **Tree View** and rename: - * ```Circle1``` to ```cirCheckMark``` - * ```Icon4``` to ```icoCheckMark``` - * ```Label4``` to ```lblListItemName```. - -![List Items Gallery components](/Workshops/PythonAndPowerApps/Lab5/assets/list-items-gallery.png) - -8. Select the **cirCheckMark** component and configure the following properties: - * Position: ```32 x 15``` - * Size: ```30 x 30``` - * Border thickness: ```2``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover fill: ```RGBA(0, 0, 0, 0)``` - -9. Select the **icoCheckMark** component and configure the following properties: - * Position: ```32 x 15``` - * Size: ```30 x 30``` - * Padding: ```5 (top) x 5 (bottom) x 5 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -10. Select the **lblListItemName** component and configure the following properties: - * Position: ```73 x 10``` - * Size: ```680 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - -11. Let's go ahead and **Save** our work. - -## Adding the "New List item" text field - -1. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtAddItem```. - -2. Click the **+ Insert** button and search for **Check** and then select it when it pops up. Rename it to ```icoAddItem```. - -3. Configure the ```txtAddItem``` properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```Add an item``` - * Position: ```316 x 137``` - * Size: ```733 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(0, 0, 0, 0)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -4. Configure the ```icoAddItem``` properties: - * Position: ```1014 x 137``` - * Size: ```35 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 5 (left) x 5 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Visible: ```If(txtAddItem.Text = "", false, true)``` - -5. Let's go ahead and **Save** our work. - -## Adding the List label and List delete button - -1. Click the **+ Insert** button and select **Text label**. Rename it to ```lblCurrentList```. - -2. Configure the ```lblCurrentList``` properties: - * Text: ```List Name``` - * Font: ```Segoe UI``` - * Font size: ```18``` - * Font weight: ```Bold``` - * Position: ```300 x 70``` - * Size: ```766 x 57``` - * Padding: ```5 (top) x 5 (bottom) x 20 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(59, 58, 57, 1)``` - -3. Click the **+ Insert** button and search for **Trash** and then select it when it pops up. Rename it to ```icoDeleteList```. - -4. Configure the ```icoDeleteList``` properties: - * Position: ```1005 x 70``` - * Size: ```61 x 57``` - * Padding: ```15 (top) x 15 (bottom) x 15 (left) x 15 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(0, 120, 212, 1)``` - -5. Let's go ahead and **Save** our work. - -You're almost there: - -![Screenshot of app showing list item gallery and additional components](/Workshops/PythonAndPowerApps/Lab5/assets/completed-list-item-gallery.png) - -## Adding the "Select Item" components - -1. Click the **+ Insert** button and select **Rectangle**. Rename it to ```recSelectItemBackground```. - -2. Configure the ```recSelectItemBackground``` properties: - - * Position: ```1066 x 70``` - * Size: ```300 x 698``` - * Fill: ```RGBA(50, 49, 48, 1)``` - -3. Click the **+ Insert** button and select **Text label**. Rename it to ```lblSelectItem```. - -4. Configure the ```lblSelectItem``` properties: - * Text: ```Select an item to edit``` - * Font size: ```12``` - * Text alignment: ```Align.Center``` - * Position: ```1122 x 147``` - * Size: ```188 x 53``` - * Color: ```RGBA(255, 255, 255, 1)``` - -5. Click the **+ Insert** button and search for **Document checkmark** and then select it when it pops up. Rename it to ```icoSelectItem```. - -6. Configure the ```icoSelectItem``` properties: - * Display mode: ```View``` - * Position: ```1196 x 116``` - * Size: ```40 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - -7. Let's go ahead and **Save** our work. - -## Adding a "form" to edit List Items - -1. Click the **+ Insert** button and select **Rectangle**. Rename it to ```recFormBackground``` and then configure the following properties: - * Position: ```1066 x 116``` - * Size: ```300 x 652``` - * Fill: ```RGBA(50, 49, 48, 1)``` - -2. Click the **+ Insert** button and select **Text label**. Rename it to ```lblCurrentItem``` and then configure the following properties: - * Text: ```List Item Name``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Bold``` - * Position: ```1066 x 70``` - * Size: ```252 x 46``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(59, 58, 57, 1)``` - -3. Click the **+ Insert** button and search for **Trash** and then select it when it pops up. Rename it to ```icoDeleteItem``` and then configure the following properties: - * Position: ```1318 x 70``` - * Size: ```48 x 46``` - * Padding: ```10 (top) x 10 (bottom) x 10 (left) x 10 (right)``` - * Focused border thickness: ```0``` - * Color: ```RGBA(0, 120, 212, 1)``` - * Fill: ```RGBA(59, 58, 57, 1)``` - -4. Click the **+ Insert** button and select **Text label**. Rename it to ```lblName``` and then configure the following properties: - * Text: ```Name``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 123``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -5. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtItemName``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```Name``` - * Position: ```1078 x 156``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -Here's a UI check-in to see if you're on the right track: - -![Screenshot of Form UI thus far](/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-name-field.png) - -6. Click the **+ Insert** button and select **Text label**. Rename it to ```lblDescription``` and then configure the following properties: - * Text: ```Description``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 200``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -7. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtItemDescription``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Hint text: ```Item Description``` - * Mode: ```Multiline``` - * Position: ```1078 x 233``` - * Size: ```270 x 100``` - * Padding: ```10 (top) x 5 (bottom) x 12 (left) x 10 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -8. Click the **+ Insert** button and select **Text label**. Rename it to ```lblState``` and then configure the following properties: - * Text: ```State``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 340``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -9. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtStateBackground``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Position: ```1078 x 373``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -10. Click the **+ Insert** button and search for **Drop Down** and then select it when it pops up. Rename it to ```ddItemState``` and then configure the following properties: - * Items: ```["To Do", "Done"]``` - * Position: ```1078 x 374``` - * Size: ```269 x 30``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover fill: ```RGBA(0, 0, 0, 0)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Border thickness: ```0``` - * Focused border thickness: ```0``` - * Chevron background: ```RGBA(0, 0, 0, 0)``` - * Chevron hover background: ```RGBA(0, 0, 0, 0)``` - * Pressed fill: ```RGBA(0, 0, 0, 0)``` - * Selection fill: ```RGBA(72, 72, 72, 1)``` - -Here's another UI check-in to see if you're on the right track: - -![Screenshot of Form UI thus far](/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-description-state-field.png) - -11. Click the **+ Insert** button and select **Text label**. Rename it to ```lblDueDate``` and then configure the following properties: - * Text: ```Due Date``` - * Font: ```Segoe UI``` - * Font size: ```12``` - * Font weight: ```Semibold``` - * Position: ```1066 x 418``` - * Size: ```150 x 31``` - * Padding: ```5 (top) x 5 (bottom) x 15 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - -12. Click the **+ Insert** button and select **Text Input**. Rename it to ```txtDueDateBackground``` and then configure the following properties: - * Default: remove "Text Input" and keep Default empty - * Position: ```1078 x 451``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 40 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Hover border color: ```RGBA(255, 255, 255, 1)``` - * Focused border thickness: ```3``` - * Focused border color: ```RGBA(2, 69, 120, 1)``` - -13. Click the **+ Insert** button and select **Date picker**. Rename it to ```dpItemDueDate``` and then configure the following properties: - * Position: ```1078 x 450``` - * Size: ```270 x 35``` - * Padding: ```5 (top) x 5 (bottom) x 12 (left) x 5 (right)``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Font size: ``12`` - * Border thickness: ```0``` - * Fill: ```RGBA(0, 0, 0, 0)``` - * Focused border thickness: ```0``` - * Icon background: ```RGBA(0, 0, 0, 0)``` - -14. Click the **+ Insert** button and select **Button**. Rename it to ```btnSave``` and then configure the following properties: - * Text: ```Save``` - * Position: ```1078 x 710``` - * Size: ```100 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(0, 120, 212, 1)``` - * Border thickness: ```1``` - * Border radius: ```5``` - * Font: ```Segoe UI``` - * Font size: ``12`` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```ColorFade(RGBA(0, 120, 212, 1), 20%)``` - * Pressed color: ```RGBA(255, 255, 255, 1)``` - * Pressed fill: ```RGBA(0, 120, 212, 1)``` - * Focused border thickness: ```0``` - -15. Click the **+ Insert** button and select **Button**. Rename it to ```btnCancel``` and then configure the following properties: - * Text: ```Cancel``` - * Position: ```1196 x 710``` - * Size: ```100 x 40``` - * Color: ```RGBA(255, 255, 255, 1)``` - * Fill: ```RGBA(41, 41, 41, 1)``` - * Border color: ```RGBA(255, 255, 255, 1)``` - * Border thickness: ```1``` - * Border radius: ```5``` - * Font: ```Segoe UI``` - * Font size: ``12`` - * Hover color: ```RGBA(255, 255, 255, 1)``` - * Hover fill: ```ColorFade(RGBA(41, 41, 41, 1), 20%)``` - * Pressed color: ```RGBA(255, 255, 255, 1)``` - * Pressed fill: ```RGBA(41, 41, 41, 1)``` - * Focused border thickness: ```0``` - -16. Let's go ahead and **Save** our work. - -And there you go! The Canvas App UI is now complete. - -![Complete canvas app UI without data](/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-ui.png) - -Now it's time to use our Custom Connector Actions in the Canvas App. - -### Next: [Lab 6 - Adding data to a Power Apps Canvas App](/Workshops/PythonAndPowerApps/Lab6/) diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/canvas-app-dialog.png b/Workshops/PythonAndPowerApps/Lab5/assets/canvas-app-dialog.png deleted file mode 100644 index 248c99f..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/canvas-app-dialog.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-header.png b/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-header.png deleted file mode 100644 index f901549..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-header.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-ui.png b/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-ui.png deleted file mode 100644 index c6823c9..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/completed-app-ui.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-description-state-field.png b/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-description-state-field.png deleted file mode 100644 index 666fa3f..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-description-state-field.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-name-field.png b/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-name-field.png deleted file mode 100644 index 8c1f4ab..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/completed-form-name-field.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/completed-list-item-gallery.png b/Workshops/PythonAndPowerApps/Lab5/assets/completed-list-item-gallery.png deleted file mode 100644 index dc5081c..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/completed-list-item-gallery.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/completed-lists-gallery.png b/Workshops/PythonAndPowerApps/Lab5/assets/completed-lists-gallery.png deleted file mode 100644 index 8ad56c0..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/completed-lists-gallery.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/configure-with-properties-pane.png b/Workshops/PythonAndPowerApps/Lab5/assets/configure-with-properties-pane.png deleted file mode 100644 index 70e5284..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/configure-with-properties-pane.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/data-icon-power-apps.png b/Workshops/PythonAndPowerApps/Lab5/assets/data-icon-power-apps.png deleted file mode 100644 index d14e96a..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/data-icon-power-apps.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/list-gallery.png b/Workshops/PythonAndPowerApps/Lab5/assets/list-gallery.png deleted file mode 100644 index 7bc783e..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/list-gallery.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/list-items-gallery.png b/Workshops/PythonAndPowerApps/Lab5/assets/list-items-gallery.png deleted file mode 100644 index 31bf34e..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/list-items-gallery.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/properties-list.png b/Workshops/PythonAndPowerApps/Lab5/assets/properties-list.png deleted file mode 100644 index 85a18e1..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/properties-list.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png b/Workshops/PythonAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png deleted file mode 100644 index cd60085..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/rename-custom-connector-in-power-apps.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/screen-fill-property-value.png b/Workshops/PythonAndPowerApps/Lab5/assets/screen-fill-property-value.png deleted file mode 100644 index 317f35c..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/screen-fill-property-value.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab5/assets/tree-view-canvas-apps.png b/Workshops/PythonAndPowerApps/Lab5/assets/tree-view-canvas-apps.png deleted file mode 100644 index dcb7097..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab5/assets/tree-view-canvas-apps.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/README.md b/Workshops/PythonAndPowerApps/Lab6/README.md deleted file mode 100644 index 35b1847..0000000 --- a/Workshops/PythonAndPowerApps/Lab6/README.md +++ /dev/null @@ -1,363 +0,0 @@ -# Lab 6 - Adding data to a Power Apps Canvas App - -In this lab, you'll be finally connecting the Custom Connector you created in the previous labs to the Canvas App you've just built. - -Let's get a working app! - -1. Go to [make.powerapps.com](https://make.powerapps.com) and sign in with the administrator email and password that you created in Lab 0. - -Make sure that you're in the correct environment at the top right-hand side of the portal - it should be ```(Your name)'s Environment```. If not then click on the environment picker and change it to the correct one. - -2. Click on **Solutions** in the left hand menu. - -3. In the solution view, look for the ```Python + Power Workshop``` solution and then click on it's Display name. - -4. Look for the ```Python ToDo App``` canvas app and then click on it's Display name to open the app in the Power Apps Studio. - -## Configure OnStart - -1. In the *Tree View*, click on **App**. Then using the *Properties list* drop down, select **OnStart**. - -![Screenshot showing the App.OnStart property](/Workshops/PythonAndPowerApps/Lab6/assets/app-onstart.png) - -The **OnStart** property runs when the user starts the app. This property is often used to retrieve and cache data or set up global variables. - -2. Copy this [Power Fx](https://learn.microsoft.com/en-us/power-platform/power-fx/overview) formula into the *formula bar* for the *OnStart* property: - -``` -ClearCollect( - Lists, - PythonToDo.GetLists() -); -Set( - newListDefault, - "" -); -Reset(galLists); -Set( - currentList, - First(Lists) -); -ClearCollect( - currentListItems, - PythonToDo.GetListItems(currentList.id) -); -Set( - listItemFormVisibility, - false -); -``` - -3. Once you've added the above formula, let's initialise the OnStart process by hovering over the **App** object in the **Tree view** pane, selecting ellipsis (...), and then selecting **Run OnStart**. - -4. **Save** your work. - -## Configure the Lists Gallery - -1. Select the *galLists* gallery and then configure the following properties: - * Items: ```Lists``` - * Default: ```First(Lists)``` - -2. Select the *lblListName* control under *galLists* and then configure the following properties: - * Text: ```ThisItem.name``` - * OnSelect: - - ``` - Select(Parent); - Set( - currentList, - ThisItem - ); - ClearCollect( - currentListItems, - JavaToDo.GetListItems(currentList.id) - ); - Set( - listItemFormVisibility, - false - ) - ``` - -The *galLists* control should now be displaying the *Shopping* list that you created in an earlier lab. - -![Two lists on gallery in Power App](/Workshops/PythonAndPowerApps/Lab6/assets/list-data-on-gallery.png) - -3. **Save** your work. - -## Configure the New List functionality - -1. Select the *txtAddList* control and set the following properties: - * Default: ```newListDefault``` - * Reset: ```resetTxtAddList``` - -There will be an error after you've set the *Reset* property. No worries - it will be rectified in the next step. - -2. Select the *icoAddList* control and set the *OnSelect* property to: - -``` -PythonToDo.CreateList( - { - id: GUID(), - name: txtAddList.Text - } -); -ClearCollect( - Lists, - PythonToDo.GetLists() -); -UpdateContext({resetTxtAddList: !resetTxtAddList}); -UpdateContext({resetTxtAddList: !resetTxtAddList}); -``` - -3. Then go on to set the *icoAddList* control's *Icon* property to: - -``` -If( - txtAddList.Text = "", - Icon.ListScrollWatchlist, - Icon.Save -) -``` - -4. **Save** your work. - -Test out the New List functionality by previewing the app and typing "Test List" in the *txtAddList* control. Notice how the *icoAddList* control changed to a *Save* button as soon as you started typing? - -When you're done typing, click on the *Save* button, and a new list should be populated in the *galLists* gallery. Also, the text in the *txtAddList* control will be cleared. - -![New list added to Power App](/Workshops/PythonAndPowerApps/Lab6/assets/new-list-added.png) - -## Configure the *List Name* text label, List Items Gallery, amd the New List Item functionality - -1. Select the *lblCurrentList* control and set the *Text* property to ```currentList.name```. - -2. Select the *icoDeleteList* control and set the *OnSelect* property: - -``` -PythonToDo.DeleteList(currentList.id); -ClearCollect( - Lists, - PythonToDo.GetLists() -); -Reset(galLists); -Set( - currentList, - First(Lists) -); -ClearCollect( - currentListItems, - PythonToDo.GetListItems(currentList.id) -); -``` - -3. Select the *txtAddItem* control and set the *Reset* property to: ```resetTxtAddItem```. - -4. Select the *icoAddItem* control and set the *OnSelect* property to: - -``` -PythonToDo.CreateListItem( - currentList.id, - GUID(), - currentList.id, - txtAddItem.Text, - "todo" -); -ClearCollect( - currentListItems, - PythonToDo.GetListItems(currentList.id) -); -UpdateContext({resetTxtAddItem: !resetTxtAddItem}); -UpdateContext({resetTxtAddItem: !resetTxtAddItem}) -``` - -5. Select the *galListItems* gallery and then configure the following properties: - * Items: ```currentListItems``` - * Default: ```First(currentListItems)``` - -6. Select the *lblListItemName* control under *galListItems* and then configure the following properties: - * Text: ```ThisItem.name``` - * OnSelect: - - ``` - Select(Parent); - Set( - currentListItem, - ThisItem - ); - Set( - listItemFormVisibility, - true - ) - ``` - -7. Select the *cirCheckMark* control under *galListItems* and then configure the following properties: - * Fill: ```If(ThisItem.state="todo",RGBA(41,41,41,1),RGBA(0,0,0,0))``` - * OnSelect: - - ``` - Select(Parent); - Set( - currentListItem, - ThisItem - ); - Set( - listItemFormVisibility, - true - ) - ``` - -With these controls configured - you can now see existing List items and add additional ones. You can also delete lists. Go ahead and test it out. - -Click on the *Shopping* list and see the list items that you added way back in Lab 2: - -![Shopping list items](/Workshops/PythonAndPowerApps/Lab6/assets/shopping-list-items.png) - -Click on the *Test List* list and add the following items: -* Test1 -* Test2 -* Test3 - -You should now have all 3 of the above items in your *Test List* list. Weird names for list items, right? That's because you're going to test the delete list icon. - -Make sure that *Test List* list is selected, then click on the delete icon above the list items. Once you've done this, the *Test List* list and it's items will be deleted and disappear from the screen. - -## Configure the form for editing list item details. - -1. First we need to group all the controls that make up our "form" for editing list items. Press and hold the ```ctrl``` button on your keyboard and then select these 15 controls in your *Tree View*: - -![Form item names](/Workshops/PythonAndPowerApps/Lab6/assets/form-items.png) - -2. With all 15 controls selected, click **More Options (...)** on the first control and then select **Group**. - -![Group items action in Power Apps](/Workshops/PythonAndPowerApps/Lab6/assets/group-action.png) - -3. Rename ```Group1``` to ```UpdateListItemGroup``` - -4. Make sure that ```UpdateListItemGroup``` is selected and then change it's *Visible* property to ```listItemFormVisibility```. - -After changing the *Visible* property, the group might disappear from your app. To make it reappear, just select a list with list items and then select a list item. - -The idea here is that when you select a list item: this form should appear where you'll be able to update any of the list item's details. Let's get that set up right now. - -## Configure the the *UpdateListItemGroup* controls. - -1. Expand the *UpdateListItemGroup* and select the **lblCurrentItem** control and set the following properties: - * Text: ```txtItemName.Text``` - -This will make the **lblCurrentItem** control empty at the moment because the **txtItemName** control is also empty. This will be fixed in the following steps. - -2. Select the **icoDeleteItem** control and set the following properties: - * OnSelect: - - ``` - PythonToDo.DeleteListItem( - currentListItem.listId, - currentListItem.id - ); - ClearCollect( - Lists, - PythonToDo.GetLists() - ); - Reset(galLists); - Set( - currentList, - First(Lists) - ); - ClearCollect( - currentListItems, - PythonToDo.GetListItems(currentList.id) - ); - Set( - listItemFormVisibility, - false - ); - ``` - -3. Select the **txtItemName** control and set the following properties: - * Default: ```currentListItem.name``` - -4. Select the **txtItemDescription** control and set the following properties: - * Default: ```currentListItem.description``` - -5. Select the **ddItemState** control and set the following properties: - * Default: ```If(currentListItem.state = "done", "Done", "To Do")``` - -6. Select the **dpItemDueDate** control and set the following properties: - * DefaultDate: ```If(currentListItem.dueDate <> Blank(), currentListItem.dueDate, Blank())``` - -7. Select the **btnSave** control and set the following properties: - * OnSelect: - - ``` - PythonToDo.UpdateListItem( - currentListItem.listId, - currentListItem.id, - currentListItem.id, - currentListItem.listId, - txtItemName.Text, - If( - ddItemState.SelectedText.Value = "To Do", - "todo", - "done" - ), - { - description: txtItemDescription, - dueDate: Text( - DateTimeValue(dpItemDueDate.SelectedDate), - "yyyy-mm-ddThh:mm:ss.fffZ" - ) - } - ); - ClearCollect( - currentListItems, - PythonToDo.GetListItems(currentList.id) - ); - Set( - listItemFormVisibility, - false - ); - ``` - -8. Select the **btnCancel** control and set the following properties: - * OnSelect: - ``` - Set( - listItemFormVisibility, - false - ); - ``` - -9. **Save** your work. - -And now you're DONE! You've now built the full solution. Go ahead and test your app! Add lists, list items, delete them, edit them, and have fun with your Power App. - -![Completed Power App](/Workshops/PythonAndPowerApps/Lab6/assets/complete-power-app.png) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/app-onstart.png b/Workshops/PythonAndPowerApps/Lab6/assets/app-onstart.png deleted file mode 100644 index 445f1df..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/app-onstart.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/complete-power-app.png b/Workshops/PythonAndPowerApps/Lab6/assets/complete-power-app.png deleted file mode 100644 index e9fbb9a..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/complete-power-app.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/form-items.png b/Workshops/PythonAndPowerApps/Lab6/assets/form-items.png deleted file mode 100644 index a5e9956..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/form-items.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/group-action.png b/Workshops/PythonAndPowerApps/Lab6/assets/group-action.png deleted file mode 100644 index d736c66..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/group-action.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/list-data-on-gallery.png b/Workshops/PythonAndPowerApps/Lab6/assets/list-data-on-gallery.png deleted file mode 100644 index cd9ccf8..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/list-data-on-gallery.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/new-list-added.png b/Workshops/PythonAndPowerApps/Lab6/assets/new-list-added.png deleted file mode 100644 index b015635..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/new-list-added.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/Lab6/assets/shopping-list-items.png b/Workshops/PythonAndPowerApps/Lab6/assets/shopping-list-items.png deleted file mode 100644 index 5339f11..0000000 Binary files a/Workshops/PythonAndPowerApps/Lab6/assets/shopping-list-items.png and /dev/null differ diff --git a/Workshops/PythonAndPowerApps/README.md b/Workshops/PythonAndPowerApps/README.md deleted file mode 100644 index 55f655a..0000000 --- a/Workshops/PythonAndPowerApps/README.md +++ /dev/null @@ -1,42 +0,0 @@ -# Python + Power Apps Workshop - -Welcome to the Python and Power Apps workshop. In this workshop, you will learn how to integrate an OpenAPI backend built with Python, and a Power Apps frontend. - -![The complete ToDo Power App](/Workshops/PythonAndPowerApps/Lab0/assets/complete-power-app-with-more-items.png) - -## Agenda - -### πŸ§‘πŸ½β€πŸ’» Lab 0 - Setup your environment -This lab is all about setting up your environment. This is what you need to get started. Make sure to do this before starting the workshop. - -:link: [Lab 0 - Setup your environment](/Workshops/PythonAndPowerApps/Lab0/) - -### πŸ§‘πŸ½β€πŸ’» Lab 1 - Getting the Python API up and running in Azure -This lab will help you deploy the Python API to Azure using the Azure Developer CLI. - -:link: [Lab 1 - Getting the Python API up and running in Azure](/Workshops/PythonAndPowerApps/Lab1/) - -### πŸ§‘πŸ½β€πŸ’» Lab 2 - Adding data with the ToDo API -Now that you've got our API up and running in Azure, let's add some data so it's there, ready and waiting, for us to play with in Power Apps. - -:link: [Lab 2 - Adding data with the ToDo API](/Workshops/PythonAndPowerApps/Lab2/) - -### πŸ§‘πŸ½β€πŸ’» Lab 3 - Creating a Custom Connector -This lab will help you enable your Power App to interact with the API in the previous lab, by creating a Custom Connector. - -:link: [Lab 3 - Creating a Custom Connector](/Workshops/PythonAndPowerApps/Lab3/) - -### πŸ§‘πŸ½β€πŸ’» Lab 4 - Testing a Custom Connector -With the Custom Connector created, this lab will take you through the necessary steps to test it and to make sure that it's working appropriately. - -:link: [Lab 4 - Testing a Custom Connector](/Workshops/PythonAndPowerApps/Lab4/) - -### πŸ§‘πŸ½β€πŸ’» Lab 5 - Creating a Power Apps Canvas App -In this lab, you'll be creating the UI for a ToDo List Canvas App which will then be backed by the Custom Connector you created in Lab 3. - -:link: [Lab 5 - Creating a Power Apps Canvas App](/Workshops/PythonAndPowerApps/Lab5/) - -### πŸ§‘πŸ½β€πŸ’» Lab 6 - Adding data to a Power Apps Canvas App -In this lab, you'll be finally connecting the Custom Connector you created in the previous labs to the Canvas App you've just built. - -:link: [Lab 6 - Adding data to a Power Apps Canvas App](/Workshops/PythonAndPowerApps/Lab6/)