Microsoft 365 Community Experts from the field, 16 Apr 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Start Learning SharePoint (SPFx) App Development: Free Resources Guide

Description

Learn to become a SharePoint/SharePoint Framework (SPFx)/Viva Connections developer using the freely available resources! But, it’s hard to figure out where to start. You need a trusted & opinionated guide to tell you what to focus on!

In the last decade, I've made educational Microsoft 365 materials like slide decks, training modules, hands-on labs, videos, articles, and code samples. I've figured out what's essential to learn and what it's like to work with clients and students in real life.

I made study materials for developers to pass the MS-600 exam and get the Microsoft 365 Certified Teams Application Developer certificate. Then, I made a prep course to help them get ready for the test. Many developers have used my prep course to pass the MS-600 exam!

After Microsoft retired the MS-600 exam in early 2023, I was left with a prep course for an exam that is no longer available.

But the content is still relevant!

Although the MS-600 exam and certification are no longer available, there is still a need for SharePoint developers. That's why I've decided to share my exam preparation course for free on my YouTube channel, which is what this video is all about!

This video is a version of a chapter from my course on developing SharePoint Framework solutions SharePoint Online & Viva Connections. Be sure to check out the following playlist, as I did the same thing for all the workloads that the MS-600 exam measured developers on, including Microsoft identity (Azure AD), SharePoint (including the SharePoint Framework & Viva Connections), Microsoft Graph, Microsoft Teams, and Office Add-in development!

🔗 Resources:
-------------------------------------------
🔗 Downloadable PDF of all resources - https://voitanos.io/course-learn-m365/youtube-sharepoint-dev
🔗 (playlist) Microsoft 365 Developer Guides - https://www.youtube.com/playlist?list=PLWv_zMQc_6MqHYVYBdSqfAcD9YHChTjkS

📚 Chapters
-------------------------------------------
00:00 : Introduction
10:24 : SharePoint Framework overview
12:11 : Developing with the SharePoint Framework
16:09 : SPFx Components
17:37 : Fluent UI (Office UI Framework)

Web Parts & Property Panes
--------------------------
19:35 : Web parts, property panes, and usage scenarios
22:46 : Testing and debugging web parts
23:19 : Web Part Property Pane
24:27 : Full page apps / Single page app pages / SPA
25:43 : Use SPFx web parts as Microsoft Teams Tabs

Extensions
----------
27:22 : Extensions
28:47 : Application customizers
29:55 : Command sets
30:45 : Field customizer

Adaptive Card Extensions (for Viva Connections)
-----------------------------------------------
31:37 : Adaptive Card Extensions & Viva Connections
33:15 : ACEs: what you should know
34:33 : Extending Viva Connections

Third-Party Services
--------------------
35:25 : Consume third-party services
37:23 : Consume third-party anonymous APIs
38:37 : Consume SharePoint APIs
39:33 : Consume third-party APIs secured with Azure AD
42:28 : Consume Microsoft Graph

Packaging, Deployment, & Versioning
-----------------------------------
44:17 : Package & deploy SPFx solutions
45:53 : Options to prepare a package for deployment
47:45 : Packaging SPFx solutions for deployment
49:03 : Microsoft [Office] 365 CDN
50:34 : Azure or third-party CDN
52:01 : Solution deployment options
53:47 : Update & upgrade existing SPFx solutions
55:20 : Update code
56:37 : Tenant-scoped solution deployment
58:09 : Domain isolated web parts

🔖 My on-demand & free email courses
-------------------------------------------
📺 Mastering the SharePoint Framework
https://voitanos.io/course-master-sharepoint-framework
📺 Build Web Parts with the SharePoint Framework (SPFx)
https://voitanos.io/course-sharepoint-framework-web-parts
📺 Extend the SharePoint UX with the SharePoint Framework (SPFx) Extensions
https://voitanos.io/course-sharepoint-framework-extensions
📺 Extend Viva Connections with the SharePoint Framework Adaptive Card Extensions
https://voitanos.io/course-sharepoint-framework-adaptive-card-extensions
✉️ Explore & evaluate the SharePoint Framework
https://voitanos.io/ecourse-explore-evaluate-spfx/
✉️ Understand the SharePoint Framework toolchain
https://voitanos.io/ecourse-understand-spfx-dev-toolchain/

🔗 Links
-------------------------------------------
Newsletter 📧 https://voitanos.io/newsletter
Website ▶️ https://voitanos.io
Twiter ▶️ https://twitter.com/andrewconnell
LinkedIn ▶️ https://linkedin.com/in/andrewconnell
Facebook ▶️ https://facebook.com/voitanos
Instagram ▶️ https://instagram.com/andrewconnell1

A

Even though Microsoft retired, the ms-600 exam and the associated ms-600 developer certification in March 2023, you can still use the free self-paced resources that Microsoft provided to learn how to use things like the SharePoint framework to customize and extend SharePoint and Viva connections in this video I'm. Giving you my entire guide that walks you through these free resources, including lectures, Hands-On labs and videos, hi, I'm, Andrew, Cottle and, if you're new here be sure to hit that subscribe button to stay up to date.

A

On all my videos for web and Cloud developers on Microsoft, 365 and related topics, and while you're at it make sure you subscribe to my newsletter to get insights and the latest news in the world of Microsoft 365 for web and Cloud developers. I've got a link to it here in the one in the description below before we get started with.

A

This I want to set some context on what this video is going to cover, and while this only takes a moment, if you're familiar with the history of my ms600 exam Prep course feel free to use the chapter links in the description below to jump ahead to the start of this guide for self-paced learning about customizing and extending SharePoint with the SharePoint framework, I created an exam Prep course for the ms600 exam building, applications and solutions with Microsoft 365 core services that hundreds of developers had used to prepare for and pass the exam Microsoft used the exam to measure a developer's knowledge around a few Microsoft 365 workloads, things like SharePoint, Microsoft teams, Azure ad Microsoft graph and office add-ins, but when Microsoft retired, the exam in March 2023 I was left with this course that served as a guide for all those free self-paced study resources that developers could use to prepare for the exam I can't sell that no one could buy would buy that course, or more.

