Microsoft 365 Community Transform SharePoint Add-in model solutions to modern development patterns, 30 Mar 2023

Previous Meeting Next Meeting

⏯

youtube image

►

From YouTube: Transform classic XSLT based view extensibility to List Formatting JSON definitions

Description

This module introduces you to List Formatting to format columns, views, and forms in the modern UI of SharePoint Online and Microsoft Lists.

This video is part of a series in a playlist about "Transform SharePoint Add-in model solutions to modern development pattern": https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe

➡️ Next video on this series - https://www.youtube.com/watch?v=3u1ei8hcGG8&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=8
⬅️ Previous video on this series - https://www.youtube.com/watch?v=ipqQiJ_MbNM&list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe&index=6

#Microsoft365 #UI #UX #ListFormatting #SharePointOnline

In this video, you will learn about

- Customizing rendering of list columns
- Customizing rendering of list views
- Customizing rendering of list forms

📖 All guidance content including code samples can be found here: http://aka.ms/sp/add-in/modernize/samples

✨ Presenter
• Paolo Pialorsi (PiaSys.com)

📃 Agenda
0:00 Introduction
1:42 Demo
1:58 Column Formatting
5:00 Column Formatting with custom JSON
5:20 List View Formatting
6:32 List Form Formatting
9:45 Formatting with PnP Provisioning

📝 Learn more
• YouTube playlist for this video series - https://www.youtube.com/playlist?list=PLR9nK3mnD-OXJLA29Q0Xk7psbAUqzQZwe
• Use column formatting to customize SharePoint - https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting
• Use view formatting to customize SharePoint - https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/view-formatting
• Configure the list form - https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration
• List Formatting Samples - https://pnp.github.io/List-Formatting/

💡 Learn more about the Microsoft 365 & Power Platform community
• Microsoft 365 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

Hi there and welcome to this video about upgrading from xslt Custom template, rendering in SharePoint classic to the new SharePoint list, formatting in fact just to set the context. We know that in the SharePoint classic world we use to extend the rendering of lists and libraries using, for example, the xslt list view web part and providing a custom xslt file to do custom, rendering of the UI. We also used to create custom. Web parts are built with the SharePoint ID model to do custom, rendering of the UI of lists and libraries.

A

Nowadays in the modern UI of SharePoint online, we can simply rely on the list formatting capability, which is an out of the box, one really simple: to use and really powerful. In fact, with list formatting, we can extend The Columns of a list using the conformatting.

A

We can extend the landing of a whole list using the list view formatting, and we can also extend the rendering of forms to add or update items using the list form formatting capability. All of them are based on a web-based designer that you can use through the browser where you are, and you can also dig into it and create really highly customized Json templates that you can build, for example, in Visual Studio code and then copy and paste inside the web-based designer of the list or library that you are customizing.

A

So let me move to the demo environment and let me show you how you can do that in practice.

A

So imagine that you have a list like a travel request list like this one, that you created using the ailer Microsoft lists or SharePoint online, and you want to customize the rendering of this list. One option that you have is to customize a single column or single field. You can click on the icon right here. Just beside the column title, you can select column settings format discount by default. You can use the web designer.

A

So if you click on conditional formatting, you can define a set of rules and for every single rule you can Define the sample formatting of the text.

A

So here, for example, if I click on the three dots I can edit the rule and I can say that my rule will be that whenever the trouble duration in days is equal to and I can select, the value, 1 or I can select, or if the travel duration is equal to 2, then whenever this rule will be applied, the style that I want to apply to the column is, for example, the green one, meaning that a short vocation or a short travel request is always allowed.

A

Then I can say that I have another rule so that if the travel duration in days is actually equal to 3, then okay, but okay, so I will select the gold style and I can do the same. If the travel duration is equal to 4, just to make an example or to five and then we can select a new style for the item and, for example, this type will be the pink or the red one.

A

So, as you can see here we have a set of rules based on the actual value of the column. We will change the style and just to let you know, the style can be more than just a color. In fact, you can select a font, you can select an icon, you can select border so plenty of options to customize the rendering when you're done, you can save it, but you can even do more.

A

There is an advanced mode button right here that you can click and you will see the actual Json generated by the designer for you.

A

If we copy the value of this Json and we go to visual studio code, we can see right here that this template simply defines that with the div element as the main element, which would be rendered with the predefined style, then based on an operator if the travel duration field under a square bracket- and you see with the dollar and the name of the field- is equal to 1 or it is equal to 2, then we want to apply the green style.

A

