Conversation Bot Using Luis And QnA Maker With Azure Bot Framework SDKV4

Azure botframework SDKV4 can be used with LUIS models and QnA Maker knowledge bases. It helps to determine which LUIS model or QnA Maker knowledge base best matches the user input.

In this tutorial, you will learn the following.

1. Build SDKV4 Bot Framework Project 
2. Build Luis App
3. Build QnA Maker
4. Build and test your bot with Emulator.

Let's understand the information flow.

Azure Bot framework (SDKV4) interacts with waterfall dialog model. Waterfall dialog model has three basic parameters; i.e.:

1. Intro Step Async -> Used to initalize the luis configuration.
2. Act Step Async -> Used to gather all potiential information and process the request based on defined intent.
3. Final StepAsync -> Used to restart or call the mail dialog again. 

On Memebr Added Async is called as and when a member is added and is used to greet the members.

OnMessageActivityAsync is called for each user input received. This module finds the top scoring user intent and is used to process the request based on defined intent or QnA Maker.

Step 1 - Create a VS Project using BotFramework V4 (Echo Bot)

Select echo bot and click next to select the location and finsh. 

Step 2 - Visual Studio Project Strucutre

VS project strucutre looks like this,

Installing packages

Prior to running this app for the first time ensure that several NuGet packages are installed,

1. Microsoft.Bot.Builder
2. Microsoft.Bot.Builder.AI.Luis
3. Microsoft.Bot.Builder.AI.QnA

Step 3 - Create Luis Recognizer Class

Luis recognizer class implements IRecognizer interface. This method will help to recognize the intent and entity.

In LusRecognizer.cs, the information contained within configuration file appsettings.json is used to connect your bot to the Luis. The constructors use the values you provided to connect to these services. 

1. private readonly LuisRecognizer _recognizer;  
2.   
3.         public LusRecognizer(IConfiguration configuration)  
4.         {  
5.             var luisIsConfigured = !string.IsNullOrEmpty(configuration["LuisAppId"]) && !string.IsNullOrEmpty(configuration["LuisAPIKey"]) && !string.IsNullOrEmpty(configuration["LuisAPIHostName"]);  
6.             if (luisIsConfigured)  
7.             {  
8.                 var luisApplication = new LuisApplication(  
9.                     configuration["LuisAppId"],  
10.                     configuration["LuisAPIKey"],  
11.                     "https://" + configuration["LuisAPIHostName"]);  
12.   
13.                 var recognizerOptions = new LuisRecognizerOptionsV3(luisApplication)  
14.                 {  
15.                     PredictionOptions = new Microsoft.Bot.Builder.AI.LuisV3.LuisPredictionOptions  
16.                     {  
17.                         IncludeInstanceData = true,  
18.                     }  
19.                 };  
20.   
21.                 _recognizer = new LuisRecognizer(recognizerOptions);  
22.             }  
23.         }  

Step 4 - Create Main Dialog class

Main Dialog class implements the ComponentDialog. This class method will be responsible to define the waterfall model and is based on defined intent which helps to process the query.

Initalize the constructor

1. private readonly LusRecognizer _luisRecognizer;  
2.        public QnAMaker qnAMakerObject { get; private set; }  
3.   
4.               // Dependency injection uses this constructor to instantiate MainDialog  
5.        public MainDialog(LusRecognizer luisRecognizer, QnAMakerEndpoint endpoint)  
6.            : base(nameof(MainDialog))  
7.        {  
8.            _luisRecognizer = luisRecognizer;  
9.            qnAMakerObject = new QnAMaker(endpoint);  
10.   
11.            AddDialog(new TextPrompt(nameof(TextPrompt)));  
12.            AddDialog(new WaterfallDialog(nameof(WaterfallDialog), new WaterfallStep[]  
13.            {  
14.                  
15.                IntroStepAsync,  
16.                ActStepAsync,  
17.                FinalStepAsync,  
18.            }));  
19.   
20.            // The initial child Dialog to run.  
21.            InitialDialogId = nameof(WaterfallDialog);  
22.        }  

Initilaize the Intro Step Asyc Method -> It will help to intialize or create the Luis Object,

1. private async Task<DialogTurnResult> IntroStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)  
2.        {  
3.            if (!_luisRecognizer.IsConfigured)  
4.            {  
5.                //await stepContext.Context.SendActivityAsync( MessageFactory.Text("NOTE: LUIS is not configured. To enable all capabilities, add 'LuisAppId', 'LuisAPIKey' and 'LuisAPIHostName' to the appsettings.json file.", inputHint: InputHints.IgnoringInput), cancellationToken);  
6.   
7.                return await stepContext.NextAsync(null, cancellationToken);  
8.            }  
9.            
10.            return await stepContext.PromptAsync(nameof(TextPrompt), new PromptOptions { }, cancellationToken);  
11.        }  

