Microsoft 365 Community Experts from the field, 6 Feb 2023

Previous Meeting

⏯

youtube image

►

From YouTube: Customize Modern SharePoint List Forms Tutorial | JSON Formatting, Validations

Description

This tutorial video is a step-by-step guide on how to customize Modern SharePoint List / Microsoft List Forms using JSON Formatting, Column & List Validations, designing form header & footer using JSON, adding columns in Sections (Form Body) and more.

Video showcases the power within SharePoint itself (In-product) to customize forms, reorder columns, show and hide columns with conditional formulas, add column and list level validation formulas, create sections in form body, add custom headers and footers using JSON form formatting, add a notification approval workflow using power automate, make columns read-only (in form) by conditional formulas checking logged in user role and much more.

#SharePoint #JSON #Forms #sharepointonline #Microsoftlists

🔗 Helpful Links:

Configure the list form
https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration

Show or hide columns in a list or library form
https://learn.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-conditional-show-hide

Creating custom list templates
https://learn.microsoft.com/en-us/sharepoint/lists-custom-template

SharePoint List Form Formatting Playlist:
https://www.youtube.com/playlist?list=PLTyFh-qDKAiE7C_2lVNAPzgHXsBykG0Tf

PnP Samples: https://pnp.github.io/List-Formatting/formsamples/

Table of Contents:
00:00 - Introduction to customizing Modern SharePoint List Forms with JSON
00:37 - Create SharePoint List from Microsoft List Template
02:21 - Reorder Columns in SharePoint Form
02:53 - Show or Hide Columns in SharePoint Form
03:14 - Required field validations (Column must contain information)
03:39 - Conditional Show Hide Columns (Edit Conditional Formula)
05:59 - Configure SharePoint form body to show one or more sections (JSON)
10:04 - Customize SharePoint Form Header using JSON formatting
11:24 - Customize SharePoint Form Footer using JSON formatting
12:10 - SharePoint Form matches Site Themes (Look and feel)
12:24 - SharePoint Form JSON Customization Example
13:00 - SharePoint column validations
14:06 - SharePoint List Validation Settings (Validation formula)
16:47 - SharePoint List Approval Notification Workflow
20:21 - Add SharePoint List to Modern Page (connected web part - List Properties)
21:01 - Add Modern SharePoint List as a Template
21:42 - Subscribe to Reza Dorrani channel

🤝 Let’s connect on social:
🔗 Reza Dorrani LinkedIn: https://www.linkedin.com/in/rezadorrani/
🐦 Reza Dorrani Twitter: https://twitter.com/rezadorrani

A

Hello, everyone in this video I will show you how to customize SharePoint list forms.

A

We will reorder The Columns, create sections in forms, make columns read only in the form or hide the columns based on user role, customize the form UI by using Json, we'll customize, the header customize, the footer, and a lot more all of this in SharePoint in product. So let's check it out in action, foreign.

A

Sharepoint site we can go ahead and create a list. We can start from a blank list or pick from the existing Microsoft list. Templates I'll pick the travel request list template, which provides a wide range of columns to track travel, requests, I'll, go ahead and use the template, give my list a name and click create here. When the user clicks on new, it will open the SharePoint form experience.

A

The standard experience is in this one column: format, I can add columns so I'll, add a new Choice column. Call it approval status. I have added my four choices. I also have the ability here to style these Choice options.

A

I will default my approval status to new. Whenever a new item is created, I'll click, save I'll, add another column of type person. This would be the individual who is identified as the approver for the travel request and I will add a multi-line text column to track the approval, commands the requester person type column that comes with the template.

A

The person who will create the item is my requester, so I will just go ahead and delete this. The template comes with a yes, no type, column of approved I will go ahead and delete this. Now. If I select new item, my form will reflect the updated schema now. The first level of customization that we can do within the SharePoint form experience itself is by heading to edit form and clicking on edit columns.

A

I would like destination to be the second column of the form followed by travel, start date, travel end date and then the reason for travel or I can select on the three ellipses and move these columns up or down once I click save my changes would be reflected instantly hide columns from the form, experience, approval status, approver approval commands and travel duration. These are four columns that I do not want to include as part of the form.

A

So if I click save observe how those columns are now not available as part of the form experience for columns on SharePoint, we have the ability to head over to column settings and make them required. The travel start date and the travel end date are two columns that I would like to set as required.

A

So now, if I head back to my form, if the user tries to save those required field, validations will come into play instantly.

A