Otherwise, if it is equal to 3, we want to apply the gold and if it is equal to 5, we want to apply the pitch one. So this is the rule that we just defined using the web designer, but we can define a better rule, for example, so we can say that, rather than specifying all of the values for the travel duration field, we want to use a range.

A

So let me slightly update the template, and here we can say that the operator we want to apply is lower than or equal to 3, so the first set of values will be one two three, then four and then five. So let me copy this Json and let me paste it back into this Advanced editor.

A

Let me preview it. As you can see. Now we have a better rule which I can save and which will format all of the values that I have in my column. Now, let's say that we want to customize also how we render the list itself and not just the column. You can click here on the list of views and you can select format current View.

A

By doing that, you can play with the out of the box, alternating row style or you can play with more advanced rules and again you can even click on the advanced mode. If you select this one here, you will have the Json Auto generated by the web designer for the alternating rows and, as you can see here, let me copy it and paste it in Visual Studio to have it more readable.

A

We can see that here. The operator is that whenever the modulus of the row index with 2 is equal to zero, so if the row is odd or even basically we will change the color and if it will be gray or no fill based on the row index, so again really simple scenario and you can preview and save it, but you can even do more with this web-based design. For example, you can say that you want to customize how the form to add or update an item will render.

A

So if you click on new in this list in the upper right corner, you have this Icon. By clicking on it, you can first of all choose the columns that you want to see in The View and if that's not enough, you can also configure the layout here. You have for the header, the body and the footer of the form, the capability to provide a custom Json to provide a fully customized rendering for your form.

A

First of all, talking about the header. We can use this Json, which I can preview right now and which will basically render a gray box with the Avatar of the user, who is requesting the travel, requester and the destination of the travel request. Let me show you again in Visual Studio code, how the template for the either looks like we generate a div, we Define the basic attributes and style, and then we say: okay in the children of the header.

A

We want to have a div element in which we will have another children, which will be an image element which will have as the source of the image the get user image a native function.

A

Provided by the templating engine for the requester dot, email so for the email address of the requester and the size would be medium, then we have another div element still in the list of children of my header, where I will have a custom set of attributes and style, and then we say that the text, content of a div element will be travel, request, 2 and we can concatenate the display name of the destination. So by doing that, and by Saving this template for the header.

A

We can then edit one item for example, and see that we have the Avatar of the user and the destination in the header. As I said, we can do more, so we can also customize not only the header but also, for example, the body and talking about the body. What we can do is to group fields in section. So here is another template. We don't need to copy and paste it into Visual Studio code, because it is really simple to see.

A

We have a collection of sections in Array of sections, and here every single section is made of a display name, which will basically be the title of the section and then the fields that we want to have in that section, for whatever field you will not specify in a dedicated and Target section, they will go by default in the last one, which will be the default. The catch-all one so here, basically I, am placing title requester and destination in the main information section and any other field in the others section.

A

If I will preview it and Save, we can now edit again this travel request and we can see that we have the main information and we have the others Fields so really simple to use a really powerful. But that's not enough. Now. Let's imagine that you want to reuse this template on multiple environments or set collections well using the PMP provisioning engine. You can do something like that.

A

You can do the connect PNP online, providing the URL of the target site and a set of credentials and by connecting to the Target environment, you can then do the get EMP site template and you can save in XML file as the output of the template extraction, you can provide the name of the list. You want to extract so that you will have a really lightweight template just with the list you are interested in and then you can say that you want to use the lists Handler to extract just the lists.

A

So if you will execute this Commander, it will output in the current folder in XML file and we can have a look at the file. So let me show you what's inside the file, let me go back to visual studio code and let me paste it right here. This is an XML file which defines the list instance for our travel request list. We have a collection of views and in the default view we have the custom formatter, which is the Json for our custom view as well as for the fields in this list.

A

We have the travel duration days and in this field on the right side, let me scroll right a bit. We have the custom formatter attribute in which we have the Json encoded of the custom template for the field. Right now, at the time of this recording with the PNP provisioning engine, we still do not support extracting the custom templates for forms. Now. What can we do with this custom template?

A

Well, we can connect to another Target site still using connect VP online, and then we can say: invoke PMP site, template site, template sorry, and we can say that we want to apply the travel request.xml file that we just extracted by executing this command. When connected to another Target site, we will be able to replicate the list with the custom templates, rendering templates for the list for The Columns, and so we have an easy way to deploy our solution onto multiple environments.

A

Here, you can find additional links if you want to dig into the topics we covered in this video and like always, thank you for watching.