NZ Business Applications Summit 2024: Build a Vet practice portal with Power Pages and Copilot

Setup

​​​​1. Register for the lab and receive your credentials at https://www.power-labs.org/access/. Use the "Event code" provided by the lab facilitator. Make sure you are familiar with the Terms of Use and Privacy Policy of PowerLabs.
2. Log in to https://make.powerpages.microsoft.com/ using the credentials received in email. These credentials will last 10 days.
3. Make sure that the environment selected is as the login you received (e.g. "Black Tulip"). It should NOT be "PowerLabs (default)"

Create Power Pages website

​1. Go to https://make.powerpages.microsoft.com/ and select "Start from blank" to create a new Power Pages website.
   a. Enter a name of your choice or "Vet Practice Site"
   b. Leave the "Create a web address" and "Site language" by default.

Create Home page (AI)

​1. After the site is created and Power Pages Studio is open, in the "Pages" section on the "Home" page selected:
   a. In the top right corner click on the Co-pilot icon to open the Co-pilot panel chat, if it's not open yet. 
   b. Type the prompt: "Create a vet clinic Welcome section".
   c. In the Review the section popup click on the Keep it button if you are satisfied with the result or on the Delete icon if you want to regenerate the section.
   d. Use the chat prompts to get the desirable result.
   e. To delete the original section at the top, select the section first then from the top blue menu click on "…" then Delete.
   f. Add another section to list the contact information. The example prompt: "Create a contact vet clinic section under the Welcome section".
   g. Continue with prompts or manually modify the section until you like the result.
2. In the top right corner click on the Preview icon to preview the Home page.

Change a website theme (AI)

1. In the Co-pilot chat type "Change the theme to use #0066ff and #009999 brand colours"
2. Use your own colours. You can say "Blue and Green" instead of using the actual hex colours.
3. In the chat verify the theme meets your expectations then click on Apply theme or Try again.
4. In the top right corner click on the Preview icon to preview.

Add a pet adoption page (AI)

1. In the Co-pilot chat type "Create a new pet adoption page"
2. In the Review the section popup click on the Keep it button if you are satisfied with the result or on the Delete icon if you want to regenerate the page.
3. In the top right corner click on the Preview icon to preview.

Add "My pets" page and login

1. In the Power Pages Studio, in the "Pages" section click "+ Page" to add a new page:
   a. Name: "My pets"
   b. Standard layouts: "Start from blank"
   c. Click "Add" to add the page.
2. On the submenu of the page, select "Page settings" to set permissions for accessing the page:
   a. On the Permissions tab of the window select "I want to choose who can see this page" and select "Authenticated users"
   b. Click "OK" to save
3. Add a text section with text "My pets" and "Heading 1" style. This is the heading for the page.
4. Click Preview and see that you are directed to login page instead, as expected.
5. Select "Microsoft Entra ID" as the login method and when/if a window pops up asking for permissions, allow sharing.
6. You may land on the "Profile" page. Select "My pets" from the top navigation. The page is empty as we don’t have data yet!
7. (Optional) Log out as a website user and see that the page "My pets" is not visible anymore. Log back in to continue with the next step.

Explore the Vet Practice Power App and create records

​1. In a new browser tab, go to https://make.powerapps.com/
2. Go to the "Apps" section on left and find the "Vet CRM" app. In the vertical 3-dots menu select "Play" to launch the app.
3. Add 2 new Pets of your choice, e.g. a fish and a cat. Give them a name, select a date of birth and set the "Customer" to the name of your user, e.g. "Black Tulip". Don’t forget to click "Save" 

Add Pets list to My pets page

​1. Go back to the tab with the Power Pages Studio and select "My pets" page in the menu.
2. Under the "My pets" text line find the "+" sign to add a "List" component.
3. Select "+ New List" and set:
   a. Choose a table: "Pet Animals"
   b. Select the data views: "Active Pet Animals"
4. When added to the page, see the "+ New Permission" message and click on it to set the Table permissions:
   a. Name: "Active Pet Animals"
   b. Table: "Pet Animals"
   c. Access type: "Global Access"
   d. Permission to: Read, Append, Append to.
   e. Add roles - select "Authenticated Users" web role
   f. Click "Save"
5. Preview the page and see the list of pet animals you created earlier!

Add "Book an appointment" page

