Microsoft 365 Community SharePoint, 27 Jul 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SPFx framework at Microsoft - Provisioning structures and assets as part of your solutions

Description

📺 In this 10 minute developer-focused video, Daniel shows the schema provisioning feature of the SPFx Solution Accelerator. He starts with a quick overview on the accelerator, followed by explaining that the idea of the Solution Accelerator is to first define a schema and then provision that. He then walks us through how to define a field, a view, a list with several options and more.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on July 27, 2023. Join the next call! Download recurrent invite from https://aka.ms/community/calls

✨ Presenter
Daniel Turley (Avanade)

📖 Learn more
• SPFx Solution Accelerator sample: https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-rhythm-of-business-calendar

💡 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

My name is Dan Turley and I'm. A full stack developer at avanod I've been working with SharePoint for over 10 years, most recently as part of the productivity Studio utilizing SharePoint framework to build business apps.

A

Today, I will show you the schema provisioning feature of our spfx solution accelerator, but first is always a quick overview of the accelerator.

A

It's a set of patterns, reusable code components and tools, I created for building business apps on the SharePoint platform that has evolved over the last six years and we have used it in the productivity Studio to build a dozen business apps. In that time, 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

Accelerator has the following high level features: we have guidelines for solution, structure, to organize your domain model, Services components and schema. We have a robust domain entity model with features like change, tracking validation and relationships, there's also a services framework with provided services for SharePoint list data, time zones, users and groups and more.

A

We also have Dynamic provisioning of SharePoint lists for app setup and upgrade experiences, and this is what I'll be talking about today.

A

uh There are also react components for View and update panels and dialogues. Asynchronous data live update, controls, Wizard and more. We have tooling to support development teams and environments and, last but not least, live update, ensures your users are always collaborating with the latest data.

A

All right schema provisioning with the xbfx solution. Accelerator is done in two steps.

A

The first is to declare your schema with all of your elements, such as Fields lists and views, and then you run the provisioner to create those elements on the SharePoint site. We have interfaces that help. You define all of your schema elements in a typesafe manner and apple have one schema object, which should Implement I element definitions.

A

This interface expects you to specify the version of the schema which is used when performing app upgrades.

A

It also references each of the lists that are in your schema and those lists then reference your views and Fields after defining your schema object elsewhere in your code, you'll want to instantiate the element, provisioner class and call the insure elements method. Passing in your schema object. This method ensures all the elements in your schema exist on the current site and if they don't, it creates them under the hood.

A

Of course, we use the pmp.js library for creating all of these schema elements, but the difference here is since pnp.js is a thin wrapper for the rest, API, it's an imperative model, whereas what we've created here is a declarative model and Veterans of SharePoint development will also remember creating elements, XML files to declare list instances and other schema Elements, which you can do in spfx as well.

A

But we think this approach is pretty neat because using the declarative approach, with the addition of compile time type checking to Define your elements, but then using imperative code for the actual provisioning enables more Dynamic scenarios.

A

So, let's look at how we Define a field for our schema. The first example here is the location field, which is going to be a simple single line: text field.

A

We use the matching interface in this case, I text field definition to help us Define the object that describes our field. This allows us to do compile time, type, checking and sure we are correctly specifying all the properties for our field.

A

The next example is a date time field, you'll notice. The name is event date, but the display name is start time when creating a field. The element provisioner will first create the field using the name property which will become The, Field's internal name in SharePoint, and then the provisioner will update the name of the field using the display name value, so you can have a more user-friendly name in the SharePoint interface.

A

If you want the internal name and display name to be the same or you don't care about the display name, that property is completely optional for all of the field types. In our last example, we are creating a user field. This field will allow multiple values, but it will only allow the user to select accounts and not groups.

A

As you can see, on the right hand, side of the slide, we support nearly every major field type in SharePoint, including numbers, Choice Fields. Yes, no lookups, taxonomy, even ratings.

A

All right, let's look at how we Define a view. As you can see it's similar to the other types of schema elements. We have an interface eye view definition, which keeps everything type safe.

A

We have standard options like giving your view a title, specifying how many rows to return, and if that view limit is a hard limit or if it should return, paged results and whether or not this is the default view on the list.

A

The fields property is actually an array of the fields to show in the view, and these are objects like the ones we saw on the previous slide.

A

We have a couple of helper functions in this case, we're using one named include standard view fields.

A

What this does is automatically include the title field and some other metadata fields that are needed for loading and persisting entities, as well as the functioning of the live update feature, and you can also specify a query for The View using good old, camel syntax in this example, we're setting a default sort order, but you can also use this for grouping and filtering.

A

Foreign last we want to define a list. The interface for lists is I list definition. We have title description and template fields. The supported templates are generic list document, Library picture library and the events list.

A

The dependencies property enables you to specify other lists. That list this list depends on the element. Provisioner will take care to provision the lists with respect to any dependencies, so, for instance, in this example, this is uh the refiner values list has a lookup column to the refiners list. That's the field underscore refiner field, so we would need the refiners list to be built first before we try creating the lookup column in this list.

A

All right, there are a couple more advanced features, I want to highlight when you're defining a list. So this is the same list definition from the previous slide, but I removed all the standard properties. So we can focus on these two properties here.

A

The first property is list items, and this allows you to add some default list items when the list is created.

A

The next property allows you to configure permissions for the list. If you specify permissions, the provisioner will automatically break role inheritance on the list and performs the specified role operations such as adding the site Owners Group. With a role of administrator to the list permissions. You can also specify custom, SharePoint groups here all right. Let's see a quick demo of schema provisioning.

A

Okay, I have here a SharePoint site, I created and I. Just want you to note that the site contents shows us all the default libraries and lists that every site has when it's first created.

A

There are no other custom lists in this site and I'm going to go over to the home page I have the rhythm of business calendar web part added to this page, and since there are no lists in this site, it's going to run the first Run Wizard experience and what I'm going to do is click this let's go button and what this does is we'll use the element provisioner.

A

We were just looking at and using the schema defined in the app to configure all of the lists and Views and Fields that we need to run this app on the site. So in a moment, once everything is provisioned, the main screen of the app will get displayed.

A

And so now, what I'm going to do is switch back over to the site contents and refresh.

A

And we can see now various lists were created for the Rob calendar and I'm going to look at the settings for one of these lists.

A

You can see a few Columns of various types were created on this list and also a couple of views were created.

A