A

Only I can't in good conscience sell it because the exam doesn't exist anymore, but here's the thing the course content is all still valid. It's a self-paced guide on how to learn various things like what you need to know to be a qualified developer to be customizing and extending SharePoint with the SharePoint framework, so I've decided to release the chapters for each of the different workloads here on my channel.

A

That's what you're about to watch note that there are parts of the video where I refer to the exam, just know that the exam I'm referring to the ms-600 exam- that's retired, at this point, and it's no longer available to take also throughout this video I'm, going to reference a lot of online resources like documentation, training modules, videos, Hands-On Labs, the links are all in the video, but I've also compiled them in a single downloadable PDF, and you can get this from the link in the description below the video. It's all on my site.

A

Okay enough with the explanation out of the way, let's dive into learning about the free self-paced resources for learning about customizing, extending SharePoint with the SharePoint framework. Now Microsoft SharePoint is a customizable platform that developers can extend with custom components and the SharePoint framework is the recommended development model to extend the modern SharePoint experience.

A

This workload accounts for 15 to 20 percent of the questions in the question pool that could show up when you take the exam in the first iteration of the ms600 exam SharePoint had a much stronger Focus than it does today. It originally was responsible for 20 to 25 of the questions on the exam, but in the November 2020 refresh of the exam Microsoft realigned the waiting to put more emphasis on Microsoft teams than on SharePoint. Hence the reduction of the SharePoint question pool down to about 15 to 20 percent.

A

Now that you know what SharePoint is and how much of this exam, the questions are going to account for devoted to SharePoint. Let's look at the depth of knowledge that you're going to need to have in these various areas. Recall Bloom's taxonomy from the overview chapter in the course. Let's use that again to provide some context around what you need to know, because it helps to understand how deep you need to know something before you Embark studying for that topic. This helps you grasp the level of questions that you'll see on the exam.

A

Now, when you look at the skills checklist that Microsoft provides for the ms600 exam you'll notice, most of the skills include the following words: describe identify, create and implement these phrases fall across the entire spectrum of the taxonomy, and that means for SharePoint we're going to focus on the entire pyramid of the taxonomy all the way from the lower order. Thinking skills like remember and understand all the way up to the higher order, thinking, skills like evaluate and create.

A

Now, let's take a minute to explore what lessons you're going to find in this chapter, so that you know what to expect as you proceed through this SharePoint chapter in this first lesson on the overview, you've learned, what extend the SharePoint uh workload is all about and on the next slide, I'm going to wrap up this lesson. There's some additional learning resources so be sure that you check the notes under the lesson, video for a collection of all the external references that I use throughout this chapter.

A

The SharePoint workload is quite large, and so many products at Microsoft not only come from the SharePoint, but also integrate with it, and it has a long history of various ways to extend this product. It also has the added complication that SharePoint Roots come from an on-premise installable product. Well, the focus today is the cloud service SharePoint online. So, in addition to all of that, we're also on the fourth customization extensibility model for SharePoint sounds like a lot yeah.

A

It is, but just like the other chapters, you don't need to know everything about this topic in order to pass the exam. So, in the next lesson, I'm going to call out specific things that you need to focus on as well as things you can ignore, as they aren't relevant to the exam, then we'll begin with a look at an overview of what the SharePoint framework is. The SharePoint framework is commonly referred to as spfx. So that's how you're probably going to hear me refer to it most of the time throughout this this chapter.

A

This lesson is going to look at some of the more Global things that you need to be familiar with when it comes to spfx, and this includes the the tools that developers are going to use and also cover elements of spfx that are not specific to particular types of components or topics that warrant their own discussion or lesson like deployment or working with additional apis and the next lesson.

A

I'll cover web parts and the basic building blocks for creating spfx based customizations, and we're also going to look at how developers can add support for users either to edit public properties on the web. Part using property panes and some alternative usage scenarios for web Parts, such as implementing single page applications and tabs in custom, Microsoft teams, apps, and then we're going to look at the other popular type of component that you can build with SharePoint framework extensions.

A

These are also referred to as UI extensions and they enable developers to customize modern SharePoint pages and lists in one component. In this lesson, we'll look at the different types of extensions that you could be tested on in the ms600 exam now, after covering the different components that you can create with spfx I'll then cover how to consume different types of apis that are external to the SharePoint framework and then finally, I'm going to cover the aspects of packaging and deploying spfx Solutions into your production environments.

A

There are plenty of resources that are available to you that you can leverage if you aren't familiar with a topic. So if I cover something in the course that you may think, I got it I'm comfortable with my knowledge on this topic, then you're probably good.

A

But if you think to yourself um I, don't think I get it or if you aren't familiar with a process or a particular API that I cover, then you should go: read the official documentation or study one of the multiple resources that I'm referencing throughout the course to make sure that you are adequately familiar with the topic prior to taking the exam.

A

Now, I'll reference specific resources throughout the course, but, like I, said before, be sure to check the notes for this lesson under the video below for a collection of all the external references that I use throughout this chapter, but on this slide, I want to quickly run through the Microsoft learning resources that I'm providing and explain what's in each one of these, the first group of links is around Microsoft learning. They have learning paths and modules and a learning path. That's just a collection of a bunch of modules that have been strung together.

A

The learning path for SharePoint is called, extend, Microsoft, SharePoint associate, and it contains the modules used for self-paced study to study for the exam. We then have five modules that cover various topics that I'll reference throughout this chapter and all contain Hands-On Labs. If you want to practice some of the topics you need to be familiar with prior to taking the exam now, these modules are as follows: getting started with the SharePoint framework.

A

Developing web parts of the SharePoint framework enables SharePoint framework web property web part configuration with property panes work with the SharePoint content, using the SharePoint framework, extending the SharePoint framework user interface with spfx extensions leverage, Microsoft graph and third-party apis deploy, SharePoint framework components to production and build teams. Customizations using the SharePoint framework, you'll notice a lot more modules in this learning path than others that I've referenced in other chapters throughout the course, and that's because the SharePoint modules were originally written prior to the ms600 exam and the Microsoft learning content site.