Initilaize the Act Step Asyc Method -> It will help to gather all potienial information to process the request based on defined intent.

When the model produces a result, it indicates which service can most appropriately process the utterance. The code in this bot routes the request to the corresponding service, and then summarizes the response from the called service. Depending on the intent returned, this code uses the returned intent to route to the correct LUIS model or QnA service.

1. private async Task<DialogTurnResult> ActStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)  
2.         {  
3.             // Call LUIS and gather any potential booking details. (Note the TurnContext has the response to the prompt.)  
4.             var luisResult = await _luisRecognizer.RecognizeAsync<CognitiveModel>(stepContext.Context, cancellationToken);  
5.   
6.             switch (luisResult.TopIntent().intent)  
7.             {  
8.                 case CognitiveModel.Intent.LeaveRequest:  
9.                     //Do processing.  
10.                     await stepContext.Context.SendActivityAsync(MessageFactory.Text("Luis Intent Called i.e. Leave Request"), cancellationToken);  
11.                     break;  
12.   
13.                 default:  
14.                     var results = await qnAMakerObject.GetAnswersAsync(stepContext.Context);  
15.                     if (results.Length > 0)  
16.                     {  
17.                         var answer = results.First().Answer;  
18.                         await stepContext.Context.SendActivityAsync(MessageFactory.Text(answer), cancellationToken);  
19.                     }  
20.                     else  
21.                     {  
22.                         Activity reply = ((Activity)stepContext.Context.Activity).CreateReply();  
23.                         reply.Text = $"😢 **Sorry!!! I found nothing** \n\n Please try to rephrase your query.";  
24.                         await stepContext.Context.SendActivityAsync(reply);  
25.   
26.                     }  
27.                     break;  
28.             }  
29.   
30.             return await stepContext.NextAsync(null, cancellationToken);  
31.         }  

Initilaize the Final Step Asyc Method -> It will help to re-initiate the dialog,

1. private async Task<DialogTurnResult> FinalStepAsync(WaterfallStepContext stepContext, CancellationToken cancellationToken)  
2.        {  
3.            
4.            return await stepContext.ReplaceDialogAsync(InitialDialogId, null, cancellationToken);  
5.        }  

Step 5 - Manually update your appsettings.json file

Once all of your service apps are created, the information for each needs to be added into your 'appsettings.json' file.

For each of the entities shown below, add the values you recorded earlier in these instructions,

appsettings.json

1. "MicrosoftAppId": "",  
2. "MicrosoftAppPassword": "",  
3.   
4. "QnAKnowledgebaseId": "<knowledge-base-id>",  
5. "QnAEndpointKey": "<qna-maker-resource-key>",  
6. "QnAEndpointHostName": "<your-hostname>",  
7.   
8. "LuisAppId": "<app-id->",  
9. "LuisAPIKey": "<your-luis-endpoint-key>",  
10. "LuisAPIHostName": "<your--app-region>",  

Step 6 - Create Luis App

Log into the Luis web portal "https://www.luis.ai" Under the My apps section, select the create new app. The following Dialog Box will appear: 

Step 7 - Define Luis Model

1. Select the build button to define intent and entity
2. Select Intent
3. Enter phrases; i.e., "apply 2 days sick leave"
4. Select Entities
5. Add Pre-defined entitiy i.e. number , Date & time and custom entity i.e. Leave Type.
6. Train the Model
7. Publish the Model

Choose the 'production' environment and then select the Publish button.

Once your new LUIS app has been published, select the MANAGE Tab. From the 'Application Information' page, record the values Application ID as "app-id-for-app" and Display name as "name-of-app". From the 'Key and Endpoints' page, record the values Authoring Key as "your-luis-authoring-key" and Region as "your-region". These values will later be used within your 'appsetting.json' file.

Step 8 - Create QnA Maker knowledge base

The first step to setting up a QnA Maker knowledge base is to set up a QnA Maker service in Azure. To do that, follow the step-by-step instructions found here.

Once your QnA Maker Service has been created in Azure, you need to record the Cognitive Services Key 1 provided for your QnA Maker service. This will be used as <azure-qna-service-key1> when adding the QnA Maker app to your dispatch application.

Now sign in to the QnAMaker web portal. https://qnamaker.ai

