Post
Ask Question

Basic Site Provisioning Using SharePoint Framework Client-Side Web Part And Microsoft Bot Framework

Please look below at the sample SharePoint Framework client-side web part illustrating Site Provisioning using Microsoft Bot Framework.

Basic Site Provisioning Using SharePoint Framework client-Side Web Part And Microsoft Bot Framework

Applies to

Solution

 
Solution Author(s)
js-bot-framework Joseph Velliah (SPRIDER, @sprider)
 

Version history

 
Version Date Comments
1.0 June 4, 2018 Initial release
 

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Minimal Path to Awesome

Register Bot

  • Go to https://dev.botframework.com/ and sign in with your Microsoft account.
  • Click on the "Register a bot" link at the top.

    Basic Site Provisioning Using SharePoint Framework client-Side Web Part And Microsoft Bot Framework

  • Fill in all the details like Name, Bot handle, Description, and Messaging endpoint.

    Basic Site Provisioning Using SharePoint Framework client-Side Web Part And Microsoft Bot Framework

  • Generate a new App ID and password by clicking the "Create Microsoft App ID and password" button. Save this value somewhere as we will use these in the next step.
  • Accept the terms and click "Register".
  • Your bot is now registered.
  • Click the "Edit" link under Web Chat channel and note down the Secret key to configure the client web part. 

    Basic Site Provisioning Using SharePoint Framework client-Side Web Part And Microsoft Bot Framework

  • You can test your connection here by typing the "hello" message and click "Send". Try this step after completing the “Publish Bot in Azure Web App” step.

Publish Bot in Azure Web App

  • In the Azure Management Portal at https://portal.azure.com, create a new Web App (example: https://asksprider.azurewebsites.net/).
  • Download the publishing profile from the web app we just created. This will be used to publish the Bot in Azure using Visual Studio.
  • Open the web.config file in AskSPRider.sln and update the MicrosoftAppId, MicrosoftAppPassword, O365AdminId, and O365AdminPassword.

    • MicrosoftAppId – App ID generated from Bot Registration Process
    • MicrosoftAppPassword – App Secret generated from Bot Registration Process
    • O365AdminId – SharePoint Online Admin User Id(example: [email protected])
    • O365AdminPassword – SharePoint Online Admin Password

  • Save the web.config file.
  • Right-click the project and publish the bot in Azure using the publishing profile downloaded.

Configure web part

  • Go to the working directory of the web part folder. In the command line, run the following commands.

    • npm i
    • tsd install
    • gulp serve

  • Add the "Ask SP Rider" web part and edit it. 

    • Configure the bot name and web chat secret key

      Basic Site Provisioning Using SharePoint Framework client-Side Web Part And Microsoft Bot Framework
    • Type "hello" and proceed with the site creation process.
      Basic Site Provisioning Using SharePoint Framework client-Side Web Part And Microsoft Bot Framework

Features

This project illustrated the following concepts.

  • Connecting SharePoint Framework client-side web part to a custom bot
  • Showing how to embed bot within client-side web part
  • How to create a sub-site by posting set of questions to the user via bot
  • Bot form field validations


Similar Articles