A

So all the modules that support the content covered in the ms600 exam, but they're just broken down into much smaller topics. For example, there are two modules on dealing with web Parts, one on web parts and one with web part properties, but in this chapter, I'm I'm, covering both of those as a single topic in a lesson rather than breaking it up.

A

Sharepoint also contains a ton of documentation as well on their site and I'll reference, a bunch of individual links in the lesson notes, but you can always start at their docs home page and again found in the notes that accompany this lesson under the video. In this lesson, we're going to take a look at an overview of spfx and look at some of the topics that don't necessarily belong and some of the other lessons throughout this chapter.

A

Let's start with an overview of spfx and as I said in the introductory lesson in this chapter, spfx is the entire focus of the ms-600 exam's SharePoint section to prepare for the ms600 exam. You should be very familiar with two aspects of spfx the core components and what's important to Microsoft when I refer to the core components of spfx I'm talking about the fundamental aspects of the product, as well as all the technical aspects that every spfx developer should be aware of. High level points that you need to be aware of.

A

Are things such as that spfx is the recommended way to customize and extend SharePoint, and this includes not just SharePoint online, but it actually includes every on-premise release going of SharePoint going back to SharePoint server 2016., although SharePoint server 2016 is a bit unique in the sense that it is supported for spfx, it's very limited, but regardless you don't need to know much about the on-premise story of spfx when it comes to the exam just that it's possible.

A

You should also be very familiar with the fact that spfx is a client-side customization option for extending SharePoint, and this means there is zero server side component or options when it comes to the Core part of SharePoint framework, which differs from other extensibility options.

A

Furthermore, spfx is a price, primarily only a customization option for the modern user experience, while spfx web parts are supported in the classic experience. Spfx is extended to be and intended to be, the customization experience for the modern experience.

A

Now, let's start to look at some of the specifics with spfx, the ms600 exam actually contains a question or two about the development, a deployment the development experience.

A

So you should be aware that what tools are required in order to build spfx components, the official documentation that I've linked to walks you through all the requirements for setting up an environment for spfx development, and you should be very familiar with this process, specifically all the tools that you'll use work that work to work with spfx are built on top of the node.js framework.

A

This is just a JavaScript engine, wrapped in an API that enables it to run outside of the browser on a device like a laptop one of the most significant differences in tooling from spfx development compared to previous SharePoint developer models is that the visual studio, Visual Studio, is no longer required or recommended. The recommended tool for Microsoft is the lightweight text. Editor called Visual Studio code, but really you're free to use any editor that you like, including webstorm, atom, sublime or even Notepad, and by removing the dependency on Visual Studio.

A

Unfortunately, SharePoint loses that whole new project template wizard experience. Instead, Microsoft has adopted Yeoman and Yeoman generators to create the new project. Scaffolding so make sure that you're familiar with how this works and that Yeoman is the engine or tool that runs a generator. Microsoft has created a yeoman generator for spfx projects.

A

So when you execute the generator with Yeoman you're you're presented with a series of questions that drive the creation of the project folders and the files for your project, so two or more tools that are involved in creating SPF spfx projects are webpack and gold, and you need to install gulp on your development machine just like yeoman, the Yeoman generator and node.js. It serves as the same role that Ms build fills with net projects as a task Runner that handles jobs like compiling, bundling and packaging. These different solutions.

A

Now, if you're familiar with gulp, you know that it executes a Define, it executes tasks that are defined with JavaScript. This is Microsoft's build tool chain, that's included with each project includes all the tasks that you're going to need to create, build and manage your spfx projects. The ms600 exam is not going to test you on creating custom tasks or anything other than the fact that gulp is used as part of the tool chain. Furthermore, webpack is used to combine multiple, JavaScript and CSS files into a module or a bundle.

A

You don't need to install this as it's installed as part of the dependency Tree in every single project. If you're familiar with webpack, you know you need to provide configuration settings either in the form of a command line inputs or as a configuration file. Microsoft's build tool chain, that's included with each project. Does this for you with each build? So you just need to be aware that it's used, but no specifics on how to customize webpack when it comes to the ms600 exam.

A

The last thing you need to be familiar with is language. That's used to develop spfx Solutions and, as I've already stated, spfx Solutions are entirely client-side projects, which means they are ultimately comprised of JavaScript, HTML and CSS. However, all the apis and projects are based on typescript, that's a superset of JavaScript, so you should be familiar with that now, with the core development topics covered that you need to be familiar with.

A

Let's take a moment and talk about the different types of things that you can create with the SharePoint framework from a high level, spfx can be thought of as two things. It's first of all, it's an API that developers can use to interact with the page, SharePoint and other hosts, such as Microsoft teams and other services, such as Microsoft graph. The other aspect of spfx is that you can build a few different types of components with it. Spfx supports creating three different types of components.

A

The two types of components that you need to be familiar with are web parts and UI extensions. Now I'm going to go into more detail on both of these in the next lesson. Next couple lessons the third type of component that developers can create with spfx are Library components. Library components are used to contain code and logic shared across multiple spfx web Parts, extensions or other Library components, and while an important capability for developers, there aren't any questions in the SharePoint pool of questions about Library components on the ms600 exam.

A

Another topic that the ms600 exam May test you on are the different rendering options available to developers in spfx Solutions, rendering options refer to the different web Frameworks that can be used to implement SharePoint application or applications inside of SharePoint. Now the SharePoint framework has no limitations or restrictions on which web Frameworks are or not supported for use in custom. Solutions developers can use whatever they want, including popular Frameworks such as react, angular view JS and many others.

A

However, the omen generator for the SharePoint for SharePoint does include project templates for web parts and select UI extensions for react.

A

There is nothing special about the support for react in spfx Solutions, though SharePoint leverages react and therefore developers don't need to worry about getting it on the page and then last but not least, you should be familiar with what the office UI fabric is and how it's used within spfx Solutions, the office UI fabric is a the official front-end framework for building experiences in Office 365 and Microsoft.