The user can select an airline and put the estimated airfare of the travel request and the user can enter a location for the hotel and enter the estimated hotel cost.

A

Once again, edit columns for the estimated airfare column I will head over to three ellipses and go to edit conditional formula, and this is where I need to plug in a custom formula.

A

There is a link here that takes us to the documentation around how we can plug in these conditional formulas. There are some nice examples provided here for estimated airfare equal under square brackets with the dollar symbol. I have to put the name of the column which, in my case, is Airline, is not equal to empty the moment. I pick an airline estimated airfare shows up. Let's try the same thing with the hotel column scenario, estimated hotel cost added conditional formula hotel is not equal to the empty string. Save the moment.

A

I pick my hotel immediately estimated hotel cost is visible. Now my approval based columns that I had hidden I will add them back to my form.

A

Now all of these should be visible only if the current logged in user is the approver go to edit columns go to edit conditional formula and the formula would be as follows at me: that's the current logged in user's email.

A

Is it equal to the approver column, which is of type person dot email will give me the email address of the user in that approver column.

A

Currently it is empty, so this would make the column hidden and I will do the same thing for the approval column and for the approval, commands call and I will click save I would like to go ahead and Section 8 my form for that once again in product in SharePoint itself, we have the option called configure layout here.

A

I have the option to apply formatting, and this is in the form of Json creating sections in the body of the form, which is where the columns of the form are.

A

Once again, we are provided with a link to learn content, which gives us good guidance how we can customize the body of the form which allows us to create section.

A

Step-By-Step guidance is provided as to how this can be executed. There's also a good example that is provided I'll simply go ahead and copy this, and for the body formatting I will paste that code for each section I can provide a display name.

A

So, let's say I call my first section travel details in fields: I need to provide the display name of my columns trip, title comma under double quotes, reason for travel, comma travel, start date, travel end date and destination next. Section I can also include emojis here.

A

So that's the display name of my section I will add Airline and estimated airfare next I'll add the hotel information. If you need more sections, you can simply follow the same format. All you need is a display name. This can be left empty as well.

A

I will recommend to always create one right at the bottom, which is empty where the fields are not defined, and if I save this and come back now, to my form experience, you will notice how the form has created the sections and included The Columns that I have defined the last section that I had created, which was empty. The reason why I did that is if there are any columns in my form that are visible and are not a part of any of the sections on the top, they will automatically fall in that last section.

A

There is a horizontal line around the sections the validations are in play, show and hide logic is in play, plus this is responsive by Design.

A

If I was to launch this form on a mobile-like experience notice how the entire form sits in a one column format as the real estate increases, it will start adjusting the position of the columns automatically plus this time. If you go to edit columns notice how it highlights the sections and the columns within those sections, I can still reorder Fields. So, let's say I would like to push reason for travel above the dates. I can do that click save and you can see how the change comes into play.

A

The column layout is automatically defined. Now, let's say in my case here: I would like the travel start date and end date to be in the same line.

A

I can always go back to configure layout, go to body and create a section. I won't give it the display name, but for the fields I will pick travel start date and travel ended.

A

I'll click save this time notice. How travel start date and end date have fallen in that two column, layout Style, so I have added this additional section on the top. I have my three main approval: columns, I'll click save.

A

Once again configure layout head over to the learning content for configuring, the custom header there is a sample. That's provided I'll, go ahead and copy this paste that, in here click preview,.

A

An icon with the name group, this leverages the fluent UI icons that are provided for us. So let's say I pick the name of this fluent UI, icon I will go ahead. Change the icon, name, click preview! That's the change! The text. Contact details for I will replace this with travel request. Colon click preview changes right here, Plus in my header I, can show data of columns that are one currently visible in this form and two hidden based on conditional formatting.

A

Now here it uses dollar title. This is actually the internal name of the title column in SharePoint. It adds the trip title right here at the top on similar lines. We can also add footer.

A

Here there is sample Json code provided I will copy paste click. Preview. I would like to change its text to contact administrator, I've added, a simple mail to logic that says mail to this specific user, which is my administrator and add this to the subject line of the email. So here, if I click on contact administrator, this will open my email, client and it's added the admin email plus it's added the subject.

A

I'll click save all of this will also respect the theme of your SharePoint site.

A

Here is an example, offer custom header observe the moment. I pick my location, it plots that location on a big map gives me the details of my trip, observe as I start adding my airfare cost my hotel cost. Both of these will get added, and it will be shown right here at the top here. I would also be changing the color of the header depending upon the status right now the status is new, so the color is blue validations, for example. The travel start date must be greater than today now for column level. Validations.

