Integrate QnAMaker with Dynamics 365 through PowerApps

2018 was a fascinating year for Dynamics 365 with the introduction of Power Platform. Power Platform (Power Apps, Power BI and Microsoft Flow) connects to a variety of data sources and this gives huge extension points to Dynamics 365 because of the way it is tied to the Power Platform itself. In this blog post, I aim to show a scenario that integrates Dynamics 365 application with a Power App and demonstrate how this opens all sorts of possibilities with Dynamics 365.

In my previous posts, I explained what the QnAMaker Cognitive Service is and how can we put the service to build a simple yet powerful bot that answers users’ natural language questions by matching it with the best possible answer from the KB article configured in the QnAMaker.

As a summary, here is what happens when the user interacts with the bot:

  • User asks a question to the Bot in the natural language.
  • Bot calls the QnAMaker service’s API and passes on the question.
  • QnaMaker has a built in Natural Language Processing engine that matches the question with the best possible answer in the Knowledge Base and returns the best answer back to the Bot.
  • Bot responds the answer back to the user.

Note that the Bot is just a facilitator to the entire process. QnAMaker Cognitive Service does the heavy lifting of finding the best possible answer for the question that the user asked.

This means, the Bot is really not a mandatory middle person here. We want someone to call the QnAMaker service API on behalf of the user as the user will not know how to call the QnaMaker’s API themselves and that someone happened to be our bot thus far.

Now, in this post, let’s see how we can use the PowerApp to call the same QnAMaker Cognitive Service API and respond back to the user.

If you do not know what PowerApps is, review this link to learn more.

PowerApps is a suite of apps, services, connectors and data platform that provides a rapid application development environment to build custom apps for your business needs. Using PowerApps, you can quickly build custom business apps that connect to your business data stored either in the underlying data platform (Common Data Service for Apps) or in various online and on-premises data sources (SharePoint, Excel, Office 365, Dynamics 365, SQL Server, and so on).

Here is a scenario: Imagine your customer service agents are using Dynamics 365 to manage service requests. Let’s say a customer calls wanting to know if there is any fee for additional garbage cart. Wouldn’t it be nice if the agent can query the knowledge base using natural language and find the answer and respond back to the customer rapidly without ever leaving the Dynamics 365?

Let’s see how we can achieve this scenario in this post and here is an outline of what we are going to do:

  • We need Dynamics 365 so as to manage service requests and serve customers.
  • We require QnAMaker configured with the Knowledge Base with the list of questions and answers. You should be familiar with how to setup KB using QnAMaker if you review my previous posts.
  • We need PowerApps platform to build a quick little app that the customer service agents will interface to ask question and the powerApps will inturn call the QnAMaker API and get the response back from the QnAMaker and finally passes down the answer to the agent.
  • Finally, embed the above app built using the PowerApp platform within the Dynamics 365. In other words, we are embedding the canvas app (our app to get the response from QnAMaker KB) in the model-driven app (Dynamics 365 application).

We already have a KB setup using the QnAMaker cognitive service trained and published and is ready to serve (as part of my previous blog posts).

Login to PowerApps by navigating to https://web.powerapps.com and click on Create and Canvas app from blank“.

Firstly, we need to connect to a data source. In our case, the data source is “QnAMaker”. Click on Connect to data

Click on New Connection

Choose QnA Maker from the Connections list

Add your API Key here and click on Create. The API Key is nothing but the Endpoint Key that can be found in your QnAMaker -> Settings page.

We are now done with the QnAMaker Data Source connection. Let’s move on to building our app.

Insert a Text Input, Label and a button as shown below.

Click on the Label and name the Text property Answer.

So, we have a Text Input control for the user to ask their question and a Label to see the answer as soon as they click on the Submit button.

Now, we need additional formula on the “Submit” button click so as to query the QnAMaker’s API to get the relevant response. For this purpose, we will be using QnAMaker GenerateAnswer API which takes KnowledgeBaseId, ServiceHost, EndpointKey, Question as parameters.

You can find all the above information on your QnAMaker Settings as shown below.

Click on the Button and set the OnSelect event with the formula:

Set(Answer,First(QnAMaker.GenerateAnswer(“2c2cc557-9244-4dd3a3-bbef-246bb9388be6″,”https://faqportal.azurewebsites.net/qnamaker”,”EndpointKey 907cd0ee-184d-4a41-affe-4f76ddea600329″, txtQuestion.Text).answers).answer)

This sets the result of the GenerateAnswer to the Answer which is our Label’s text property.

Click on the Play button (highlighted in yellow below) on the top right corner to see the PowerApp that we created in action.

Awesome. We have our app working with the QnAMaker now.

As a next step, we need to Save and Publish this PowerApp.

Click on See all versions button (shown in the above screenshot).

click on Details tab and copy the GUID as shown in the screenshot below. This is the ID of this PowerApp and we will need this to configure in Dynamics 365.

The idea is that we would like to embed the PowerApp that we created above within the Dynamics 365 because that’s where our customer service agents live and breath. Let’s login to the Dynamics 365 and create a new CRM Form for the Case Entity and name it Power Case.

Add a new section and drag the “Case Title” field in it.

Double click the Case Title field and navigate to the Control tab.

Click on Add Control link and choose Canvas app.

Ensure that Web option is checked.

Click on the Edit button against the App ID.

Paste the PowerApp’s AppId copied earlier and click OK.

Save and Publish the CRM form.

Important Note: This embedding technique will only work in the Unified Interface. Ensure that you are opening the Power Case form in the Unified Interface to test it out.

One can imagine how powerful this technique is and how many doors this opens up for Dynamics 365.

Enjoy!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s