A

365 and SharePoint SharePoint provides seamless integration with fabric that enables Microsoft to deliver a consistent and robust design language across various SharePoint experiences such as modern team sites, modern pages and modern sites. You should be aware that of the differences between the two different flavors of the office, UI fabric, there's fabric, react and there's the react versions, there's core and react.

A

The core packages contain the core style sheets, typography, colors, icons and other building blocks that are used in the overall language. The react package contains a set of reusable components that are built using react on top of the fluent the fabric design language now experienced, SharePoint developers may be asking, but what about fluent UI fluent UI is supposed to be the successor to office UI fabric design, language.

A

However, it's not covered or addressed by the ms-600 exam, so you can ignore it for Preparation, but it's basically the same thing as just a different name for the office. Ui Fabric and you may ask you- may also ask yourself but wait. What about the PMP reusable controls they're. These These are popular controls that are by the community that are that are that are Community Driven that are react, controls that are built on top of the office UI fabric.

A

I, don't deny these things are incredibly useful, but these are not covered at all on the ms600 exam. So you can also ignore these for your preparation.

A

Okay, that wraps up my spfx overview lesson in the next lesson: we're going to look at the different types of components that developers can create and we're going to start off with web Parts property panes and then how we can use web Parts. In this lesson, we're going to cover SharePoint framework web Parts, uh the different types and the various aspects that you need to be familiar with for the ms600 exam with web parts.

A

We also need to discuss other things, not just web Parts, but property panes and another unique case for web Parts, which is called full page apps. These full page apps are also called single, page app pages, but are most commonly known as spas or single page apps, we'll also cover using web Parts as the implementation for custom tabs inside of Microsoft teams, although they can be used for a lot more stuff in teams, but really only just interested for the exam about how they can use this custom tabs.

A

Now, let's start this lesson by looking at web parts- and these are the most common type of component used in spfx Solutions, you should be very familiar with building spfx web Parts, including the core spfx API, the spfx web part API, is implemented by extending the base client-side web part class, and this contains a handful of methods that you need to be familiar with for the exam.

A

You should know how to initialize your web part using the on init method and how that differs from using the web, part's Constructor class in a nutshell, The Constructor class is going to run or Constructor on your class is going to execute potentially before the SharePoint framework has initialized. So if you try to access the page context, you're going to get an exception or you have a good chance of getting an exception.

A

The on init method, though, that is only going to run once SharePoint framework has been initialized and then it's going to be initializing your web part.

A

You should also know that, regardless, if you are using the web part framework or a web part framework such as react or pure JavaScript, the render method is where your implementation, where you implement the logic that will create the visual aspects of your web part and then. Finally, you should also know how to work with the get property paying configuration property. That's going to define the property pane configuration for the web part.

A

All web Parts can also have setable public properties used to customize web part instances, and you should be familiar with how to define and access these properties via the SharePoint framework API.

A

Now every spfx component contains a code file where you'll Define the logic, as well as a manifest file, and the Manifest is a Json file that describes the component, including things like the name, the unique ID and other things that are unique to the component for web Parts. This includes things like the title, the description and the icon that are shown in the toolbox when adding a web part to a page.

A

Then you also have these things called pre-configured Web part properties, and these are values that are all set in a section of the Manifest called pre-configured entries now within that object, there is a collection of name value, pair properties that developers can use to pre-define your own custom public web part properties that are set when the web part is initially added to the page.

A

Now you also need to be familiar with how to debug and test spfx components. Web parts and extensions are tested different ways. Web Parts can be tested using the workbench, and this is a special page with a canvas that you can add the web part to the page. The hosted workbench is available in every SharePoint site collection. The hostel workbench is a real SharePoint page and that allows you to run your locally hosted web part alongside all other deployed web parts and even access real SharePoint data and lists.

A

Now, when discussing the API I mentioned the get property paying configuration property, this property enables developers to define the property pane in order to create a custom experience for your um your end, users. You should be familiar with how to create custom property panes.

A

You can do that by use the existing property controls that we have like text box. Toggle controls drop down, lists many others. You should also be familiar with how to implement data validation and the difference of reactive and non-reactive property panes and how to switch between these two modes and why you would want to do it and then, finally, you what's also involved in creating a custom property control.

A

That's something you need to know, and the ms600 exam doesn't contain a lot of questions on creating custom property controls, but you should be familiar with the process and what's involved in creating them, if you're not familiar with this process, refer to the Microsoft learning module in the lesson notes below the video as there's a Hands-On lab exercise that walks you through this process.

A

Now, let me talk a little bit about full page apps. Web parts are special in the sense that they are the basis for a few different extensibility options that are based on spfx.

A

One of these are full page, apps and you'll, see and hear Microsoft also refer to these as single page app pages, but we more commonly refer to these as spas or single page apps. Now, what makes them unique from traditional web Parts is the idea that the component takes up the entire page or most of it and is implemented using a web framework. Typically like react to create an application experience.

A

They are added to SharePoint by creating a new page and selecting it from the list of page options. Now, from the end user's perspective, it's just a page because they can't modify the web part or add additional web parts to the page and developers can specify a web part can be added to a site as a spa. By using this thing called the supported host property in the web Parts manifest by default.

A

This property contains the SharePoint web part string, indicating that it can be added as a site as a web to the site as a web part. But if you use the string SharePoint full page, it tells SharePoint that this web part can also be added as a spa and should be included in the list of template options when creating a new page on a site.

A

Now, as we'll cover in another chapter in this course, Microsoft teams is a huge area of focus for the ms600 exam, because Microsoft 365 has a very big focus on teams and one area they're. Investing a lot of energy in is using spfx to create custom Microsoft teams, as now for the AMS 600 exam.

A

The only thing you'll be tested on is how to use spfx web parts to create and Implement a custom, Microsoft teams tab, so developers should be able to know how to specify a web part can be used as a tab in Microsoft teams, and you do that using the supported host property that I just used a minute ago. This is done in the web Parts manifest and you simply add the string teams tab to the array now.

