Microsoft 365 Community SharePoint, 10 Aug 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SPFx framework at Microsoft - Accelerator Services Framework for reusable services

Description

📺 In this 13 minute developer focused demo, Daniel Turley shows Accelerator Services Framework for reusable services. He starts with a quick overview on the accelerator, followed by a walkthrough of the Services Framework, including several ready-to-use services, plus build your own custom services, ServiceManager class handles initiation, respecting dependencies, Access services from other services through constructor dependency injection or from React components through prop injection or hooks.

This demo is taken from the Viva Connections and SharePoint Framework community call 10th of August 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenters
Daniel Turley (Avanade)

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 & Power Platform Unified Sample gallery - https://aka.ms/community/samples
• Microsoft 365 & Power Platform Community in YouTube - https://aka.ms/community/videos
• Microsoft 365 & Power Platform - http://aka.ms/community/home

Sharing is caring! You are awesome! 🧡

A

A

I'm, a full stack developer at avenard I've been working with SharePoint for over 10 years, starting with SharePoint 2010, most recently as part of the productivity Studio utilizing SharePoint framework to build business. Apps.

A

Today, I will be showing you the services framework and the common services that are part of their our spfx solution accelerator, but as always, first a quick overview of that accelerator.

A

It's a set of patterns, reusable code components and tools, I created for building business apps on the SharePoint platform. It has evolved over the last six years and we have used it in the productivity Studio to build a dozen business apps over that time. The accelerator is open source and we have published a complete app to demonstrate its features. The SharePoint framework sample is named, react rhythm of business calendar.

A

The accelerator has the following high-level features: we have guidelines for the solution structure, to organize your domain model, Services components and schema. We have a robust entity domain model with features like change, tracking validation and relationships, there's also a services framework with provided services for SharePoint list data, time zones and users and groups, and more- and this is what we'll be talking about in detail today.

A

We also have Dynamic provisioning of SharePoint lists for app setup and upgrade experiences. There are react components for view edit panels and dialogs asynchronous data live update, controls and more. We also have tooling to support development teams and environments and, last but not least, live update, ensures your users are always collaborating with their latest data.

A

Let me start with an overview of the services framework.

A

We have several ready-to-use Services, which I'll go through on the next slide and, of course, the ability to create custom Services, which I'll walk through towards the end of this session. We have a service manager class which gets created very early on in your when your app starts.

A

You pass it the list of services that the app needs and it ensures each of those Services gets initialized respecting any dependencies.

A

For example, you can declare that your Custom Service depends on some other services and each of those other services will be initialized first in parallel, if possible, your services can actually use those other services during its own initialization and, of course the initialization is asynchronous.

A

Under the hood, the service manager uses service scope, which is the standard way of registering and consuming services. In spfx, however, we have some additional features. On top like the initialization and the dependency capabilities, surfaces can be consumed in several ways. The first is from another service. You can have the dependent service injected into the Constructor and from your react hooks, you can either have the services injected through props or you can access them with hooks.

A

All of these examples along the bottom, which I know are a little small to read. There are examples of consuming our directory service in order to access the current user.

A

The spfx solution accelerator includes several ready-to-use services. We have a developer service. This one enables you to register custom helper scripts that you can then execute from the dev tools console in your browser.

A

We also have a directory service which handles everything to do with users and groups, the interface utilizes, our common user class, so that everything is compatible with your entity domain model and our common components like the user picker. This service exposes the current user and their permission level for the site. It enables you to resolve, accounts, search for people and ensure they are added to the site's user information list.

A

All of these utilize, the pmp.js library, along with caching and batching, for efficiency for groups. It helps you with retrieving the well-known owners and members and visitors groups for your site, as well as custom groups by title or by ID.

A

It retrieves the metadata about the groups as well as the membership, and enables you to make changes and updates to the group's metadata and its memberships.

A

Next is the domain isolation service, so domain isolation is a feature in spfx where your web part runs in a different domain inside an iframe on the page, and that is so that you can have extra permissions that you might want to isolate to your webparts code and not exposed to the rest of the page. So this service helps with translating URLs between the main tenant domain and the isolated domain.

A

They can also retrieve the list item for the current page, which is useful if you want to dynamically configure the permissions for the page where your app is running. It can also help you with constructing the site's composite ID, which is needed for certain graph calls. So all of these things are easy to do from a normal web part, but there are challenges once you enable domain isolation.