1. Your Azure AD account.
2. Your Azure subscription name.
3. The name you created for your QnA Maker service. (If your Azure QnA service does not initially appear in this pull down list, try refreshing the page.)
4. Create QnA
5. Provide a name for your QnA Maker knowledge base. For this example use the name 'sample-qna'.
6. Select the option + Add File, navigate to the CognitiveModel folder of your sample code, and select the file 'QnAMaker.tsv'. There is an additional selection to add a Chit-chat personality to your knowledge base but our example does not include this option.
7. Create QnA
8. Select Create your knowledge base.
9. Once the knowledge base is created from your uploaded file, select Save and train and when finished, select the PUBLISH Tab and publish your app.
10. Once your QnA Maker app is published, select the SETTINGS Tab, and scroll down to 'Deployment details'. Record the following values from the Postman Sample HTTP request.

Step9 - Add Luis & QnaMaker Keys, ID and Endpoint to VS solution 

Service authoring keys

The authoring key is only used for creating and editing the models. You need an ID and key for each of the two LUIS apps and the QnA Maker app.

App	Location of information
LUIS App ID	In the LUIS portal, for each LUIS app, in the Manage section, select Keys and Endpoint settings to find the keys associated with each app. If you are following this tutorial, the endpoint key is the same key as the <your-luis-authoring-key>. The authoring key allows for 1000 endpoint hits then expires.
QnA Maker App ID	In the QnA Maker portal, for the knowledge base, in the Manage settings, use the key value shows in the Postman settings for the Authorization header, without the text of EndpointKey.

Update these values into Appsetting.json file.

Step 10 - Test your bot

1. Using your development environment, start the sample code. Note the localhost address shown in the address bar of the browser window opened by your App: "https://localhost:<Port_Number>".
2. Open your Bot Framework Emulator, then select Create a new bot configuration. A .bot file enables you to use the Inspector in the bot emulator to see the JSON returned from LUIS and QnA Maker.
3. In the New bot configuration dialog box, enter your bot name, and your endpoint URL, such as http://localhost:3978/api/messages. Save the file at the root of your bot sample code project.
4. Select the bot name in the My Bots list to access your running bot

Output

First,  the bot prompts with a greeting message.

Second, the user asks a query, the system defines the intent -> it goes to Luis and responds.

Third, the user asks a non-intent question -> it goes to qna maker and responds.

The previous article can be found from these links.

• Learn and Build Azure Bot With Bot Framework SDK V4
• Build QnAMaker Azure Bot with Bot Framework SDK V4
• Design Rich Card with Bot Framework SDK V4
• State Management with Bot Framework SDK V4
• Store Conversation to CosmosDB with Bot Framework SDK V4

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

Build Low Code and No-Code solution i.e. Search and Sort by Column Header

Introduction 

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps for an existing list in SharePoint Online.

Let's get started on how we can create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles

In this article, I am going to talk about the below points:

1. Configure Search
2. Configure Sort to column header

Previous article for reference:- (Build Low Code and No Code Solution)

Build Screen, Navigation and Connector

https://manojmittalblogs.blogspot.com/2020/03/build-low-code-and-no-code-solutions-ie.html

Build Home, View, Edit Screen with Navigation and Connector

https://manojmittalblogs.blogspot.com/2020/04/build-low-code-and-no-code-solutions-ie.html

Overview

In this article, I am going to walk through how to build a search and sort order.

Note

I have already explained the Login and Screen creation and navigation in a previous article. Refer to this for more information.

Let's get started with this article.

Step 1 - Login, Add Screen, Data Table and Connection with Datasource

1. Select New Screen.
2. A new screen will be added.
3. Select the data table to display the contents into list view.
4. Select the added data table and the middle section will appear blank.
5. Build Connection with SharePoint Online
6. Select the desired list name, which needs to display at the data source.
7. Data will start appearing in the selected data table:

Step 2 - Configure Search Box

The search box is not available out of the box, so we need to build it using control and formulas