A

The other thing you need to know about is that sharepoint's web Parts, as I've already covered use property panes to allow users to modify the public properties, Microsoft teams tabs work differently and that settings are displayed as a pop-up, and you should know how the initial configuration experience differs between hosting web parts and SharePoint or as a tab in Microsoft teams for the ms600 exam.

A

If you aren't familiar refer to the MS, the Microsoft learning module that I've included in the in the notes that associated with this lesson for a Hands-On lab exercise that walks you through this topic and then. Finally, you should also be familiar with the Depo, the deployment and the hosting aspects of using spfx web Parts as Microsoft teams tabs for the ms600 exam okay. So that wraps up the lesson on spfx web Parts.

A

In this lesson, we're going to cover SharePoint framework extensions and the various aspects that you need to be familiar with for the ms600 exam. Now, let's start with a high level overview of extensions and some topics that you should be familiar with across all different types of extensions. There are three types of extensions that you can create as a SharePoint framework developer that you need to be aware of for the ms-600 exam.

A

These are application, customizers command sets and field customizers. For each of these, you should know how to test and debug them, as as the experience is very different from web Parts, because you can't use posted workbench. Rather, you need to use real SharePoint pages and lists to test each one of these different extension types. In addition, each type of extension is different in how it's tested so make sure that you're aware of each one and how to test each different type of extension.

A

You also need to understand the deployment considerations for each type of extension, and this includes setting predefined properties and unique configurations that are that each extension may require, and then you also need to make sure that you're familiar with the concept of tenant-wide deployment, as well as the fact that only app customizers and command sets support this option. Now, with all that being said, let's look at what you need to be aware of with each type of extension when it comes to an application customizer. These are going to enable developers to do two different things.

A

You can add client-side script to all pages within a site where the application customizer has been installed or when combined with the tenant-wide deployment option. You can also add client-side script to all pages across all Sites throughout your tenant, and this is done using the extensions on init method.

A

Make sure you also understand how placeholders work with application customizers. There are two placeholders on every single page, the top placeholder and the bottom placeholder make sure that you understand how to get a reference to the placeholders, the correct and Safe Way in your code.

A

You should also be familiar with some common scenarios when application customizers are going to make the most sense think about when you'd want to add script to all pages throughout your site like a cookie or a privacy, dialogue notice or adding some Telemetry and analytics application to your tenant. These are just two or three examples.

A

Another type of extension is the command set and these enable developers to add buttons to the um to the interface specifically on list toolbars, as well as to the context menu on items inside of a SharePoint list. You control, where the buttons appear. When you register the button in the components manifest file, you should be familiar with the API event on list view updated. That's raised every single time.

A

The state of the list view changes so, for example, when a user selects an item, this method is raised, which can then enable the developer to change the visibility of a command set button and then, finally, you should also know how to run your your custom logic when a button is clicked, as indicated by the on execute event that you can implement, and then last but not least, is the field customizer. This extension allows developers to use JavaScript to implement the rendering of a cell in the display view of a SharePoint list.

A

You should understand that how to use the on render cell method to implement the custom ux for a cell inside of the grid list of all items in a SharePoint list. The deployment of a field customizer is very different from the other two types of extensions that you're going to be tested on.

A

For instance, a field customizer is deployed as a new site column to a SharePoint site. So you should make sure you understand how this works and how it's very different from the testing and debugging process of creating custom fielded customizers.

A

Okay, so that wraps up the lesson on SharePoint framework extensions. In this lesson, we're going to cover adaptive card extensions and customization options for Viva connections.

A

Let's start with a high level view of adaptive card extensions, also known as Aces, and some topics that you should be familiar with when preparing for the ms-600 exam aces are a type of component added to the SharePoint framework in the release 1.13 and they enable developers to build Rich native extensions for dashboards and Viva connections and SharePoint pages Aces use adaptive cards to generate UI that are supported across Viva connections.

A

Web desktop and mobile clients and the skills worksheet is not very descriptive in detailing what exactly you need to know about Aces, so you're best off having a solid understanding of the various types of cards that are made available. There are two ways that you can render an ace the card View and the quick view.

A

The card view is the Ace rendering, when it's rendered in a dashboard or a page Aces when used on dashboards and pages, are always rendered as a card, at least to start now there are three different options for rendering a card view. There are two similar options that are called basic card View and primary text card view. The basic card view is simply going to display some text with an optional button that can be used to launch the quick view.

A

While the primary text card view can be used to display some additional text with a card view, the other option is to display an image with text using the image card view option.

A

The other way to render an ace is with the quick view when you interact with an ace, it can display a much larger, customized experience, which is what we call the quick view. So what kinds of things should you know about with respect to Aces? You should know how to create both the card and the quick view of an ace, as well as how to add buttons to the card and handle actions like launching a browser window or opening the quick view similar to web Parts.

A

Aces can have configurable properties that are set by users with the appropriate permissions, and these enable you to customize each implementation of your A's, and this is done using the property pane. The standard property pane we're used to using with web Parts Aces can be configured just like web parts.

A

You should also know how to work with the state of an Ace and how the state differs from the properties on the card as well, and you should also be familiar with action handlers and what they're used for these. Allow you to perform actions when a user selects buttons in your cards. Another thing you should be familiar with are the different types of action handlers that are supported by Aces. These include things like geolocation capabilities like getting and showing locations as well as uploading media like image files in your cards.

A

Now the Links that I've referenced in this lesson, as well as those that are included in the notes below the lesson. They include a lot of really good tutorials, Hands-On labs and samples of different things that you can do in creating Aces to customize, SharePoint pages and Viva connections.

A

In addition to Aces developers have additional options for extending and customizing Viva connections and for the exam you should be aware of what options these are.

A

These are covered in other lessons throughout this chapter now, Viva connections is just an app version of your SharePoint intranet site in Microsoft teams, at least that's how you can think of it from a developer's point of view and the reason I say this is because the way that you customize specific pages in Viva connections, which are really just SharePoint pages, is to use web parts and we've already covered web parts and other lessons.