A

Next up the live update service handles the subscriptions to lists so that we get notified when items are added, updated or deleted, and imagine manages a related cache which supports faster, app initialization.

A

Then we have the SharePoint service which handles loading and persisting list item data as well as configuring item level. Permissions and it can do a few other things related to lists and libraries and lastly, the time zone service helps with mapping between SharePoint time zones and moment.js time zones, as well as listing the available time zones on your site and getting your sites configured time zone.

A

Foreign I want to show you the developer service in a little more detail like the other services. You can access this one from within a custom service or from a react component, and you can register custom functions that you can then invoke globally from the devtools console.

A

So in this, in this example code, this is a class for a custom service in our app The. Constructor is consuming the developer service and below. That is a private object. Where I've defined a custom function named obliterate.

A

This function is accessible via a Dev field that is added to the window object, so you can access them globally, but only if the code is running in the workbench page or, if you add, is Dev equals true in the query string of your url notice, the screenshot on the right, if I were to open a workbench page and add the web part that uses the service I can then go to the console and type in dev.schema.obliterate and execute the function that I registered from within with the developer service.

A

I found this to be useful. If you need to put your app in a specific state or to execute a specific command where you might not have any UI to action it so, for example, we might have a service like this one, which is responsible for retrieving user settings and configuration and coordinating first run experience. So on first run, let's say we're using the schema provisioner to automatically create lists on the site.

A

But if you want to test the first run experience Again by quickly deleting all those lists you can have a function like this one. The developer can run by simply typing in Dev schema obliterate in the console and another use case that I really like is around creating sample data. So imagine you're trying to develop some functionality, but when you run your app for the first time on a new site- or maybe you deleted all your lists because you needed to make a change to your schema.

A

And now you don't have any data to work with for testing your feature. So I like to create a Dev script, that I can run to instantly create a bunch of sample data.

A

Let's talk about how to build a custom service, let's take the events service from the rhythm of business calendar app.

A

The first thing you would want to do is create a folder for the service under the services folder, where we put all of the files to the service. Choosing a short name is ideal here, we're just calling it events.

A

The two important files to call out in this folder are the events service, descriptor and the online events service.

A

The descriptor file will contain several important declarations for the service, while the online event service file will contain the implementation of the service for the SharePoint online environment.

A

Let me briefly mention that our services framework enables you to have several implementations of your service, which are chosen at runtime, depending on the environment such as modern SharePoint or classic SharePoint, or when you run unit tests, there used to be an environment for the local workbench, but we removed that when the local workbench was deprecated and I also suspect that usage of classic SharePoint is very low.

A

All right, let's look at the descriptor file, so there are several things that we'll need to define. The first is a symbol. The symbols in JavaScript are Primitives that are used to create completely unique identifiers. This serves as the identifier for our service.

A

Next, we'll Define an interface for our service, and this has methods to retrieve events as well as adding persist, events and other business logic like enabling the user to add this event to their Outlook calendar or generating a deep link to the event. The kind of business Logic the developers often put directly in the UI layer, but can really benefit from being separated out into a Services layer.

A

Then we'll want to Define some helpers for consuming this service. This is how you would Define a react hook.

A

And lastly, we create a descriptor object. This object ties all of the pieces together, it takes the symbol, we created the interface we defined any dependencies. The service has and the various implementations of this service, and this descriptor object is what will pass to the service manager during startup of the app.

A

A

Let's take a look at how we would implement the event service, so here we are defining a class that implements the interface we previously defined in the descriptor file.

A

Next, we'll Define a Constructor. If the service has any dependencies we need to consume, the service happens to have a lot of dependencies. You might notice the first one. There is the context as the context from the web part and it's always consumable through the services framework, so you can access the page context or the dynamic data provider or any of the clients and factories.

A

This also provides the context of your building, an extension as opposed to a web part, and you might notice the teams.js below the context that provides access to the team's SDK. If you're running in teams, you'll probably want to store these dependencies in a class level field for later use.

A

Then we'll write the initialize method.

A

This can run asynchronously as I mentioned, and because we listed all of those other services as dependencies, we can actually use their full functionality if needed, while initializing this service, because the service manager will have made sure that they were all initialized first and the final part is to implement all the other methods that we defined on our interface.

A

So that's the anatomy of a custom service in the spfx solution, accelerators services, framework.

A

And that's all I have for today. Thank you so much and back to you, Bo, o.