Microsoft 365 Community / Getting started series

In this 13-minute demo, use Visual Studio 2022 and Web Technologies (Blazor) to create a Microsoft Teams tab and connect the tab to Microsoft Graph. Thomy Gölles steps through what is Blazor, the installation of Microsoft Teams Toolkit (Preview) for Visual Studio, and finally an F5 demo for viewers to appreciate what’s immediately available like authentication, end point app settings, user secrets management, Tab Razor page, and Graph Razor component and calls delivered after installing and using the Microsoft Teams App template. Tools used include Blazor – client-side and server-side, SignalR API for communications between client and server, and Microsoft Teams Toolkit.

Demo Presenter
• Thomy Gölles | @thomyg

Supporting materials
• Repo - Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx
• Documentation - Teams Toolkit for Visual Studio | https://docs.microsoft.com/microsoftteams/platform/toolkit/visual-studio-overview
• Tool – Blazor | https://Blazor.net
• Tool – Microsoft Teams Toolkit | https://github.com/OfficeDev/TeamsFx

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community blog - https://pnp.github.io/blog
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 6-minute demo, Chris Kent opens with a 4-question ice cream delivery feedback form and his objective is to get the survey answers into a SharePoint list. Presently in the Forms UI, one can view a summary and export information to an Excel file. That’s great! The trick to getting answers in the form into SharePoint is Power Automate. In Power Automate, choose a pre-existing template for the job - “Record form responses in SharePoint.” Create your list, identify files/location, chose what data points to import, map values, save flow and test to validate functionality.

Demo Presenter
• Chris Kent | @theChrisKent

Supporting materials
• Template - Record form responses in SharePoint | https://powerautomate.microsoft.com/en-us/templates/details/2be590104bdd11e78896d10a96d3fac3/record-form-responses-in-sharepoint/

Learn more
• Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
• Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
• Microsoft 365 Platform Community blog - https://pnp.github.io/blog
• Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 5-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0. You created a centralized config file in the previous session, now initialize and import the _sp variable into your project. In a React web part, call getSP() function within a component with no parameters and get back the previously stored _sp instance located in your pnpjsConfig.ts file. In your web part set the local instance this.sp = getSP() inside your component. Reusing a centrally configured (global) variable across all your components is just simple and clean. This is part 3 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 6-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0 and specifically using a single batching call (batchedSP.web.lists) to update list items rendered in a table. They show using an onClick event to call the private updateTitles method. Results state gets updated and a table containing a list of documents shows updated document title names. Check out the code in the PnPjs Example linked below. This is part 5 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 7-minute demo, Julie Turner and Patrick Rodgers show how to get started with #PnPjs v3.0 by passing properties to and using the sp object to render a component (table) on screen. Create your own unique instance of the sp object by extending the sp object without modifying it! Create a new sp object that includes caching behavior. Calls made with the sp cache instance will cache the content of the call into session storage. Map through items and create a file item that will be render files details in a nicely formatted table. This is part 4 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 9 minute demo, Julie and Patrick show how to get started building a simple SPFx React Web part using the PnPjs library. This is part 2 of a 5 part series.

Presenters:
📽️ Julie Turner (Sympraxis) | @jfj1997
📽️ Patrick Rodgers (Microsoft) | @mediocrebowler

Resources:
✔️ https://pnp.github.io/pnpjs
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

In this 5-minute demo, Chris shows how to get started with Microsoft Forms branching. He walks us through how to conditionally display questions based on user input on the form.

📽️ Presenter: Chris Kent (DMI) | @theChrisKent

Resources:
✔️ https://https://forms.microsoft.com/
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

In this 7-minute demo, Julie and Patrick show how to get started with #PnPjs 3.0. They show us the repository (https://github.com/pnp/pnpjs) that also holds the documentation with change log and lots of guidance. This is part 1 of a 5-part series.

