Build a community website with Power Pages

[Someleze_Diko]

A picture showing blog banner

To better manage communities or student clubs, resources and community sites must be useful and offer opportunities for community members to provide feedback about the community, get assistance when needed and gain access to information. To help a community grow the feedback gathered must be analyzed to make important decisions about the community and AI tools must be added to enhance the experience for community members through a bot that is available 24/7. 

Microsoft Power Pages Microsoft Power Pages is a secure, enterprise-grade, low-code software as a service (SaaS) platform for creating, hosting, and administering modern external-facing business websites. Whether you're a low-code maker or a professional developer, Power Pages enables you to rapidly design, configure, and publish websites that seamlessly work across web browsers and devices. But, can I build a student club or community site with Power Pages? Yes!

Objectives

• Build a website using Power Pages and customize it.
• Add a Power Virtual Agents bot to the site
• Add a Microsoft Dataverse form for feedback and showcase community calls
• Use Power Automate to analyze the sentiment on the Feedback

Build a website using Power Pages and customize it

Build a site 

1. Sign in or sign up on Power Pages
2. Select the Microsoft Dataverse environment in which you want to create a site in.
   A picture showing how to choose an environment to create a Power Page site in
   Note: It is not recommended to create a site in the default environment as it is shared across all the users in the tenant and has a risk of sharing data with unintentional users.
3. On the home page, select Create a site.
   A picture showing how to create a site on Power Pages
4. Select Default design template, and then select Select template.
   A picture showing the default template site on Power Pages
   Note: The default site is generic and can be modified for various business scenarios. You can also choose a business-need template that best matches your specific scenario.
5. Validate the default site name and web address that have been created, and then select Done.
   A picture showing how to provision a site on Power Pages
   Note: It might take a few moments for your new site to be provisioned. You'll be able to modify the name and web address later.

6. After the site is created, you can begin to edit or preview your site.
   A picture showing how to manage a site on Power Pages

Add a Power Virtual Agents bot

First, we need to Build a community bot with Power Virtual Agents.

1. Go to Microsoft Power Virtual Agents and sign in into your account or signup for a free trial
   A picture showing getting started with Power Virtual Agents
2. Click on the bots panel icon on the top right corner of the screen (see screenshot below) and choose the Environment you want to host your bot and click on the + New bot button.
   A picture showing the bots panel
3. Choose a name for your bot and choose the language for your bot then click on Create (we chose the environment on the previous step).
   A picture showing bot details
4. Once your bot is created, click on Topics which is on the left-hand side of the screen.
5. On the Topic pages, click on a topic that you want to update or click on + New topic create a new one. More information on Creating Topics on Power Virtual Agents
   A picture showing bot topics
6. Once the Topic has been created add a minimum of 5 Trigger Phrases that will kick-off the conversation between the user and the bot
   A picture showing bot Trigger phrases
7. After adding the Trigger Phrases click on the + Add Node and choose Ask a Question
8. Once the node is added you can type in the question you want to ask the user. On Identify choose Multiple Choice Options this will ask the user a question and present an option set of answers the user can choose from. This will be related to information about the community or student club.
   A picture showing a multiple choice question
9. After the above steps, conditions will be added as next steps in the conversation to cater for each selected option. After all the conditions are added (which is done automatically) click on + Add Node and choose Show a message. This is where the bot will provide a response back to the user for their question on the selected options so add a meaningful message/response to the appropriate question.
10. After adding the Message/Response click on + Add Node and choose End Conversation then choose End with Survey.
    A picture showing how to end a conversation with the bot
    Note: If you have multiple message nodes and you want to end the conversation there, you can drag the end of the message node to the End Conversation node
    
11. We need to save the bot, click on Save Icon on the top right corner of your screen right beneath your profile.
12. On the left-hand side of the screen click on Publish and then click on the button Publish. This will publish the app for your users to use it.
    A picture showing how to publish a bot in Power Virtual Agents

Now let’s add our bot to our site in Power Pages

13. On Power Virtual Agents, click on Manage and the choose Custom Website. This will allow us to share the bot on a designated website.
    A picture showing how to manage a bot for different channels in Power Virtual Agents
14. On the src part of the code, copy the link presented to you and paste it on a notepad – we will use later.
    A picture showing how to share a bot to channels
15. Go back to your Power Pages site and click on edit
    A picture showing how to launch the Design Studio on Power Pages
    
16. On the Pages workspace, click on + Page to add a new page that users/community members will use to get help from the bot.
    A picture showing the Pages workspace in Power Pages
17. Choose the Start from Blank layout and provide a meaningful name for the page the click on Add.
    A picture showing how to add a page to a site in Power Pages
    
18. Once the page is successfully added, we are presented with few components to choose from that we can add. Choose iFrame since we want to link our page with our Bot.
    A picture showing available components on Power Pages
19. Once the iFrame has been added you will need to provide a URL. On the URL textbox paste the URL we copied from Power Virtual Agents for our bot on Step 14 then click on OK.
    A picture showing how to embed a bot on Power Pages
    
20. On the top right corner of the screen (on Power Pages) click on Sync to save the above changes to your website.

