Microsoft 365 Community Community Demos, 22 Oct 2020

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Dynamically select field customizer for SharePoint lists using FieldRendererHelper

Description

In this 6-minute Developer - focused demo, Alex Terentiev shows using PnP reusable React Fields Controls for lists. The FieldRendererHelper class automatically suggests needed component type Field Control based on current Field parameters. Use one Field Customizer for any type of SharePoint call/column type. Functionally the control evaluates the field and type and calls in the appropriate control to render data type on the page The Field Customizer delivers additional CSS styling to out-of-box SharePoint column behavior. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on October 22, 2020.

Demo Presenter: Alex Terentiev (Sharepointalist) | @alexterentiev

Supporting materials:
• Documentation - FieldRendererHelper class | https://pnp.github.io/sp-dev-fx-controls-react/controls/fields/FieldRendererHelper/
• Repo - react-field-pnp-field-renderer-helper | https://github.com/pnp/sp-dev-fx-extensions/tree/master/samples/react-field-pnp-field-renderer-helper

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

A

Hello, everyone, my name is alex rentiff, I'm an office, deaf mvp and microsoft. 365, pnp team member and this demo is about pnp, reusable react controls and how we can use field renderer, helper utility in your field customizers.

A

So uh in our react, controls library, we have a bunch of field controls, you can get to them through uh top navigation. So if you click on, kill controls, you'll see like a bunch of them for different types of sharepoint columns, and these controls are actually help you to render the components render your field customizers, similarly to out-of-the-box behavior, with ability to provide additional styling, additional css or classes.

A

But today what I want to talk about is about this field. Renderer helper class. That additionally allows you to automatically select one of those components based on the current um type of sharepoint column.

A

What it why it is beneficial because, basically, you can create one field customizer and apply to any type of sharepoint call. So, for example, here I have a demo list where I have multiple different columns, so I have a date. I have a multi-lookup, I have some choice picture and so on so forth and basically, if you want to modify uh each and every column in this list, you would probably need to create different uh field customizer for date, uh different field customizer for for lookup and so on so forth.

A

But using these uh renderer helper you can create the only field customizer and use it for any call. So let me show you a little bit of code, so it's pretty uh sorry pretty easy. uh So I have my field customizer here, uh which is a little bit uh modified from initial one.

A

We have some additional properties uh that are passed to our components, so uh I'm passing list item accessor from our event on render cell field value from development and also some additional css properties that will be used in our react component in our field. Customizer react component. uh What I am actually doing in component did mount. I am getting the field renderer based on list item accessor and current field values. So basically the magic here is that inside the field render this helper class, it will go through the list.

A

Item accessor, uh look at the current field. Look at this type, it will grab the uh proper control for this type of the column and it also modify, if needed, the value of this uh uh cell in this field in this field to correctly display it on the page.

A

So, for example, for the text uh column, we just need to display the text that we got from the field customizer but, for example, for lookup we will have a json uh object that we need to parse and correctly display it with a value and lookup id as well. So let me actually grab the url debug url for this example here and I'll just apply it to this list and what we want to do. First, let's change the behavior of journey date.

A

So instead of this one, I will put journey date.

A

And, let's refresh to see that debug is working okay here it is so, as you can see, it's basically almost the same ui as it was for out of the box behavior. The only difference that we have some style supplied that we provided from our field customizer.

A

We can do the same for uh visited countries, for example, which is a a multi-lookup.

A

And here we go again: first of all, the style is applied, but also we still have the functionality as in out of the box behavior. So if I click on uh the value, uh you will see the pop-up with the uh kind of value from the uh looked up uh list same here. Even if it's multi-value, we still can click on it and um see the value for the for the uh looked up uh column.

A

So, basically, that's pretty easy. As you can see from the code perspective, it's not so much. We just need to uh get the uh render in component detmont and then in our field. In our render method, we are just providing this field renderer and basically nothing else and again this will work for any type of sharepoint column and it allows you to provide uh additional css uh properties and uh class name. So, basically, even your scenario, you just need to provide additional styling to out-of-the-box behavior of your sharepoint columns.

A

uh It's probably the best and the easiest way for you to go and implement the functionality and that's pretty it. From my end, it's pretty easy and simple back to you, patrick.

B

Very cool, thank you for that demo great to see that and it might be considered simple, but I think a very clean and functional demo, which is really nice to see. uh You know exactly how stuff like that works. So thank you very much to alex.