Microsoft 365 Office 365 SharePoint Add-ins Extensions SharePoint Framework

SharePoint Framework Community Call Recording – 18th of June 2020

SharePoint Framework Special Interest Group (SIG) bi-weekly community call recording from June 18th is now available from the SharePoint Development YouTube channel at http://aka.ms/spdev-videos

Call summary:

Releases:  PnP Office 365 CLI – new beta version v2.11, Reusable SPFx React and React Property Controls v1.19.0, PnP SPFx Generator v1.14.0 with support for Angular 9.  Ten new or updated Samples – 2 SPFx extensions and 8 SPFx web parts delivered.  Getting started with PnPjs v2 video series:  Understanding Extension Methods, released!  Four demos are delivered.  The host of this call was Vesa Juvonen (Microsoft) @vesajuvonen. Q&A takes place in chat throughout the call.

Actions:

  • Register for First Time Contributor sessions – June 18th, 19th, and 22nd | aka.ms/sharing-is-caring
  • Register for Community Docs Sessions (June 26th and 29th) on the Sharing is Caring site. | aka.ms/sharing-is-caring

Demos:

  1. Storing Microsoft Teams personal app settings in your SPFx solution – a sample web part that stores a Microsoft Teams Personal App’s – Web Part properties (configuration settings) using the custom Settings Panel and a custom hidden list located in the user’s OneDrive.  The properties service gets the user’s properties from the user’s OneDrive via Microsoft Graph.
  2. Using SharePoint Framework to embed JS and CSS to modern pages  a React-based SPFx web part and extension that allows Admins to add/modify/delete references to custom .js and .css scripts for Modern pages within a SP online site using the SPFx application customizer extension.  Paste a link to a script in the webpart and then activate – update the application customizer extension – userCustomActions behind the scenes to modify page.
  3. Using Codespaces with SharePoint Framework – introduction to Visual Studio Codespaces – a viable cloud-hosted dev environment (development container) accessible from anywhere.  Essentially, Visual Studio in a browser.  Connect to existing Azure DevOps or GitHub Repo.  Developers can create a container and configure it as an SPFx environment.
  4. Using React Hooks with SharePoint Framework – an Adaptive Card Viewer that uses React Hooks to get information.  Essentially this is the React Hooks version of The Adaptive Cards Host (Hugo Bernier) demoed on this call in April.   The React FunctionComponent uses React useEffect hooks to get info.  Hooks and functional components can be used along-side class components.
SPFx extension samples:

SPFx web part samples:

Thank you for your work. Samples are often showcased in Demos.

Agenda items:

  • Latest updates on SharePoint Framework – 3:52
  • PnPjs Client Libraries – 5:15
  • Office 365 CLI – 6:04
  • SPFx reusable controls – 6:43
  • SPFx Generator – 7:09
  • PnP Search Solution – 7:48
  • PnP SPFx Samples | Hugo Bernier (Tahoe Ninjas) | @bernierh 8:13

Demos :

  • Storing Microsoft Teams personal app settings in your SPFx solutions | Alex Terentiev (Sharepointalist) | @alexaterentiev 12:06
  • Using SharePoint Framework to  embed JS and CSS to modern pages | Siddharth Vaghasia (Tata Consultancy Services) | @siddh_me 23:35
  • Using Codespaces with SharePoint Framework | Paul Schaeflein (AddIn365) | @paulschaeflein 37:46
  • Using React Hooks with SharePoint Framework | Paul Schaeflein (AddIn365) | @paulschaeflein 45:58

Resources:

Additional resources around the covered topics and links from the slides.

Other mentioned topics

Next Meeting is on July 2, 2020

PnP SharePoint Framework Special Interest Group bi-weekly calls are targeted for anyone who is interested in the JavaScript-based development towards SharePoint Online and also on-premises. SIG calls are used for following objectives.

  • SharePoint Framework engineering update from Microsoft
  • Talk about PnP JavaScript Core libraries
  • Office 365 CLI Updates
  • SPFx reusable controls
  • PnP SPFx Yeoman generator
  • Share code samples and best practices
  • Possible engineering asks for the field – input, feedback, and suggestions
  • Cover any open questions on the client side development
  • Demonstrate SharePoint Framework in practice – also community demos are more than welcome (let us know, if you’re interested)

You can download recurrent invite from https://aka.ms/spdev-spfx-call. Welcome and join the discussion!

“Sharing is caring”


SharePoint Team, Microsoft – 19th of June 2020

filter-icon