Demo solution demonstrating how to build a solution using SharePoint Framework and then surface it as a SharePoint web part, a Microsoft Teams tab, a personal app or a Teams messaging extension.

This solution was originally demonstrated in the SharePoint Conference 2018 keynote and also in the Ignite 2018. As part of the release of SharePoint Framework 1.7, it can be finally shared as a generic demo for the community.

LOB solution exposed as a SharePoint web part:

LOB solution exposed as a Teams tab:

LOB solution exposed as a personal Teams app:

LOB solution exposed as a Teams messaging extension:

Important: The ability to expose SharePoint Framework web parts as Teams messaging extensions is currently being developed and will be available publicly in the future versions of the SharePoint Framework.

1. Register bot
   1. Follow the instructions at https://docs.microsoft.com/en-us/microsoftteams/platform/bots/how-to/create-a-bot-for-teams to register a bot
   2. For the messaging URL enter a mock URL, like https://contoso.com/api/messaging. You will update this URL later once you know the temporary URL created by ngrok
   3. Note the Microsoft App ID and password. You will need them later to communicate with Teams
2. Update bot data
   1. In your code editor, navigate to the bot/.env file
   2. Set the value of the MICROSOFT_APP_ID property to the Microsoft App ID you noted when registering the bot
   3. Set the value of ohe MICROSOFT_APP_PASSWORD property to the Microsoft App password you noted when registering the bot
   4. In your code editor, navigate to the webpart/teams/manifest.json file
   5. In the bots and composeExtensions sections, update the value of the botId property to the Microsoft App ID you noted when registering the bot
3. Start the web server with the bot locally
   1. Install ngrok which is required to run the bot powering the messaging extension locally
   2. Open terminal
   3. Change the working directory to bot
   4. Restore project dependencies by executing npm install
   5. Start the local server with the bot by executing gulp ngrok-serve
   6. Once ngrok started, note the hostname registered for the tunnel, eg. b60b1863.ngrok.io. The hostname is displayed in the terminal. You will need this to register the bot
4. Update bot URL
   1. In the web browser go to your bot registration page
   2. Update the messaging URL to your ngrok domain, eg https://b60b1863.ngrok.io/api/messaging

1. From the webpart/sharepoint/solution folder, add the leads-lob.sppkg file to the tenant app catalog in your SharePoint tenant.
2. Navigate to the site where you want to install the solution - it's using tenant-scoped deployment, so web part is automatically exposed in the web part picker just by adding it to the app catalog.
3. Move to Microsoft Teams and either upload the LeadsManagement.zip file from the Teams folder to app catalog of a specific Team or to the tenant level app catalog for Microsoft Teams.

Notice that you will need to enable side loading if you want to upload solution specifically to one team or to the Microsoft Team tenant app catalog. See following tutorial for additional details: Building Microsoft Teams tab using SharePoint Framework - Tutorial.

By default web part is using "demo mode", which does not require any additional configurations. More details on the optional Azure Function integration will be added on this readme file later.

This solution is compatible with SharePoint Online. Teams capability only works currently in Targeted Release tenants (until it's moved from Preview status to GA).

• Waldek Mastykarz (MVP, Rencore)

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.