1. Select Text Input from Text section
2. Expand the added text input box as per the desired length.
3. Select Icon to add search icon
4. Place the search icon within the text box to create a search box look and feel
5. Select the data table; i.e. datatable2
6. Select the Item's property and apply below formula
   
   1. Search(FlightDetails,TextInput2.Text,"Title"   

• FlightDetails is datasource name
• TextInput2.Text is a search box
• The title is a column name, on which column search is going to apply 

Step 3 - Run and Test Search

Press F5 to run the application and type the appropriate keyword in the search box. Since I have data in the title (flight name) column, and I entered 42, results start appearing.

Step 4 - Add SortIcon

To configure sort, we need to create a local variable; i.e. Column name and default value of sort order.

1. Select App
2. Select On Start Property of App
3. Select local variable; i.e. Title and Sort order toggle value.
   
   1. Set(_varSortBy, "Title"); Set(SortAscending, true);   
4. Select Icon and Select icon type Sort
5. Drag sort icon againt the flight name column 

Step 5 - Configure Sort Icon Property

1. Select icon8; i.e. filter icon
2. Set On Select property to update the sort order, switch value against title column
   
   1. UpdateContext({varSortPriority:"Title",SortDescending:!SortDescending})    

   
   

Step 6 - Merger Search and Sort Order

Search work on the item property on the data table, as well as sort work on the item property on the datatable.

1. Select your database
2. Set the items property with below formula
   
   1. SortByColumns(Search(FlightDetails,TextInput2.Text,"Title"),varSortPriority,If(SortDescending,Ascending,Descending))    

   
   

Step 7 - Save, Publish and Test

1. Save the application, click file -> Save.
2. Click save button to save the application
3. Click on the publish button to publish the application and make it available to your intended audience.
   
   Press F5 or click the published version of the app to run.

• Power Apps home screen will execute like this.

Type the appropriate text into the search box. Since I applied search on the title column, to test search, I wrote the keyword "42" and the result was filtered based on the search keywords.

To apply sort, click on sort icon into the flight name column and the result will toggle into ascending and descending order as per the defined formula.

I hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article!

Build Low-Code and No-Code Solutions i.e. Home , View, Edit Screen with Navigation With PowerApps

Introduction 

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps for an existing list in SharePoint Online.

Let's get started on how we can create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles.

1. Design Home Page Screen
2. Navigation among screen
3. Item List View Screen
4. Item Detail View Screen 
5. Item Detail Edit Screen

Previous article for reference:- https://manojmittalblogs.blogspot.com/2020/03/build-low-code-and-no-code-solutions-ie.html

Let's get started with next steps,

Step 1 - Add a Display screen with SPO list connection.

1. Select and click to add a new screen
2. Rename the screen "Flight Display Screen"
3. Select and click to add a display form.
4. FormViewer1 will appear in the tree view and a blank canvas without datasource connection.
5. Select the form view canvas and click "Connect to Data"
6. Select the data source from the Form View Property section.

Step 2 - Design Display screen 

1. Select DataSource as list name i.e. Flight Details.
2. Set the Column Layout (i.e. 2) and Layout as vertical.
3. Add a Label for the heading of the screen and change the text to "Flight Detail View Screen".
4. Add a Home icon from the Icons section to navigate to the home screen.
5. Add an Edit icon from the Icons section to navigate to the Edit Screen.
6. Add the Close icon from the Icons section to navigate to the previous screen. 

Step 3 - Add Navigation for Home Icon

Select the Home icon and write a function, i.e:

1. Navigate(HomeScreen)  

On a click of the home icon, it will navigate to the home screen.  

Step 4 - Add Navigation for Edit Icon

Select the Edit icon and it will write a function, i.e:

1. Navigate(FlightEditScreen)

On a click of the edit icon, it will navigate to the flight edit screen

Step 5 - Populate View Screen on Item Selection

1. Select FormView
2. Set the function for item property i.e. "DataTable1.Selected". This data table exists in the list view form. View get the selected item based on this property.
3. Once the item property is set, the selected item value appears in the view screen. 

Step 5 - Add and Populate Edit Screen on Item Selection

1. Select and click to add a new screen
2. Rename the new screen "Flight Edit Screen"
3. Add an Edit from the Form Section
4. Add a data source from Form Property section (i.e. List Name)
5. Select a Form and set the item property to "DataTable1.Selected.
6. As the item property is set, select the item value to start appearing in the Edit screen
7. 

Step 6 - Add a Save icon functionality on the Edit Screen

Select the save icon and write a function on On Select:

1. SubmitForm(Form1);Navigate(FlightListView);  

It will save the data to SharePoint Online List and redirect the user to the list view screen. The user will get an updated record on the list view screen.

Step 7 - Define navigation from List View Screen

Select the Flight List View screen, followed by DataTable1

Select the first column (i.e. Flight Name)

On Select property, write the below function to navigate to the Flight Display Screen

1. Navigate(FlightDisplayScreen)  

Step 8 - Save , Publish and Test

1. Save the application, click file -> Save.
2. Click save button to save the application
3. Click the Publish button to publish the application and make it available to other intended audiences.

Press F5 or click the published version of the app to run.

The power apps home screen will execute like this and select for the click first image.

I hope that you enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.