A

Another option is to use application customizers, which is one of the types of extensions that we've covered in another lesson, you can use these application customizers to make customizations globally across all the pages inside of your SharePoint site and thus Viva connections pages.

A

All right that wraps up our discussion on adaptive card extend now in this lesson we're going to cover one of the more complicated topics with spfx, which is how to consume external services, including third-party apis, secured with Azure ID in your components and it's a fairly complicated topic that you need to ensure you're well familiar with when preparing for the exam, just like I've mentioned throughout other lessons, though, in this course use the links that I've included in the notes under the lesson for preparing for the exam for some hands-on experience.

A

If you need that, so what exactly are we going to cover in this chapter? That's probably a pretty good place to start. The one thing I find quite interesting of the skills checklist for this exam is that Microsoft only included mentioning uh only included included, mentions of consuming third-party apis secured with Azure ID, as well as consuming the Microsoft graph endpoints. The reason I find this interesting is that I know for a fact. From my experience, there were questions about calling two other types of endpoints.

A

These are the two types of endpoints are consuming third-party apis that are not secured with Azure ad. These apis are either Anonymous or they are secured with a much more simplistic approach, such as using a token or a key in the header value or in the URL, and the other endpoint which I I can't believe was missed in the skills checklist is how to consume the SharePoint rust apis. How can they miss mentioning that you need to know how to get data from a SharePoint rest API using the SharePoint framework, API and SharePoint framework components?

A

I, don't get it, but hey. That's why you signed up for this course, in addition to the links that that are relevant uh to the documentation of these topics, I've included links to two Microsoft learning modules that cover all four types of these different options of endpoints. You can call so if you want some Hands-On practice check the exercises in these two modules to get more experience prior to taking the ms600 exam okay.

A

So, let's get started with the content, we're going to start by talking about the easiest option and move our way through to the more complex options. The first thing you need to know is how to consume services in a remote API that are not secured with Azure ID. This includes endpoints that could be either Anonymous apis that require no form of authentication or those that have some sort of security. That's a lot simpler to handle than an endpoint secured with oauth 2 tokens such as Azure ad, which we'll look at in a later.

A

In this lesson for these endpoints, you need to know how to use the HTTP client API, that's included with the SharePoint framework API, while you're not going to be tested on it. It helps to know that this API is just a wrapper to the native support browsers have for something called the fetch API and then it also includes a polyfill for browsers that don't implement the fetch API like that pesky internet 11., Internet, Explorer 11..

A

This API, as you can see from the following code, snippet supports making a simple, get or post request to a remote endpoint. The optional third argument in the getter post method enables us and developers to override the default HTTP header values and the body. If you need to have more control over the request, the next and maybe more common endpoint that you're going to consume within your custom, spfx components, that's the SharePoint rest API.

A

The SharePoint framework includes the SP HTTP client API, which is used to call the SharePoint rest apis in the same site where the component is running and as you can see from the following code, snippet, it looks identical to the previous sample for the HTTP client.

A

The nice thing about this API is that it handles all the authentication and configuration of the request that are required to call the SharePoint rest API and just like the HTTP client, an optional third argument on the get and post method enables developers more control over the request, headers and body and in fact, under the covers, the sphp client object is just reconfiguring. The HTTP client object to call the SharePoint rest API Now, we move into the more complicated Parts you need to be familiar with.

A

The support spfx has for calling third-party apis that are secured with Azure ad. Let me explain from a high level what Microsoft did and how it Works, using my own uml sequence, diagram now, Microsoft has provisioned an Azure ad app for every SharePoint online tenant, and this app is found in the Azure ad tenant for your Microsoft 365 tenant administrators can grant this app permissions to another endpoint secured with Azure ad you and then using the aad HP client API in the spfx API. A component can request and an access token for the Target endpoint.

A

What the API does is requests an access token from SharePoint online, which in turn is going to authenticate and request the access token for the previously approved permission request and then SharePoint online. If everything has been set up correctly or turns the access token to the spfx component, the spfx component then uses this access token to submit the request to the normal to the endpoint, like normal.

A

The entire process, as I expect that I just explained while while complicated is entirely transparent to the developer and thankfully other than granting the request and granting of the permissions.

A

The entire process, I just explained, is handled by the aad HTTP client Factory, as shown in the following code sample now. The call to get client is what triggers the request to SharePoint online for the access token, when spfx receives the access token, it uses it to configure the client that you then use like any other HP client that I've already gone over so far.

A

In this lesson, the one thing that's unique about this API is the permission request and you should be familiar with the different ways that you can request permissions as well as how to manage these different requests, and while the Microsoft official documentation does cover these options, it's a bit sparse and it leaves a bit to be desired.

A

So I've included a link to a blog post in the lesson notes that I wrote that has some guidance on this topic and includes an additional detail on how it works so that it you may find that useful in terms of uh better understanding this entire process. Now it's very important that you also understand that a permission request is not tied to a specific spfx solution or components. Once a permission is granted within SharePoint online to another API, any client-side script within the tenant can access or request an access.

A

Token SharePoint online has no way to determine which script the request came from now. Also Microsoft does provide a way to secure a request to a specific spfx solution. This is done using something called domain: isolated web Parts, but I'm going to cover that when I talk about packaging and deployment of spfx Solutions. In another lesson, this last endpoint to cover is calling the Microsoft graph.

A

Now this one is unique in that in that other than the SharePoint API, it's the only one that other than it's the only other endpoint that has its own API in the SharePoint framework. Api now, on the last slide, remember that code snippet that I used uh that used the aad HTTP client Factory to call the Microsoft graph. Now that works, when you want to call the Microsoft graph rest API, but there's another option: that's supported by spfx.

A

The graph team has created a JavaScript SDK that developers can use to work with the rest API for Microsoft graph. This SDK abstracts away the rest nuts and bolts and provides a fluent UI that some developers are going to prefer now what the SharePoint team did is they created a special API that uses their support for calling Azure ID secured endpoints like Microsoft graph to automatically configure the Microsoft graph JavaScript API for you.