Add a Dataverse form for feedback and community calls

When building a website on Power Pages you will have some tables automatically linked to your site. For example, the one we will use here is the Feedback table.

1. On the new page you have added, click on the + sign to add a new section for the list and choose 1 Column. You can choose to add the list to a different page based on your requirements.
   A picture showing how to add a section in Power Pages
2. Click on List to add a list that will display a list of Community Calls.
   A picture showing available section components
3. You will be Required to choose a table (You can search for standard tables that exist in Dataverse or a custom table you created), select Dataverse views (you can choose views that exist for the selected table in Dataverse)
   A picture showing List details from the Appointment Dataverse table
4. Click on the newly added list component and click on Edit Views then click on the name of the view. This will allow you to customize the view based on your needs by controlling which columns are visible to the user.
   A picture showing List view option
5. You will be redirected to the editing canvas for the view and click on the column then select Remove. Once done, you can click on Save then click on Publish view. This will publish the new changes to your view.
   A picture showing how to edit the All Appointments List view
6. Once done, click on Back, you will see a preview of columns that will be displayed to the user.
7. Click on the list again then select Permissions. Here you will set permissions on which users have access to view the list of community calls.
   A picture showing the Permissions option on the List view
8. On the dialog box that opens, click on + New Permission.
   A picture showing no table permissions set yet
9. Add the name of the permission, select the table you are setting the permissions for (Appointment Table), choose Global Access for Access Type, choose Read on Permission To (since community members will only see the schedule of events and not change it) then on Roles click + Add Roles and select Anonymous Users and Authenticated Users then click on Save. This will allow community members and non-community members to see what community calls will occur.
   A picture showing how to add table permissions for the Appointments Dataverse table
10. Click on the + sign and click on Form to add a feedback form for the community.
    A picture showing available section components
11. Click on + New Form
    A picture showing the Add a form dialog box
    
12. Choose a table by searching for the Feedback table, on Select a form choose Feedback then click on OK.
    A picture showing form details for the Feedback Dataverse table
    
13. Click on the newly added form and click on Edit Fields to customize the feedback form.
    A picture showing the newly added Feedback form
14. Click on the fields that you want to remove then click on Delete. If you want to add a new field on the form, you can click on + Add Field. Then click on Save and then click on Publish View for the changes to reflect for the community members.
    A picture showing how to edit the Feedback form
15. Click on Back to see a preview of columns that will be displayed to the users.
16. Now click on the feedback form again, then click on Permissions
    A picture showing the edited Feedback form
    
17. On the dialog box, click on Feedback so that we can edit the already existing permissions on for the Feedback table.
    A picture showing existing table permissions for the Feedback Dataverse table
18. You will see that the permissions have been set, you can add additional permissions for the users which will be Read and Write since Create has been already added. This will allow users/community members to capture their feedback about the community or site, click on Save.
    A picture showing how to update existing table permissions on the Feedback Dataverse table
    
19. Now that the page has been set up to allow community users to use the Power Virtual Agent for assistance, see upcoming community calls and capture feedback, you can click on Sync on the top right-corner of the screen

Use Power Automate to analyze the sentiment on the Feedback

1. Sign into Power Automate
2. Click on Create and then choose Automated Cloud Flow, this will help analyze new feedback each time it is submitted on the Power Pages site.
   A picture showing Power Automate flow creation options
3. Enter a Flow Name for your Power Automate flow then search for Dataverse on Choose your flow’s trigger. Select When a row is added, modified or deleted as your trigger then click on Create.
   A picture showing how to create a Power Automate flow
4. On the trigger choose Added (because we want community members to just submit their feedback and not change it) as Change Type, choose Feedback (one of the tables used in the Power Pages site for feedback) for Table name and choose Organization for Scope
   A picture showing Power Automate flow trigger
   
5. Click on + New step then search for AI Builder and choose Analyze positive or negative sentiment in text.
   A picture showing how to add AI Builder on the Power Automate flow
   
6. Choose a language of your chose for the text to analyze and choose Comments in the dynamic content as the Text to analyze.
   A picture showing AI Builder sentiment analysis model in Power Automate flow
7. Click on + New step and search for Office 365 Outlook then choose Send an email (V2)
   A picture showing how to add Office 365 actions in Power Automate flow
   
8. Add the To email, provide a Subject for your email and a Body. For the body of the email provide the text (feedback from the user) by using the Comments dynamic content from the trigger and provide the sentiment of the text by using/choosing the Overall text sentiment dynamic content. Or you can choose Sentence sentiment dynamic content which will analyze each sentence on the provided text.
   A picture showing the Send an Email (V2) action in Power Automate flow
9. Once done, click on Save then run your Power Page website and test your bot and capture some feedback on the Feedback form to run your Power Automate flow.

Congratulations! You successfully built a website with Power Pages and added additional features using Power Virtual Agents, Power Automate and Dataverse! So what’s Next?

Call to Action

• Build your own website using Power Pages (based on your requirements/scenario)
• Share your solution and experience with me by @mentioning me on twitter @DikoSomeleze either on a post or direct message (twitter).
• Complete the Microsoft Power Platform Fundamentals and get certified if you haven’t already.