Recap of Getting Started SharePoint Framework (SPFx) Webinar Series 2020.

From the last 2 months, every Wed and Saturday we had an amazing learning marathon as part of the SPFx webinar series. Today being immediate Saturday after completion of this series, let us recap on sessions delivered and links to related resources for reference. This post can be kept handy as I will be sharing a summary of each session, its slides, and link to its recording.

Event Summary 

SPFx webinar series was organized as two-part series under M365 and Power platform User Group India. The objective was to arranged learning sessions with basics on getting started with SPFx and then Deep Dive SPFx with advanced topics. If you are interested in learning SPFx from the beginning, this series has sessions from basic to advanced topics and with a great line of speakers delivering the same. MS Team was utilized for this webinar.

Part 1 SPFx Getting Started Series  – April 2020, every Wed and Saturday

Part 2 SPFx Deep Dive SeriesMay 2020, every Wed and Saturday.

Event Statistics

Attendees – Average 80 per session.

Total Sessions – 17

Total Speakers – 12

Organizers

Nanddeep Nachan  || Kirti Prajapati ||  Vignesh Ganesan || Vijai Anand Ramalingam

Meetup Group Link – https://www.meetup.com/Microsoft-365-and-Power-Platform-User-group-India/

Link to list of Events – https://www.meetup.com/Microsoft-365-and-Power-Platform-User-group-India/events/past/

Summary of Sessions

Introduction to SharePoint Framework by Kirti Prajapati

In this session, Kirti Prajapati has covered the evolution of SharePoint customization and how it came down to SPFx. This session also covers modern toolchain which needs to be used to develop SPFx solutions, etc. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/jH-8YI_G_SI

Link to Slides – https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/01.%20Introduction%20to%20Sharepoint%20Framework%20-%20Kirti%20Prajapati.pdf

Setting up your developer environment for SPFx by Nanddeep Nachan

In this session, Nanddeep has covered hand on how to set up a development environment for SPFx solution. This is an important session because modern toolchain development is a little different than traditional Sharepoint customization. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/PtFOygc3-ZM

Link to Slides – https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/02.%20Setting%20up%20your%20developer%20environment%20for%20SPFx%20-%20Nanddeep%20Nachan.pptx

Overview of SPFX Solution Structure by Prasham Sabadra

In this session, we learned about the Solution and code structure of SPFx solution, what are the different files that are generated, and its importance. The important thing to focus here is to manifest.json file, code structure with No Javascript framework, and ‘React framework’.

Link to recording – https://youtu.be/PtFOygc3-ZM

Link to Slides – https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/03.%20Overview%20of%20SPFX%20Solution%20Structure%20-%20Prasham%20Sabadra.pptx

Deploying and shipping your SPFx solutions by Vijay Natrajan

In this session, Vijay started with typescript and explained the build process for node and web projects. This helped us understand the basic of gulp task which is core component in SPFx solution for building and packaging SPFx solution. Below is the screen capture agenda slide for quick reference.

Loading SharePoint Data in a SPFx Web Part by Jenkins NS

Up until now, though we learned about the basics of SPFx, we have not interacted with SharePoint Data. Building an SPFx solution will always require interacting with SharePoint Data. In this session Jenkins has explained different ways to get data from SharePoint using REST API. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/qqlh51XAO70

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/05.%20Loading%20SharePoint%20Data%20in%20a%20SPFx%20Web%20Part%20-%20Jenkins%20NS.pptx

SPFx with React by Siddharth Vaghasia

React is the buzz word that goes hands in hands with SPFx. Many developers are struggling to understand React and its usage in SPFx. In this session, I have covered basic of React as a standalone concept and how it fits when building SPFx web part with React. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/xoP41YWudCs

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/06.%20SPFx%20with%20React%20-%20Siddharth%20Vaghasia.pptx

Getting started with PnP by Harsha Vardhini

There is an awesome alternative to loading data in SPFx which is PnP JS. In this session, we have learned about what is PnP JS and how to use it in SPFX. This session covers different common use case to get data from SharePoint using REST API and PnP JS  and how PnP JS makes developer’s life easy. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/KRk12i7rOFI

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/07.%20Getting%20started%20with%20PnP%20-%20Harsha%20Vardhini.pptx

Consume Graph APIs in SPFx – Jenkins NS

SPFx development is not just limited to SharePoint, we can also develop SPFx solution which consumes data from other M365 product suite like Azure AD, Outlook, One Drive, One Note, Planner, etc. In this session, Jenkins has covered nicely about different ways to consume GRAPH API in the SPFx solution. Below is the screen capture agenda slide for quick reference. This was last session in Getting Started series for April month and it could not have been more perfect as it was a little advanced topic which was a trailer of what’s coming Next in May month.

Link to recording – https://youtu.be/F7hpNLVH2HE

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/08.%20Consume%20Graph%20APIs%20in%20SPFx%20-%20Jenkins%20NS.pptx

Build MSTeams Customizations with SPFx – Kirti Prajapati