Demo Presenters
📽️ Julie Turner | @jfj1997
📽️ Patrick Rodgers | @mediocrebowler

Supporting materials
✔️ Library - PnP/PnPjs | https://pnp.github.io/pnpjs

Learn more
✔️ Microsoft 365 Unified Sample gallery - https://aka.ms/m365/samples
✔️ Microsoft 365 Platform Community in YouTube - https://aka.ms/m365/videos
✔️ Microsoft 365 Platform Community blog - https://pnp.github.io/blog
✔️ Microsoft 365 Platform Community - http://aka.ms/m365/community

In this 13-minute demo, Thomy gives a comprehensive overview on Microsoft Teams Toolkit for Visual Studio including a comprehensive demo.

📽️ Presenter: Thomy Goelles (Solvion) | @thomyg

Resources:
✔️ https://github.com/OfficeDev/TeamsFx
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

In this 6-minute demo, Chris shows how to get started with Microsoft Forms.

He walks us through creating a new survey, different question types, basic data validation and shows theming and preview for desktop and mobile. He shows how results are displayed and are exportable to Excel and how to customize a thank you message. He closes with how to share the survey by email, QR code or link.

📽️ Presenter: Chris Kent (DMI) | @theChrisKent

Resources:
✔️ https://forms.office.com/
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

In this 5-minute demo, Luise shows how to get started with automating tasks around workloads in Microsoft Lists with Power Automate. Learn how to send a random item of a list to a Microsoft Teams channel each day as an Adaptive Card 💡

🚀 Presenter: Luise Freese (M365Princess) | @LuiseFreese

Resources:
✔️ https://adaptivecards.io/designer
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog
✔️ https://aka.ms/msllists

In this 7 minute developer-focused demo, Hugo shows how to take an old version of an SPFx solution and update it with CLI for Microsoft 365. He also provides guidance on when to do this and why. 💡

🚀 Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
✔️ https://pnp.github.io/cli-microsoft365/
✔️ https://aka.ms/m365pnp
✔️ https://pnp.github.io/blog

In this 5 minute developer-focused demo, Hugo shows which template options are available to you when scaffolding your SPFx Web part using Yeoman Generator 1.14: Minimal, no framework or React and highlights the differences.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://aka.ms/spfx-yeoman-info
https://aka.ms/m365pnp
https://pnp.github.io/blog

In this 4 minute developer-focused demo, Hugo walks through how to install the Remote Development extension pack for Visual Studio Code and then uses Docker for desktop to connect to the remote container so that you can easily switch between development environments reflecting that you need different development dependencies for Teams, SPFx, Power Platform etc.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://code.visualstudio.com/docs/remote/remote-overview
https://aka.ms/m365pnp
https://pnp.github.io/blog

In this 6 minute developer focused demo, Veronique walks through how to get started managing SharePoint using Admin Center. She covers creating and deleting both Team and Communication sites and also explains the difference between them. She also walks through registering and unregistering sites as Hub sites.

Presenter: Veronique Lengelle | @veronicageek

Resources:
https://docs.microsoft.com/en-us/sharepoint/get-started-new-admin-center
https://aka.ms/m365pnp
https://pnp.github.io/blog

In this 6 minute developer-focused demo, Hugo walks through how to scaffold an SharePoint Framework web part using Yeoman Generator.

Presenter: Hugo Bernier (Microsoft) | @bernierh

Resources:
https://aka.ms/spfx-yeoman-info
https://aka.ms/m365pnp
https://pnp.github.io/blog

In this 5 minute demo, Bob walks through how to install and approve three different kind of apps - Microsoft apps, 3rd party apps and custom apps via the Teams Admin Center. He shows permission and setup policies to effectively manage apps in the tenant and even customize the app store.

Presenter: Bob German (Microsoft) | @Bob1German

Resources:
https://docs.microsoft.com/en-us/microsoftteams/create-a-team-template
https://aka.ms/m365pnp
https://pnp.github.io/blog