A

If you select your column and go head over to column settings and edit under more options, we have column validation. Once again, we have supporting documentation.

A

If you need the internal names of columns, it's best to go to list settings, select the column and simply pick the internal name from the URL travel start date. That's my internal name. It must be greater than today, which is a function.

A

If this is not the case, go ahead and put this specific message: I'll click save, let's try creating a new item where in this case the travel start date is today if I click on Save notice, how the column level validation comes into play, the travel end date must be greater than the travel start date now column. Level. Validation is not going to help in this scenario, as I cannot get values from other columns.

A

But if you head to list settings, we have an option for validation settings which gives us one formula that we can write and if that formula criteria doesn't suffice, then we can give a message to our user.

A

Travel and date must be greater than travel start date, and here you can write a message. Travel and date must be greater than travel start date. I'll click save back to my travel request, start date. I'll pick the 10th end date, I'll pick a day before I'll. Try click save notice how the validation comes in play once that is true. Only then can the user submit the form.

A

The travel request needs to have a cost associated with it, meaning there must either be an estimated airfare cost or there must be an estimated hotel cost.

A

Once again, I will go to validation. Settings now. Remember I only have one formula that I can plug in here. If I need additional validations, I will use the and function my first condition comma.

A

My second condition, which would be there's a function called sum sum of estimated airfare comma estimated hotel cost must be greater than zero and I will close the and function now. The challenge is that you only get one message, so you have to be very clear in your messaging.

A

I'll click save Let's test. This out travel start date, 9th end date, I'll go to an earlier date. I'll try submit it won't. Allow me here is my single error message: I still get the message. There's a second suggestion which is ensure cost is provided so I'll go ahead, pick an airline. Let's say: I put my cost now. If I click save, you will notice that the item gets created because the validation has succeeded now, once a travel request comes in, I would like to start the approval process.

A

So whoever is making the request. Their manager would need to approve it power automate and create a flow and I'll pick one of the existing templates, which is send a customized email. When a new SharePoint list item is added, make sure all the connections are in play and I will go ahead and create the flow the flow is created. I will go to edit and make some changes right after creating the item, I will go ahead, get manager, action from The Office, 365 users connector to get the manager information for the user.

A

Who created the item and delete this action forget my profile. The email that's being sent out will be sent to the manager's mail property. The subject here, I can put some details of the travel request.

A

I can customize the email body and include a lot of details about the travel request. This is HTML I'll. Add an anchor tag. Take approval decision. The href would straight be the link to the SharePoint item. One additional step before sending the email is I will update the SharePoint item.

A

The ID will come from the trigger any mandatory fields. I would have to fill in here. I will change two things: approval status. This would move to pending prior to sending the email to the approver approval claims I'll head over to enter custom value and pick the mail from the get manager, action, I'll click save the flow is saved and listening to any new travel request that gets created, I'll go ahead and create a new request.

A

I have put in my travel details, I'll click, save raza's manager in active directory is Sarah. The flow has triggered the approval status has changed to pending the approver. Is dynamically picked from active directory if Raza was to open the item, whereas I can see all the details of the item notice how the header color changes so technically approval status and approver are columns that are in play here, but they are not visible in the form I'm just displaying their values in the header.

A

Here is the email that Sarah has received that states. A new travel request has been created here is the link Sarah clicks on. It takes Sarah directly to the form experience here. Sarah can see all the details that were entered as part of the approval process.

A

Sarah can start making her approval decision notice. How Sarah sees the approval columns purely because Sarah is the person who's been identified as the approver a can also enter the approval commands the status has changed when Raza looks at that same list item the status is changed to approved now this entire experience I can also bring it to a modern SharePoint page here. I can add the list so it'll add the list. View same thing: I can create new items interact with my list Plus.

A

There is also a list properties web part which I can connect to my list web part and display the form. Let's check it out right here in the modern page experience itself. If I simply select the item, it will show all the details of that specific item as a SharePoint admin, I can actually create a template based on the list. Customizations that I have made I can create a new list design and make it available as a template for my organization, so in any SharePoint site.

A

If a user goes to a new list, you will see the templates that are put out from Microsoft, but my admin has made a custom list. Template available. I did that through Powershell, but if I select this and click use template, it will create the list and all the customizations that I put in play would follow suit.

A

If you enjoyed this video, then do like comment and subscribe to my YouTube channel and thank you so much for watching.