A

So as you can see from this code sample, it looks very similar to the aad HP client Factory API, except you don't have to specify the endpoint when you call get client because it already knows what the Microsoft graph client is or endpoint is. The other difference is the client that you get back, as is the graph JavaScript SDK that provides the fluent API now.

A

The support for Microsoft graph also has all the same requirements and considerations when it comes to requesting and managing permissions that we went over when I talked about Azure ad secured API so make sure you're familiar with all of those as well. Okay, that wraps up the lesson about working with third-party services and spfx solutions in this lesson, I'm going to cover what you need to know about packaging and deploying custom SharePoint framework solutions for production for production use in order to be prepared to pass the ms-600 SharePoint workload portion of the exam.

A

So, let's get started this. Let's quickly, look at what's in what this includes, as well as what it doesn't include and we're going to look at the different options that developers have at their disposal when they are preparing an spfx solution for deployment, including all the tools that are involved now: the process of packaging, an spfx solution for SharePoint, develop or deployment to SharePoint framework environments. We're also going to look at what's involved in upgrading, spfx Solutions and then we'll cover two specific deployment topics.

A

One of them is tenant scope, deployment of spfx extensions and we're going to also look at domain isolated web Parts as well.

A

Now, there's one topic that we're not going to cover in this lesson or anywhere in this chapter and that's the process of publishing apps to appsource in mid 2020, Microsoft added support for publishing, spfx solutions to appsource, that's Microsoft's, app store or public Marketplace, and this capability predated the ms600 exam and therefore isn't covered in the course as you don't really need to be familiar with it for the exam, but I've included a link to it in this.

A

In the lesson notes if you're interested in learning more about this process, okay, so let's go ahead and get started. We're going to start by looking at the process of preparing your spfx package for deployment and I've already covered some of this topic in previous lessons.

A

The topics that I covered in previous lesson are the tools used in packaging Your solution. These are tools such as Gulp and webpack. Gulp is used for to run tasks, while the spfx tool chain uses webpack to create a JavaScript bundle, that'll be included in the generated package. You should be familiar with the role that webpack serves, but you don't really need to know how much more than that for the ms600 exam. So, for example, while you can customize webpack, you don't need to know how to do this. For the ms-600 exam.

A

The same story is true about gulp. You don't even know how to create custom tasks for the ms600 exam. However, you should be familiar with the tasks and what they're used for that are included in a new project, and you can get a list of all the tasks by executing gulp within the context of a project with the dash dash tasks flag on it.

A

Another topic that you need to be familiar with for the exam is the nuances around leveraging external Javascript libraries in your SharePoint framework project. Now referencing external libraries such as jQuery. This is a common practice when creating custom, client-side Solutions, but without knowing how this works. You can invert inadvertently blow the deployment files and adversely impact the performance for your users, and you should know for the ms600 exam how to use the config.json file in an spfx project to manipulate the bundling process.

A

You need to know how this works and what the implications are, if you don't or if you do or don't elect, to include this in the project. So now, let's look at the actual process of packaging, your spfx solutions for deployment. There are a few topics that you should be familiar with in your preparation for the exam.

A

You need to know the difference between the two different packaging modes and these two different modes are the debug mode and the production or the ship mode. You control the mode by including or omitting an argument when you run the gulp task. Bundle and package solution commands using gulp.

A

Now, when you include the dash dash ship argument, you're running in the production mode, otherwise it's just the debug mode. So what's the difference? Well, the production mode creates bundles intended for deployment, and it expects these these it it expects these files are not going to be served up locally from your developer, workstation rather they're going to be deployed to their final hosting location, we're going to come back to that in a minute. The production mode will also Minify the generated bundles, removing all white space and comments to make the files as small as possible.

A

However, the debug mode will leave the files unminified that simplifies debugging and the files will be served up from a local web server on your local development machine.

A

Another topic you need to be familiar with is the Microsoft 365 CDN and how you can leverage it as part of your deployment. Now, when you create an spfx solution package, there are two groups of files that are used to implement Your solution. One set of files are deployed to SharePoint to make it aware of your custom solution, and this also includes details on where the SharePoint framework can load. The executable files from the other group of files are those used to implement the logic of your customization.

A

This includes the component manifest Json file and the components in the JavaScript bundle. Now, how does this fit into the CDN? Well, spfx, solutions by default.

A

They have a property called include client assets and the package solution.json file and that's within the project, and it's all it's by default set to true- and this tells the build pipeline to include the second group of files in the SharePoint package when you run the packaging process, if you deploy the package to a SharePoint online site and that the tenant has the Microsoft 365 CDN enabled SharePoint will extract the SharePoint framework, Solutions JavaScript bundle and manifest file and deploy them to the Microsoft 365 manage CDN. Now this greatly simplifies deployment for customers.

A

However, this might not work for all scenarios, so you should also be aware of the deployment options when Microsoft 365cn is not available, and in that case customers can deploy spfx Solutions job, the JavaScript bundle and the Manifest file to another publicly available areas or even another CDN, and in this case you should know how to configure a solution to deploy these files to a CDN or a location that they control.

A

You should also know some common scenarios when customers may want to use their own CDN, for example, maybe they want more control over the cdn's settings than the one managed by Microsoft 365.?

A

Maybe uh maybe you wanted to leverage the IP or geolocation filtering of content and because cdns aren't used to secure files, rather they're used to distribute them, maybe a customer situation. Maybe they want to ensure the files are not publicly accessible. So that's another option they may want, or maybe the deployment Target isn't SharePoint online. Maybe it's SharePoint server 2019, which is an on-premise installation, and thus it doesn't have access to the Microsoft 365 or the Microsoft 365 CDN. These are just a few of the scenarios.

A

The point is, though, in that preparing for the exam, you should be familiar with on how to configure a project to both use the Microsoft, 365, CDN or another location that you control to host the packages manifest in JavaScript, bundles.

