Microsoft 365 Community SharePoint, 29 Jun 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: SharePoint Framework at Microsoft - Reusable Accelerator Components

Description

📺 In this 11 minute developer focused demo, Daniel Turley shows us React components that are being used in the SPFx Solution Accelerator. He starts with a quick overview on the accelerator, followed by a walkthrough to several components like the Entity Panel Component, the Async Data Component, the User Picker Component, the Validation Component, the Localization Component, the Responsive Grid Component, and more.

This demo is taken from the Viva Connections & SharePoint Framework Community call recorded on June 29, 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

Foreign, my name is Dan Turley I'm, a full stack developer at avanod I've been working with SharePoint for over 10 years and, most recently as part of the productivity Studio utilizing shipment framework to build business. Apps today, I'll be showing you some of the react components we have in our spfx solution accelerator but as 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. Over that time. Accelerator is open source and we've published a complete app to demonstrate its features. The SharePoint framework sample is named, react Rhythm, business calendar.

A

All right, the accelerator has the following: high level features: we have guidelines for solution, structure to organize their domain models, 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 groups and more. We also have Dynamic provisioning of SharePoint lists for app setup and upgrade experiences.

A

There are react components for view edit panels and dialogues, asynchronous data live update, controls and Wizard, and more and we'll be talking about these. Today. We also 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 unless you're giving a demo.

A

All right, let's take a look at the react components, so our first component today is the entity panel.

A

This is essentially a wrapper around the fluent UI panel component, but it adds all that boilerplate logic. You need for a details screen slash editing experience in the example screenshot.

A

This is a panel in the display mode and we have a command bar across the top followed by a header region which can be used to display a summary of the item. Then there's a Content region where you can display the details of individual fields uh to open the panel. You provide it with the entity and it can also be put into display mode or edit mode there's even a read-only mode.

A

You can use buttons in the command bar, for example, to let the user switch modes.

A

We have built-in Logic for validation and persistence, so, for example, in edit mode, you could Define a save button to invoke the panel's persistence logic. That logic will first check if the entity passes all of your validation rules and either display validation, errors or execute your asynchronous persistence logic.

A

Similarly, there's built-in logic you can use for a closed command or cancel command, which can check if the user has made changes and pop up a dialog to confirm if they really do want to discard their changes.

A

If the user wants to save their changes and the validation rules pass, there is a built-in spinner that appears well, your persistence logic is executing and if there's any failures, there's a built-in error message bar there are variants of this component. If you'd like to render the experience in a modal pop-up instead of a panel or if you just want to render the content area in line somewhere on the screen without using any panels or dialogs plus, there are variants for all of the above.

A

If you want that boilerplate functionality, but you aren't using an entity for your data.

A

Next up is the async data component. This component is useful as a boundary where you have data that needs to be fetched asynchronously.

A

While the data is initially loading, it will display a fluent UI overlay with a spinner like the one shown on the slide in the center of the region.

A

In the case of an error, it will show a message bar and the sample code here on the screen. We have an interface for our event service and that service exposes a property named events async that returns an I async data object.

A

That object is a generic class that holds your data, but it also has stake indicating whether that data is loaded or if it's still loading or if it's being saved or if there was an error, then Below in our react component in this example we're using a hook to get the events async value from the service, and we simply pass it into an async data component, which then takes care of the boilerplate UI for rendering Spinners or an error message.

A

The children of the async data component is a render prop a function which receives the actual data that you can then use to render whatever UI you need, and in this example, it's an array of events and we're just passing it on to a custom component.

A

The accelerator also has a user picker, which is which is really a wrapper around the fluent UI people picker, but it utilizes our directory service, which uses PHP JS to call the SharePoint utility API for searching principles.

A

There are settings to limit the search to just users or just groups or to include both. You can also limit the search to just members of a particular SharePoint group, there's handy functionality that will resolve all the accounts if you want to copy and paste a list of emails into the box and but most importantly, this component helps to unify the different representations of a quote-unquote user to the fluent UI uses. The I Persona props interface to represent people.

A

Sp effects has the SP user class. Sharepoint has principal info and site user as exposed by the PMP Library and, of course, graph has its own types, our user class and this user picker component help to unify all those different concepts of a user.

A

Next up, we have a validation component which takes in a rule or a set of rules and wraps any UI elements such as a text field and displays a message in bright red text if the validation fails so to use this component first, what you'll want to do is Define your validation rules on your entity class.

A

In this case we have an event entity and we've divided a couple of rules for the title field. The title field is required and the value can't be more than 255 characters, long and so below that you'll see how we can use the validation component we pass in the entity, we are currently editing and we pass in the rules that apply to this particular field. In this case the title field, and we render our edit control in this case a basic text box.

A

On the right, you can see a couple of examples of user inputs that have failed the validation.

A

Next is the localized component. This is one of the newer components and the idea here is you're building a UI where you have input controls that you need to place inside a string of text that you want to be able to localize.

A

So in the example screenshot, this was taken from the screen for configuring, a recurring event in the rhythm of business calendar, where the user can specify that the event recurs on a specific day of every so many months.

A

So the first thing to do is Define the localization string, and this can use the standard localization, plumbing and spfx you'll notice. There are some token terms date and every that are in the curly braces in the string.

A

Then, in our react code we can render a localized component passing in the localization string and an object whose properties are named for the bracketed token terms found in the string and the localized component will render the string is text and then it will render the specific components in place of the token terms.

A

Next up is the responsive grid component. Well, it's a set of related components, responsive grid grid row and grid col for column. These are very thin: wrappers around fabric core's, 12 column, responsive grid. So, instead of coding up a series of div elements and constructing a string of class names for the column sizes, we have react components for the rows and columns and props for all the different screen sizes, small medium large.

A

It supports all the same. You know Push Pull and visibility functionality, so the code on the left and the right are equivalent, but I think the code on the left is much more readable.

A

A

S that I don't have time to go into detail today, such as the live update, components which are wrappers around traditional input, components like text, Fields, toggles check boxes. All of that used for implementing the live, update, experiences, there's a wizard component that helps you build an experience, split across multiple screens, where the user will proceed from one screen to the next, and it includes logic like validating input on the current screen before navigating or fetching asynchronous Data.

A

Before displaying the next screen, there's a Time picker and a length of time, picker there's a the date Rotator, which you can see in the top right corner. It lets you define the granularity and to custom format the selected date.

A

So you can use this to build an experience where the user can navigate from one date to the next or one week to the next or think of a more complicated scenario where the user might be navigating from one fiscal quarter to the next and instead of rendering a date, you'd maybe render it as FY 23q4.

A

All right! Well, that's enough for today! Thank you so much back to you, Gary foreign.