This article will review the steps to build a SharePoint Framework (SpFx) custom web part with DirectLine integration. With this application extension, your users can interface with your Bot directly in SharePoint. Since it is built on Azure Bot Channels and DirectLine, it can be easily connected with AtBot.
“AtBot is a bot-as-a-service platform that allows you to build complex chatbots without writing any code. AtBot provides answers to everyday questions and can automate business processes easily”
You will need some background with Office 365, Azure and the SharePoint Framework. If you are new to this I recommend following tutorial documentation for SpFx before getting started.
Some actions in this article will require administrative privileges to Office 365 and Azure. If you’re like me you may not have administrative access to your company’s Office 365/Azure subscriptions. The good news is, you can get free trials for everything:
To build and deploy SpFx webparts requires some development environment set up. These steps are reviewed in detail at https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant.
Make sure to follow steps for Setting up your Office 365 Tenant and Set up your Development Environment. If you are new to SpFx it wouldn’t be a bad idea to run through the tutorial to build your first hello world web part.
This jumpstart worksheet is what I used to get familiar with the basics. Office 365 and Azure Subscription administrative access is a prerequisite. The jumpstart worksheet contains information on how to start a free trial with AtBot.
Follow these steps to start debugging right away. Read further for additional guidance.
This article assumes you have followed the prerequisite steps above already including having administrative access to Office 365, Azure and SharePoint Online.
In order for the SpFx app to communicate with Azure, a Direct Line Channel must be created through Azure.
Navigate to your Bot Channel Registration blade in azure and select “Channels” from the menu. Select Direct Line Channel under “add a featured channel”
Clone the source code for the SpFx DirectLine App and install NPM dependencies. If you are having trouble here please read through the guidance from Microsoft on how to set up your development environment for SpFx: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant
To debug the application extension, execute the gulp command to host a local web server:
Important Replace the DirectLineSecret setting in the query string with the secret you copied from Azure in the DirectLine Channel step above. The title should also be replaced with a the Bot title (although this is cosmetic and the bot should still load).
A prerequisite for deployment is to have an App Catalog site collection for SharePoint. Detailed guidance to create an app catalog is published by Microsoft here: https://docs.microsoft.com/en-us/sharepoint/use-app-catalog?redirectSourcePath=%252fen-us%252farticle%252fuse-the-app-catalog-to-make-custom-business-apps-available-for-your-sharepoint-online-environment-0b6ab336-8b83-423f-a06b-bcc52861cba0
Navigate to ./sharepoint/assets/elements.xml and update this file with your bot’s name and DirectLine Secret (copied above).
To install the DirectLine Bot Extension to your SharePoint environment, first package the solution:
Once the app has been deployed to the SharePoint App Catalog, it is ready to be deployed to a site collection.
Navigate to Site Contents and click on “New” -> “App”. The App Should now appear for selection in the next window.
The SharePoint Framework enables an organization to add customizations to SharePoint online through modern client-side development platforms. For Bots, SpFx gives full control over the user experience such as look and feel, or where/how the Bot should appear. Using AtBot makes Bot development easier by offering a no-code approach and integrations with Azure services like QnA Maker and Microsoft Flow.
For questions about this article or other SpFx/Azure/Bot/AI topics please don’t hesitate to reach out to me or one of my colleagues at Withum.