PowerBots – Creating smart apps with PowerApps and Microsoft Bots

As a regular power user, I frequently find myself referring to PowerApps, Flow, Power BI websites for the latest release information and documentation around the products. I would love to have this information handy in an app that I can query anytime instead of browsing through websites. In this blog post, I will walk you through the steps to create a simple bot app with PowerApps and the Microsoft QnA Maker. In future posts, we will look at other smart services to use with PowerApps.

 

There are three pieces to building the smart app:

1. Build the bot service: Create the QnA bot service that can answer questions
2. Create a custom API: A connection from PowerApps to the bot service to interface the questions and answers
3. Build the app: The app that can present and input information from the user

 

Let’s explore each of these steps in detail.

 

Build the bot service – QnA Maker

You can build a bot using one of the several ways outlined in https://dev.botframework.com. In this example, we will build a bot using the QnAMaker service.

• Navigate to https://qnamaker.ai/ and sign-up for an account
• Click on “Create new service”, enter a name for your QnA service
• Upload a file or point to a FAQ URL to train the bot. I created an Excel file with questions and answers as the starting point that I tweaked later. The content to the file was sourced from the PowerApps documentation site.
• Click Create

• Within a few seconds, you should see the Knowledge base screen with the question and answer pairs. Add a new pair, edit existing ones or add alternative phrasings to questions.

• Publish the knowledge base and note down the service details. The service details will be needed in the next step when we create a custom API for PowerApps.

 

Create the custom API to the Bot

PowerApps provides an easy way to create a custom API to any RESTful service using a UI wizard in the PowerApps portal. Let’s create a custom connector the Bot service.

• First, test the connection to the bot service using Postman. Save the result in a collection and export the content as a json file. Refer to the PowerApps documentation or the Postman documentation to for the detailed steps.
• From the PowerApps portal, choose Connections and Manage custom connectors. Click on Create custom connector
• In the General tab, under Custom connectors choose to upload the Postman collection saved earlier
• Edit the name of the Connector at the top of the page, upload an icon for the connector and click Continue
• In the Security tab, choose authentication as API Key. Enter Ocp-Apim-Subscription-Key as the parameter and label name. Click Continue
• In the Definition tab, edit the General Section to update the Summary, Description and OperationID if required.
• Edit the Request section and remove Ocp-Apim-Subscription-Key if it exists. This was already added in the previous step. Edit the Content-Type in the Request header and marked the Is Required as No.
• Edit the Response section by clicking the default. Click on Import from sample. Paste the response from the Postman query as below into the Body field.

• • You should now see answer and score added to the Body output

• Click on Create Connector. Once the connector has been created, choose the Test tab.
• In the Test tab, click on New Connection to create an instance of the connection. In the pop-up enter the subscription key information. Click Create
• Go back to Manage custom connectors and click Edit on the connector you created earlier. We can now test this custom connection. Navigate to the Test tab and under Operations enter a query string. You should see a response from the QnAMaker service.

Now we have the custom API to the bot service ready and we can use it to build our app. You can download the swagger definition of the custom API for reference. Replace the paths with your URL below.

 

Creating the app

Let’s create a mobile app that can query the custom API. We will use a Gallery to display the query and results from the interactions.

• Launch PowerApps Studio on web or on Windows. Make sure the Studio is connected to the same environment where the custom connection has been deployed earlier.
• Create a new Blank app – Phone layout
• From the ribbon menu choose View > Data sources. In the right panel choose Add data source
• Choose the PowerApps Bot connection created earlier
• Now let’s bind the content of the QnA to a collection. Create a Collection chat to hold the conversation. Use an id field to indicate whether the content is from the user or the bot. Set the OnStart in the first screen to the following expression

• Add a Vertical Gallery from Insert option in ribbon menu. Set the Items property of the Gallery to chat. Set the Title to name field in the Collection and the Subtitle to text field. The Gallery will hold the chat conversations.

• From the File > Media option, upload an image for the bot using the Browse option
• Map the Gallery image to show either the bot or the image of the user using the following expression:

• Use the same logic to set the X position of the image. The images need to be on the extreme left or right, in my example, I set X of the image 0 and 500

• For Text controls, set the Align property to Left or Right depending on whether the content is from the bot or the user. To adjust the length of the text fields use the same condition to adjust the Width and the X properties of the text controls.

• Add a Text Input and Button below the Gallery. Set the Button OnSelect to submit information to the bot service and update the Collection

 

Test the app

Here is how the final app looks like. Publish the app once your changes are done and share the app.

 

Additional explorations

Here are a few explorations that can added to the above walkthrough:

• Adding a callout to the Gallery chat text to make it look more conversational.
• Scrolling the Gallery content to the top after the page is full
• Increase the knowledgebase of the bot with information from Power BI and Microsoft Flow

 

Summary

Hopefully this walkthrough gives you the tools to write your own bot using PowerApps. Do let us know your feedback and any interesting bots you are building.

Thanks for reading and enjoy building your apps!

-Karthik