A

Now, at this point, we've covered everything you need to know up to actually deploying your custom Solutions. So let's tackle that topic right now, when you deploy your spfx Solutions, you upload and publish them to a special Library called an app catalog.

A

Now SharePoint has two different types of app catalogs that support deployment of solutions at different scopes.

A

Every SharePoint tenant has a single tenant, app catalog, created and managed. Typically during the initial setup and creation of a tenant, all spfx components included in Solutions, uploaded and deployed to the tenant. App catalog are available for installation and use within any SharePoint site across the entire tenant. The other option are site collection, app catalogs, and these act the same way as a tenant.

A

Scoped app catalog, except that the spfx components, Within These app catalogs, are only available for installation and use within the site collection where they were deployed, and this gives SharePoint administrators the ability to limit the scope of who has access to select site collections now site collection, app catalogs must be created in each site collection by an administrator as they weren't created by default when the sites were created and furthermore, these must be created via the console usually either via the SharePoint online Powershell commandlets or using the CLI for Microsoft 365.

A

That was formally known as The Office 365 CLI. You should be aware of how to create the site collection, app catalog for the ms600 exam. Specifically, you really only need to know the SharePoint online Powershell options, because the CLI is a community-based project that is not going to be you're not going to be tested on now, once you've deployed and installed Your spfx solution, you know one of your users or customers is going to eventually request a change.

A

Maybe it's a bug or a new feature, or maybe that button need to be a little more blue. In these cases, you should be familiar with the aspects of updating and upgrading spfx Solutions and This falls into multiple different topics.

A

Some you should be familiar with for the ms600 exam questions, but also in understanding just how everything works, and, while you're not likely to get a question about about this, you should also be familiar with the process of checking to see if your project contains references to outdated dependencies as well as how to upgrade these different dependencies again. You're not going to be tested on how to do that, though, you should also be familiar with the process of adding additional components to existing packages. So, for example, say you've deployed a package.

A

It's got a single web part, but later you want to add two more web parts to the same package. How do you handle this or how is this being handled by spfx? Well, in a nutshell, because components are provisioned using SharePoint features under the covers. You need to get a ship, you need to get SharePoint to reactivate the feature.

A

The way you do this is by incrementing the solution's version, which is going to be set in the package solution, Json file and then you're, going to upgrade the previously installed app instances to get that feature to get activated or upgraded. The upgrade action will then trigger SharePoint to activate the new features in the solution package, which will provision the new site components in the site, but you also need to know how to SharePoint handles code changes when packages are upgraded.

A

Many SharePoint developers are surprised that simply changing the code and uploading a new package without making any changes to a version number or actively upgrading installing the app actually upgrade the existing code. So in other words, regardless of anything else, when you update and install spfx package the code, the new code files overwrite any previously deployed files- and this happens the moment the package has been uploaded and trusted and then finally, you need to be familiar with the version numbers SharePoint framework Solutions contain multiple version numbers that I've mentioned before.

A

There's the version for the entire package that's deployed to SharePoint best defined in the package solution, Json file, then there's also the version number of the individual component found in each of the components manifest files that are set right beside the actual code file for that component, a web part and extension Etc, and then there's the component version that's defined in the package.json file. This number is only used when the component's version number is set to an asterisk.

A

Think of this as an easy way to set the version for all components within the package to be the exact same version. Another topic that you must be familiar with in preparing for the ms600 exam is the tenant scope deployment, and this is an optional deployment option for spfx Solutions. When a solution that is this capability has been enabled, the administrator is given the option to make the solution available to all Sites within the organization. When the solution in is deployed in this manner, all components are immediately available in all Sites across the tenant.

A

Once the package has been uploaded and deployed to the tenant's app catalog. The way that you're going to configure this in a solution to support this deployment option is by setting the skip feature, deployment property equal to true in the package solution, Json file- and this is actually set. When you create a new project and answer the question: do you want to allow the tenant admin the choice of being able to deploy the solution to all Sites immediately without running any feature, deployment or adding apps and sites? It's a lot answer.

A

Yes, that sets the value true.

A

Now, then, you also need to understand the impact of web Parts, because when a solution that contains web Parts is deployed to the entire tenant, this way they're immediately available in the uh in the SharePoint or in the web, part picker, Tool uh tool pane uh in all SharePoint sites and then, when a solution that contains extensions is deployed to the entire tenant. This way they are immediately available and added to all SharePoint sites, this time that they're installed or deployed to the tenant app catalog.

A

Now the last topic I need to cover uh that you should be familiar with in your exam. Prep are domain isolated web parts. Now, in a previous lesson, I covered how the SharePoint framework and SharePoint online addresses the oauth 2 access token acquisition process for an spfx component to call an Azure ID secured endpoint.

A

Now one aspect of this is that any script in the tenant can use this same process to obtain an access token, not just an spfx solution, so domain isolated web Parts introduce a way to isolate access to Azure ad secured apis so that only specific spfx web Parts can obtain access tokens for the API.

A

Now this is done by enabling uh a setting called the is domain isolated property to true in the packages package solution Json file. Now what this does is it renders the web part not in a div on the page, but rather in an iframe, and that iframe is hosted on a domain that is unique to this particular component.

A

In addition, when the solution is provisioned, SharePoint Provisions a unique uh Azure ad application for the spfx solution and then when the spfx component requests the access token SharePoint online can ensure the call is coming from the unique domain for the specified Azure ID application, which has been granted permissions to the secured API. You should be familiar with how domain isolated web Parts work, the scenarios where they're suitable and how they're different from non-domain isolated web parts that call the Azure ad secured apis.

A

If you have any questions about what I've covered here, please drop a comment below or let me know if you want to see more videos about SharePoint framework development or something else by dropping a comment below. If you like this video, please give me a thumbs up and subscribe by Smashing that big red subscribe button below the video, so you'll see when I publish more videos for web and Cloud developers on Microsoft 365 and Microsoft Azure topics, I'm Andrew Connell. Again, thanks for watching I hope to see you next time.