​1. In the Power Pages Studio, Pages section, add a new page "Book an appointment"
2. For the new page set permissions in Page Settings to "Authenticated Users" only.
3. On the page layout, add a text section with text "New appointment" and "Heading 1" style. This is the heading for the page.
4. Add a "Form" component to the page, select "New form":
   a. Choose a table : "Vet Appointments"
   b. Select a form: "Information"
   c. On the Data section select "Creates a new record"
   d. On the CAPTCHA section unselect both Captcha options
   e. Save the new form.
5. In the "Security" section of the Design Studio, select "Table Permissions" and add a new permission:
   a. Name: "Vet Appointments"
   b. Table: "Vet Appointments"
   c. Access type: "Global Access"
   d. Permission to: Read, Create, Delete, Append, Append to.
   e. Add roles - select "Authenticated Users" web role
   f. Click "Save"
6. (Optional) Add a button element on the Home page with title "Make an appointment" and set it to navigate to the page "Make an appointment"

Add "My appointments" page

​1. In the Power Pages Studio, Pages section, add a new page "My appointments"
2. For the new page set permissions in Page Settings to "Authenticated Users"
3. On the page layout, add a text section with text "My appointments" and "Heading 1" style.
4. Add a "List" component and set it's properties:
   a. Table name: "Vet Appointments"
   b. Data view "Active Vet Appointments"
   c. On the "Actions" table select "Create a new record" and set:
       i. Target type: "Form"
       ii. Form: "Vet Appointments" (or how was named on the steps above).
       iii. Display label: "New appointment"
5. Preview the page, create a new Appointment and check the appointment added appears on the page.
6. If you left the option "AI Summary for list" on you will also see a section "Summarized by AI".

Record level security

​1. Go to the Power App and add another Contact (e.g. "Cruella de Vil")
2. Add another Pet who belongs to that owner, e.g. a dog named "Pongo" and select the Customer as "Cruella de Vil"
3. Go back to the Portal and see that you can see Pongo in the list of the Pets. Hm, this is not your dog, you should not see it! Let's fix it.
4. Go to the "Security" section of the Power Pages Studio and edit the existing Table Permission for "Pet Animals":
   a. Access Type: Contact
   b. Relationship: "pwl_petanimals_Customer_contact"
   c. Leave the rest unchanged and save it.
5. (Optional) Create a Child permission to show appointments for the pet the customer owns. Click "Add a child permission" on the "Active Pet Animals" and set:
   a. Name: "Pet Appointments"
   b. Table: "Vet Appointments"
   c. Relationship: select the one is there
   d. Permission to: Read, Create, Delete, Append, Append to.
   e. Add roles - select "Authenticated Users" web role
   f. Click "Save"
   g. Deactivate previously created "Vet appointments" table permission.
6. Go to the "My pets" page, reload it and see that there is no longer "Pongo" there.

(Optional) Manage Pets from the portal

As additional exercise you may want to implement the capability to add, delete and edit pets information from the portal for a logged in user. You should know by now how to do it, but in a nutshell:
  • Add new forms for adding a new and editing and existing pet information.
  • Add Actions to the pets list pointing the these forms.
  • Don’t forget to update the permissions to create, update and delete in the My pets permissions record!

(Optional) Set up gen AI search

​1. Go to the "Set up" workspace.
2. Under Copilot section select Site search (preview).
3. Turn on Enable Site search with generative AI (preview).
4. Click on Preview.
5. On the website click on a Search icon.
6. Type "book appointment".
7. In the Summarized by AI box click on References to expand.
8. Click on any of the links listed to get to the booking page.

(Optional) Set up a co-pilot

​Prerequisites
Before you can use AI-powered copilot features in Power Pages, the following conditions must be met:
- Your tenant administrator must turn on the Publish Copilots with AI features setting in the Power Platform admin center.
- Copilot uses Copilot Studio generative answers. Learn more about quotas and limits in Quotas, limits, app registration, certificates, and configuration values for Copilot Studio 

Steps
1. In Power Pages, go to the Set up workspace.
2. Under Copilot, select Add copilot.
3. Turn on the Create copilot option. Power Pages creates a copilot with generative answers conversation for you in Copilot Studio.
4. To make the copilot available to visitors and users, turn on the Enable copilot on site option. The Enable copilot on site option is available only if your tenant admin turned on the Publish Copilots with AI features setting.