Connect Azure Bot with SharePoint using Direct Line Channel and SharePoint Framework

Here we will be using the SharePoint Framework to connect Azure Bot with SharePoint Site. In this post, we will use the existing Microsoft Bot Framework v4 React Web Part and deploy it on the local server.

Pre-requisites

Clone this GitHub repository from sp-dev-fx-webparts.
Install the latest version of Node.js LTS 10.x.

This version is the currently recommended and supported version of Node.js to use with the SharePoint Framework. At this time, Node.js v14.x is the Active LTS version listed on the Node.js homepage as the default download. To download Node.js v10.x, use the Node.js > Downloads > Previous Releases page.

Video

Set up your SharePoint Framework development environment

Use the Command Prompt/Node.js Command Prompt to install below dependencies.

Install Gulp

Enter the following command to install Gulp:

npm install gulp --global

Install Yeoman

Enter the following command to install Yeoman:

npm install yo --global

Install Yeoman SharePoint generator

To install the SharePoint Framework Yeoman generator globally, enter the following command:

npm install @microsoft/generator-sharepoint --global

Deploy the Bot Framework Web Part

Open the Command Prompt from the cloned project directory.

Installs the required dependencies by running npm install. This usually takes 1-3 minutes depending on your internet connection.

NPM may display warnings and error messages during the installation of dependencies while it runs the npm install command. You can safely ignore these log warnings & error messages.

NPM may display a message about running npm audit at the end of the process. Don’t run this command as it will upgrade packages and nested dependencies that may not have been tested by the SharePoint Framework.

Trusting the developer certificate is required. This is a one-time process and is only required when you run your first SharePoint Framework project on a new workstation. You don’t need to do this for every SharePoint Framework project.

The SharePoint Framework’s local webserver, used when testing your custom solutions from your development environment, uses HTTPS by default. This is implemented using a development self-signed SSL certificate. Self-signed SSL certificates are not trusted by your developer environment. You must first configure your development environment to trust the certificate. Use the below command to trust the developer certificate:

gulp trust-dev-cert

Now that we’ve installed the developer certificate, enter the following command in the console to build and preview your web part:

gulp serve

This command executes a series of gulp tasks to create and start a local webserver hosting the endpoints localhost:4321 and localhost:5432. It will then open your default browser and load the workbench preview web parts from your local dev environment.

The SharePoint Workbench is a developer design surface that enables you to quickly preview and test web parts without deploying them in SharePoint. SharePoint Workbench includes the client-side page and the client-side canvas in which you can add, delete, and test your web parts in development.

When you click on Add a new web part, you will see two web parts – BotFrameworkChat and BotFrameworkChatv4. The first one is v3 Bot framework. We will only use v4. Click on it.

You will see a Chat Window appearing with an error message saying Unable to Connect.

The reason this error message appears is because, we haven’t given the Direct Line Channel Secret Key. Click on the Edit Web Part.

On the right hand side, a property window is opened asking you to provide the Direct Line Secret. Also you see the various other properties which allows you to improve the appearance of your chat window

I hope you have your Bot ready and deployed in Azure. Watch below video to learn creating the Bot quickly to be used in this demo.

Get the Direct Line Secret

Go to your Web App Bot resource and click on Channels.

Click on Configure Direct Line Channel.

Copy any of the Secret Key and click on Done.

Come back to your SharePoint Workbench and enter the secret key in the properties window. Close the Property window and reload the web page. You will see the error message is not shown now. Type anything to start the conversation.