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.

Applies to

• SharePoint Framework Developer Preview
• Office 365 developer tenant

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.

• Clone this repo

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.
  
  
  
  
  
• Fill in all the details like Name, Bot handle, Description, and Messaging endpoint.
  
  
  
  
  
• 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.
  
  
  
  
  
• 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
    
    
    
  • Type "hello" and proceed with the site creation process.
    
    

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