SPFx Chat Bot - using SharePoint Framework Extension

 Hi Friends,


Today I have created an SPFx chatbot using the SharePoint Framework extension. This is a small simple to configure bot. It consumes the QnAMaker API to retrieve the answers for the asked questions.

SPFx Chat Bot - using SharePoint Framework Extension

The code can be found here

Features !!

  • Easy to configure with little configurations
  • Compatible with the prompts
  • Displays the formatted text as done in the knowledgebase
  • Can filter on single metadata value as well as multi values
  • Option to select the operator for the filter values
  • Its an SPFx extension, so can be deployed at a site collection level or the tenant level
 
SPFx Chat Bot - using SharePoint Framework Extension

Configuration Needed.

  • Login to the QnAMaker.ai
  • Create the knowledgebase (follow steps here )
  • Got to the settings 
  • follow the markers below to retrieve the configuration
SPFx Chat Bot - using SharePoint Framework Extension

To get the source code click here

Working Demo

SharePoint Framework chatbot using SPFx Extension


Steps for deployment

There are 2 ways how you can deploy

  • Deploying package directly
To deploy the package directly follow the below steps
  • Go to the release page on Github by clicking here
  • Download the .sppkg file from the latest release
  • Deploy the file in App Catalogue
  • When deployed successfully navigate to  Site Contents --> Tenant Wise Extensions
  • Look for the entry "ChatBot" 
  • Edit the item and fill in the Component Properties

  • Deploying via building the codebase
To deploy the package via build
  • Make a clone of the repository
  • Navigate to the folder sharepoint > assets
  • Update the properties in both ClientSiteInstance.xml & elements.xml file
  • Execute the below commands
    • npm install
    • npm bundle --ship
    • npm package-solution --ship
  • Navigate to the folder sharepoint > solution
  • you'll find the spfxqnabot.sppkg file
  • Follow the Steps mentioned in "Deploying package directly"



You can also check out my video on youtube




Happy Coding...!!
#MicrosoftSharePoint #SharePointWidgets

Reactions:

Comments

  1. ahSeptember 4, 2020 at 6:58 AM

    when i upload app It shows that I have a err " invaild sharepoint app package error hexadecimal value line 7 postion 68"

    ReplyDelete
    Replies
    1. Sumit KanchanSeptember 4, 2020 at 1:34 PM

      Hi, can you please send me the screenshot of the error on sumit.kanchan04@gmail.com

      Delete
    2. Sumit KanchanSeptember 5, 2020 at 1:14 AM

      Hi, issue has been fixed, please take the latest code/sppkg file from GitHub.

      Thanks,
      Sumit Kanchan

      Delete
  2. ahSeptember 4, 2020 at 6:58 AM

    This comment has been removed by a blog administrator.

    ReplyDelete
  3. ahSeptember 4, 2020 at 6:58 AM

    Could you explain step by step because I have a problem with uploading the application pls

    ReplyDelete
  4. Tarun VatsSeptember 6, 2020 at 9:06 AM

    Superb 🙂

    ReplyDelete

Post a Comment

Popular posts from this blog

SharePoint Framework (SPFx) : Cascade dropdown in webpart properties

Image
Hi Friends,

In this blog I will be creating a cascade drop down in the webpart properties of a SharePoint Framework - SPFx webpart.



In my previous post I have shown how to create a dynamically populated dropdown in the SharePoint Framework SPFx webpart. This blog will be in continuation to that, where I will be extending the previous example to populating the list in the dropdown.

In this example I will be showing all the "Views" for the selected list. As we usually comes with the scenario where we need the cascade dropdown.

For full code files you can refer here on github.

Step 1: Setting up your SharePoint environment If you have not yet setup your SharePoint environment , then refer to my previous blog on Setting up your SharePoint environment.
Step 2: Creating a empty SharePoint Framework Project Create a empty SharePoint Framework project. If you are new than refer to my previous article on Set up your new SPFx project. 
Step 3: Install supported NPM packages I very mu…
Read more

Checking user permission in SharePoint Framework (SPFx) webpart

Image
Hi Friends,

Many times we need to show the controls based on the user permission while creating the custom SharePoint Framework (SPFx) webpart. The first thing we look for is the endpoint to retrieve the information from SharePoint.



In this blog I will tell you how this can be achieved without any endpoint as this information is already available in the SharePoint Framework (SPFx) webpart.

So, if you look into the <WebpartName>webpart.ts file , you can find this information in the current page context

this.context.pageContext.web.permissions
Now we get three methods with this

hasAllPermissions : Checks if the user has all the permissionshasAnyPermissions: Checks if the user has any permission from the collection of permissionshasPermission: Checks if the user has given permissionvalue: Returns the current user permission set
Now talking of the permissions, you'll get a variety of permissions. For this SharePoint has the SPPermission class. For convenience I am mentioning all …
Read more

SharePoint Image Gallery

Image
Hi Friends,SharePoint Framework Image Gallery webpart will allow you to create a image gallery with lot of options. These are beautiful galleries options with responsiveness and configurations.In this webpart, there are 3 types of gallery views, which will help you in desiging your SharePoint page more attractive and more meaningful

Check the code hereGallery ViewsLightbox LayoutCarousel layoutList LayoutFeatures..!!Add Captions to the imagesCreate redirect links with any viewAdd description to the List layout for more informationChoose source from the current site or any other siteOption to choose from multiple document librariesOption to choose from the number of imagesOption to choose from the auto-rotation and the duration in the carousel layoutOption to choose from number of images in a row, set as per your areaLightbox Layout ScreenThis layout is a flexible layout where multiple images can be displayed in a small area. You have the option to choose the number of images in a row,…
Read more