In this session, Kirti walked us through how SPFx can be used for MS team’s customization and how we can surface an SPFx web part in MS teams. It also covers how to get the context of SharePoint and MS Teams so that we can handle the rendering of web part based on the context where the web part is running. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/NDqtMKJRB3k

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/09.%20Build%20MSTeams%20Customizations%20with%20SPFx%20-%20Kirti%20Prajapati.pdf

SPFx Extensions Overview – Bijay Kumar Sahoo

A more common case with Modern SharePoint development is how to customize the User interface of OOTB pages like adding custom HTML to the header, footer, OOTB view customization like adding a menu item to command bar, etc.  SPFx is not only about Web parts, but Extension is also an important feature that allows us to do mentioned things. This session covers in detail about different types of extensions and its practical usage with some common use cases. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/HmZm6rQzr3w

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/10.%20SPFx%20Extensions%20Overview%20-%20Bijay%20Kumar%20Sahoo.pptx

Office UI Fabric/Fluent UI with SPFx – Harsha Vardhini

Many times as a developer you might be asked to develop customization with a mix of OOTB features and Custom web parts. The issue with this approach was that the it was very difficult to match the look and feel of custom web parts with OOTB look and feel.  Office UI Fabric or Fluent UI(merged recently) comes to our rescue where we now can develop customization but provide OOTB look and feel using Fabric/Fluent UI. This session starts with Basic understanding of Fabric core and React and then provides practical usage in SPFX solution. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/aReBtUoEyNI

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/11.%20Office%20UI%20Fabic%20with%20SPFx%20-%20Harsha%20Vardhini.pptx

PnP Controls for SPFx – Siddharth Vaghasia

One of the advanced and useful initiatives of PnP is PnP controls, these repos provide additional react controls that are not available in Fabric/Fluent UI(some are available in both). In this session, I have started a brief overview of PnP initiative and usage of Content react controls and property panes controls in the SPFx solution. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/BeJth3AsF34

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/12.%20PnP%20Controls%20for%20SPFx%20-%20Siddharth%20Vaghasia.pptx

Library Components in SPFx – Nanddeep Nachan

Int his session, Nanddeep has explained about SPFx library components which are another type(other than web part, extension) of solution that can be build using SPFx. He started with reasons on why do we need library components and then did a hands-on developing a library component. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/QcIIFM6HjsU

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/13.%20Library%20Components%20in%20SPFx%20-%20Nanddeep%20Nachan.pptx

Demystifying versioning in SPFx solutions – Jasjit Chopra

This was a very interesting topic/session and something which provides insights on how can we version of SPFx solution. Jasjit has also covered how version can be configured while working with CI/CD pipelines. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/WtpSi9nlki0

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/14.%20Demystifying%20versioning%20in%20SPFx%20solutions%20-%20Jasjit%20Chopra.pdf

Testing SPFx Solutions using Jest and Enzyme – Aakash Bhardwaj

Unit testing is an integral part of programming which is largely ignored by most developers. Let us(read, programmers) admit it we hate testing. But what if we can write a program to automate testing? Sound interesting?  In this session, Aakash covered why and unit testing is required and how it can be automated using Jest and Enzyme. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/NZvNgEA5yvE

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/15.%20Testing%C2%A0SPFx%20Solutions%20using%20Jest%20and%20Enzyme%20-%20Aakash%20Bhardwaj.pptx

CI CD with SPFx – Dhaval Shah

Another buzz word around the technology world now a day is DevOps.  In this session. Dhaval started with an overview of Azure DevOps and different services available as part of DevOps subscription. He has also provided a live demo on how to set up the Build and Release pipeline for your SPFx solution. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/7WVd4My_iHY

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/16.%20CI%20CD%20with%20SPFx%20-%20Dhaval%20Shah.pptx

Multilingual in SPFx- Jayakumar Balasubramaniam

This was last session in the Webinar series but a very interesting topic. If you are serving a customer who is global and have footprints around a different part of the world they might need multilingual for your SharePoint site. SharePoint provides multilingual features for OOTB pages/view/labels based on the user’s language preference but what if you are being asked to developer customization and also provide multilingual features in your web part? This session explores on the need for localization and step by step guild on how to do it. Below is the screen capture agenda slide for quick reference.

Link to recording – https://youtu.be/8L1QEeu7eP8

Link to Slides –https://github.com/nanddeepn/code-samples/blob/master/SPFx/Getting%20Started%20Slides/17.%20Multilingual%20in%20SPFx-%20Jayakumar%20Balasubramaniam.pptx

Conclusion

Overall, I must say this series was a very nice initiative and have covered most topics/part of SPFx. Even more, it was really good to see that there was lot of participation from attendees in chat window and during  QnA sessions. All the participants were sharing their experience, asking about business cases and everyone was open to provide their 2 cents.

Again a big big thanks to Nanddeep, other organizers, and speakers for their valuable time….!!!! 

I hope you enjoyed reading and this post is helpful for your future reference. Feel free to share your comments/feedback.

Happy coding..!!!

(Visited 629 times, 1 visits today)