Customize Modern SharePoint List Forms Tutorial | JSON Formatting, Validations
Вставка
- Опубліковано 31 тра 2024
- 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
docs.microsoft.com/en-us/shar...
Show or hide columns in a list or library form
learn.microsoft.com/en-us/sha...
Creating custom list templates
learn.microsoft.com/en-us/sha...
SharePoint List Form Formatting Playlist:
• SharePoint List Format...
PnP Samples: pnp.github.io/List-Formatting...
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: / rezadorrani
🐦 Reza Dorrani Twitter: / rezadorrani - Наука та технологія
❤ Love it! I learn more from your videos than any other source. Thank you for sharing your expertise and knowledge.
Most welcome. Thank you for watching and learning from the videos.
@@RezaDorrani q
Hi Reza I need formula that will pick the colosest date(to today) from 5 sharepoint list date columns for each row. Some of the date columns can be blank . Is this achievable either in formal or json ?
@@HowToBudgetIncome Not sure as I have not tried this scenario. I will recommend posting your query on sharepoint forums in case someone has done something similar
@Reza Dorrani thanks for your prompt response. What sharepoint forums do you recommend?
Love your videos! 20 minutes packed with valuable examples - hilarious. Thank you so much Reza 💚
Glad you like them!
The information from 30 videos about Sharepoint packed into one! Pure UA-cam ambrosia! Thank you!
Wow, thank you so much for the appreciation
This is exactly what I worked on a lot before learning Power Apps :)
Near the end of the video, when you covered linking an approval directly to the form experience and embedding the list on a page, is great to improve the usability! I know it's just clicking the NEW button and then clicking the SAVE button... but for non-technical users, I've noticed they may be a bit overwhelmed at first by the SharePoint List UI.
Great video showing how this is all possible within SharePoint! Thank you, Reza!
Most welcome!
Reza you are on FIRE!
Appreciate you so much for showing these features. I knew a bunch of them, but you threw in a ton more that I didn't.
Thanks!!
🔥
You are the best, Reza. Thank you for all your tutorials - always succinct and hugely informative!
Thank You so much for your kind words
I had no idea u could customize a SharePoint form in SharePoint, I've always done it through PowerApps, this is so much simpler. Thank you Reza!
You're very welcome!
Haha same thing goes for me but our genius reza is here always to provide us creative things...
Thank you! Very clear, concise, and packed with so much useful info in one place.
You're very welcome!
This is the best explanation I've seen on forms customization. I love that you also add how to get supported documentation for each step. Subscribed!!
Thanks Richard
So clear, so organized and so simple. Thank you so much!
Most welcome
Love it! Thanks for sharing your knowledge Sir Reza!
My pleasure!
Thank you for all what you do for us, it is really a real pleasure watching your videos. I get the same excitement watching a non technical video for entertainment. 👍👍👍👍
Wow, thank you!
@@RezaDorrani i have only one question about these customisations , do they affect apps created based on lists in power apps??
@@abdessadekelasri7392 No
Reza you are a diamond! I love your wonderful videos and explanations.
Wow, thank you!
Amazingly helpful tutorial! Thank you!!
Hello Reza, thanks a lot !
Based on your training vidéo, I've not created for workflow with "Start and wait for an approval" but "create an approval" and then "wait for approval" and then I've udapted my sharepoint list with the dynamic link to the approval it self, so when the approver receive the workflow notification in Outlook or teams , he has to click on the link to the item in order to see all the informations of the request with json customize forms in sharepoint and just have to click on the link of the workflow in order to approve or reject it.
It's very useful when the approval is done during a dedicated meeting : approvers just have to filter on pending request (or create a dedicated view) and open it one by one in order to take a decision ! Then the power automate flow is finishing in order to send an email of décision to the requestor and update items.
So one again Thanks a lot for all your amazing trainings
Awesome! Thanks for sharing your scenario. I can visualize how well that works :)
Very well done. I shared with others at work as we are all migrating to SharePoint online and having to edit and recreate different aspects. Your video was very thorough and easy to follow.
Thank You so much! So happy to hear that my work is being shared. Much appreciated.
Thank you so much!!!!! best tutorials! Exactly what I need!
Great to hear! Thanks so much for watching
I learnt a lot. I can now extend SharePoint List with JSON. Thanks Reza
Most welcome
Definitely love it.♥ Thank you so much for sharing such a great experience and knowledge.
You are so welcome!
Brilliant session, very useful, thanks for sharing.
My pleasure!
Very informative
I am trying to watch your all videos to learn SharePoint, power apps, power automate
Thanks so much and I hope all the videos are worthwhile
Awesome tutorial. Thank you!
Most welcome
Hi Reza, thanks for sharing your videos have been super usefull!
Most welcome! Thanks for watching Pedro
I learned so much from you!!!! Thanks a lot
You are so welcome!
Amazing!! Power apps can be slow to load, so I love that we can do so much with just a list. (Not that I don't love Power apps, I really do... but I wish they were faster.)
Slow load times can be due to actions on app onstart or screen visible etc.
This is what I am looking for, thank you Sir, you are awesome🤩
You are most welcome
This is wonderful - so detailed, clearly explained and really helped me understand the power of lists and their associated forms - very grateful - thank you.
Glad it was helpful! Thanks for watching
Appreciate you for sharing this valuable knowledge! 👍
Thanks
Very helpfull. Thx so much. Chapeau 🎩Greetings from germany Christoph 👏 👏 👏 👏 👏
Thank You Christoph 🙏
❤️ 🇩🇪
This is so insightful. Thanks for sharing
Most welcome Nono
another keeper, thank you Rezza.
Glad to hear that! Thanks for watching.
Great video!! Thanks.
Most welcome
Thanks so much. As always with your presentations - unbelievable how much valuable information you are delivering in a given timeframe. Regarding this video, I‘d like to know how to include a Cascading dropdown directly in the SharePoint-list experience. Thanks in advance for your feedback and looking forward to learning from your vast experience.
Thank You so much!
Cascading dropdowns is not an option with JSON formatting. You would need to leverage Power Apps for that. I have done 2 videos on cascading dropdowns. I will recommend checking those.
Great work Reza 👍
Thanks
Wow! great job!
Thank you!
Olá sou do Brasil, adoro seus vídeos traz um conteúdo íncrivel mesmo sem ter o inglês avançado consigo estudar com didática parabens pelo contúedo.
De nada! Fico feliz em saber que pude fornecer conteúdo útil para você estudar.
Jean não sei se você sabe, mas tem como ativar as legendas automáticas em português, primeiro vai na engrenagem e ativa a legenda em inglês, fecha a engrenagem, depois volta na engrenagem clica em legenda novamente e clica em traduzir automaticamente e seleciona o português. Isso me ajuda muito a entender o conteúdo.
What a champion, thanks!
Most welcome!
It helps a lot, thaaaank yoou 🙌🏻🙌🏻🤗
You're welcome 😊
Very helpful thank you
You're welcome!
This changed my life.
Thats a big quote
I use some of that myself, but a useful refresher.
👍
Wow this is so useful thanks
Glad it was helpful!
Thank you sir!
You are most welcome!
Wonderful
Thanks
Great 👍👍👍👍 thank you
Welcome 😊
Thanks!
Thank You
You deserve a double like
👍 👍
great material
Thanks
HI Reze! Great video, thanks so much! Quick question - I had a date field in the Form passing into List, but when the date is empty, error occurs showing "OpenApiOperationParameterTypeConversionFailed. The 'inputs.parameters' of workflow operation 'Create_item' of type 'OpenApiConnection' is not valid. Error details: Input parameter 'item/DatetocompleteIU' is required to be of type 'String/date-time'. The runtime value '""' to be converted doesn't have the expected format 'String/date-time'." Do you happen to have a shortcut for a fix? Thanks!
I have not come across this issue hence not sure whats the fix for this.
Amazing video! Wouldn't mind more of the same please.
More to come!
@@RezaDorrani believe it or not, just today we had to retire a power apps form that was causing more trouble than it's worth. This does everything it was doing and much more.
@@GazaAli Goal of video was to showcase what can be done In-Product! SharePoint forms itself are powerful. Not everything needs to be a Power App.
@@RezaDorrani Amen to that. Is it at all possible to force the form to always display across 2 columns?
@@GazaAli I have mentioned this in video. Answer is no.
Nice one.
Thanks!
This is great. Thank you! Is it possible to set the form up so that the values in a choice column are dependent on the choice in a different column?
For example, if there’s a “department” column and someone selects “Marketing”, the choice column named “Job Title” will display only the job titles that are within the marketing department?
I know this can be done in power apps, but I’m not sure if/how it can be done right within list itself using some of the filtering techniques you’ve demonstrated here.
Dependent choice columns cannot be achieved with JSON.
Thank you very much for covering this. it is quite handy! is it possible to have the form on separate page or we have to use PowerApps?
Can you elaborate more on separate page
Learned a lot of good info from this video! Appreciate the clear and concise examples from start to finish.
One question, is there a way by formula or what not to display content from a column based off what another has? Instead of hiding/showing an entire column but data within that column. For example, I select a start and end date...is it possible to hide content in another column based on if it falls or doesn't fall between those dates?
Most welcome.
Hiding column content is not an option with json formatting.
@@RezaDorrani ah ok. Wasn't sure if there was anything that could be put into the formulas or column validation sections. I'll have to rethink the idea I had, but amazing info as usual.
Brilliant Overview - Please keep such video's coming as I learned lot from your videos... Can you please check if we have facility to approve multiple items on mail which newly added in a day and so the status gets changed automatically after manager approves
Thanks!
When I make a video on a topic, I start researching about its feasibility and I make videos when I get multiple requests on a topic. This topic has had very few requests.
Thank you Reza for capacity building, this content has extremely enhanced my skills to do some projects. Would you mind sharing the sample JSON formatting for the header that shows the approval status?
Most welcome!
I have a playlist on my channel related to json formatting. I have videos in there where header formatting json was shown and the video descriptions of those include the link to the code.
Great video Reza! Thanks so much for your assistance! Is there a way to increase or set the field width and height within a form section? I need a full-width field (text type) within a full-width section.
You cannot adjust the widths
@Reza - love this! Question: (1) can we have a different form display with more or less fields, depending upon which user is logged in?
Video shows how to show hide columns based on logged in user.
Excelent
Thanks Diogo
Hi Reza, a very informative video. Thank you. I was just wondering if it is possible to ad an 'Approve' 'Reject' button in the body rather than the approver having to select from the drop down?
One cannot customize the body formats
@@RezaDorrani OK, thank you for letting me know - saves lots of searching to find the answer
Hi! Thank you for the video! 😁
I have a question. I created one customized app and if I go to the list itself and open an item and edit it, it saves successfully; however in my main page of the site I added a section with web content-list. If I open an item from there and try to edit it , it does not work. Do you know what could be the reason?
I have not come across this issue and hence not sure what is the cause for your issue.
Hi Reza - I'm creating a date & time column and ultimately I'd like the user to enter both through the same field, however, both appear as two separate fields so I was wondering if that is a kind of formatting or something related to the version
I dont believe that is an option in SharePoint
Such a great video! Question for you: I have Power Automate flows and Power Apps forms connected to my existing SharePoint list - will reordering columns in the SharePoint form impact how those work? (it doesn't change the field # assigned to them, does it?) Same question for configuring the form body to have sections.
Reordering in SharePoint will have no impact in apps or flows
Another awesome video. Would this concept work with multilevel approvals/approves?
Could work with multilevel approvals as well.
Reza! This video was extremely helpful, thank you so much for doing it! I had one quick question though - does the formatting that you do (whether it be json or just conditional formatting) show up when using the app? I can get everything to work using desktop, but the changes don't seem to flow over to the apps. Thanks!
Which App? SharePoint mobile App does respect it.
@@RezaDorraniI've been trying to use the List app (on an android phone and tablet), and the forms coding doesn't seem to pull over to the apps (but it works fine on the desktop version)
@@btsinkorang I have not tried with lists app. It might very well be a limitation. I know it works with SharePoint mobile app.
@@RezaDorrani Yes, it looks like there are some differences between Lists and areas with the Sharepoint app. Anyways, your videos are greatly appreciated and thanks for the responses :)
I learned so much. Thank you. Where can I get the header formatting code for the formatting based on Approval Status? I am just learning and can't seem to figure out how you did that. You are a really good teacher!
I have a playlist on list formatting. Description of those videos has links to the code.
Really great video!
Two short questions:
1. Can you also show/hide section titles (so not just a collumn) based on the entry of specific fields?
2. Can you show/hide collumns based on multiple conditions? Meaning show this collumn if collumn "[collumn name A] = "[valueX]" & if "[collumn name B"] = "[ValueY]"
Basically i tried this: =IF(AND([$category1] == 'X', [$category2] =='Y'), 'true', 'false')
Feedback would be very appreciated!!
1 - Currently, section titles cannot be hidden
2 - check documentation on how to add multiple conditions
Incrível!!!! #powerbinareal
Thank You
Thanks a lot for your video, I had never created an MS list, but now I was able to create one and customize it too. Was ablout to close the video when you mentioned JSON coding, but then realized it was too easy. If you see my comment; I have one question - I created a form which questions. Have chosen the choice column and added the following in the drop down menu (Not Applicable, 1, 2, 3 and 4), I wanted to know if I could calculate the average fs a text is present..Hoping you see this one soon.
Glad it helped!
Json formatting can only format data. It cannot calculate avg across all the items.
Look into column totals feature in SharePoint. Check documentation for that.
Reza, thank you for your clear and concise videos. After watching them I feel a little empowered as a beginner in SharePoint. Would you happen to have any tutorials on creating a hover card for a card in a Board view list? I'
Happy to hear that! It’s all about taking the first steps.
I do not have a tutorial on hover cards. Check the documentation for SharePoint formatting. They have some good examples there.
@@RezaDorrani thanks. The documentation and a decent text editor allowing me to see the json structure did the trick.
Thank you so much for this info. I already knew how to make sections, But I do have a goal of adding "Action" buttons to the header that would trigger power automate flows. Is this possible?
Most welcome!
Currently triggering flows from header section is not supported.
Great content Reza. I'd love to see if it is possible to reply to these types of approval requests with Outlook actionable messages.
You could always leverage flow approvals. I have done several videos on it. I have a playlist on my channel for approvals.
Excellent!!
Is there any sintax to refer a lookup column in the JSON header?
Documentation has the syntax information. Link is in video description.
Hello, can you please tell me, while adding a new item to a list, how to highlight or bold the heading of a column (ex: "Title" text itself not it's values) based on drop-down value seleted in other column?
Great video, thanks for making Reza
Most welcome
Hi Reza, thanks for the very informative content! Regarding customized headers (12'50'') could you pleae share the JSON of the example that you have provided in the video? I am particularly interested in formatting the background depending on a column value. Is it possible to do that based on a calculated column? Or even just display the result of a calculated column in the header? I have searched in the web and it seems it is not (JSON Form formatting: Unable to use the calculated column value in header/footer layout customization · Issue #8788 · SharePoint/sp-dev-docs · GitHub). I would really appreciate a feedback here. Tks in advance
I have a full playlist on JSON customization on my channel. Multiple videos where I have shared code as well. I tend to reuse and update lists and libraries so I would not have the code anymore and hence asking to check the playlist.
I don't think calculated column is supported.
Hello Reza, is it possible to sorting every profils in a lookup person column for each item with the view formatting ? I have tried sort() and foreach in my code formatting, i don't find a good solution.
Not sure
Hi Reza! I have two SP list. First one name’s is Address and this list has five columns: Street, HouseNumber, City, PostalCode, Country. Second list name is Order and it has many columns and a form what is contain a drop down list get data from Address list. But I can see just one column in selection. Is it possible to see Address list’s “Street” and “HouseNuber” in the Order list’s form in drop down menu? And if so, how?
I have not come across this scenario or where you can only see 1 column.
I will recommend posting your query on forums in case someone has done something similar
powerusers.microsoft.com
@@RezaDorrani ok, thank you
Hi Reza,
Is there a way to validate Microsoft Forms responses with a SQL database table through Power Automate? I have tried to couple responses and pass a condition with get table SQL connector, but it isn't of great help, is there a data input tool that'd do such sort of validation that you recommend?
Not aware of any data input tool that does that. Flow can read response from form and compare with sql. I do not have any references on this though. May be a good idea to check on forums.
@@RezaDorrani Thank you
Hello, is there any way to customize the 'data entry form' using JSON, for a Document Library (like if you want to update values for all the columns added into your Document Library?) or does this json formatting only work for SharePoint Lists
I believe it is for list forms only
@@RezaDorrani I saw in this video ua-cam.com/video/c4a3_VUDwk0/v-deo.html and at 13:10 you seem to be explaining how a View can be formatted with json. But I suppose that is a little different than customizing the Document Libraries 'data entry form' using json. In this video you showed how to make a Power App and how it replaced the default sharepoint bad looking original data entry screen ua-cam.com/video/X-hFMMKuPsM/v-deo.html
That is different from JSON
Reza, I would like to conditionally hide/show a column in the Sharepoint List Form if the logged-in user belongs to a specific Sharepoint group... Is there a way to do this using conditional formulas? If not, what would be the best way to do that?
Currently, JSON customization does not have an option to check if user belongs to SharePoint Group
This is great Reza! Is there a way to hide the default attachment field in the display mode of the form for a particular group of users?
Cannot show hide columns based on groups with JSON.
You would probably need to take the Power Apps route for it.
@reza thank you for sharing, Is it possible to show thousands separator when input new item on number column sharepoint list ?
I am not sure about this one.
Hi Reza, great video as always. I was wondering if there is a way to see in the Header the Title value for each item if I select multiple items? Thank you
@RezzaDorrani : One more question please. My requirement is to pre-populate 2 Hyperlinks in the List Form whenever a user clicks "NEW" to fill out a new form. These Hyperlinks would direct the user to some useful resources to help him/her fill out the form. This Hyperlink must be PRE-POPULATED when the user opens a new list form and is not an entry that the user has to make. IS this possible in a SharePoint list form ?
You could add 2 links in the header json but they would be available throughout the form experience.
@@RezaDorrani : Got it. Thank you so much 😇
@@RezaDorrani : Is there a quick video you can suggest that tells me how to add 2 hyperlinks in the header JSON section please ?
@@richagupta1982 I am not aware of any video reference for it. Check documentation
Hi Reza,
The form customization is now moved completely to Power Apps. I have a few questions.
1. When a form is opened in Power Apps, it allows the addition of more screens. Is it possible to show multiple screens based on the user? Just like how the Dataverse table forms.
2. If a user has any of Office E1, E3, or E5 licenses, can he/she use the list forms customized with Power Apps and workflows from Power Automate?
3. Is the solution developed on the List scalable?
1 - Dataverse Table forms are multi screen?
You can add as many screens as you want in app and check logged in user and accordingly navigate.
2 - As long as app and flow use standard connectors then Yes
3 - ALM friendly - No
Thanks @@RezaDorrani.
Awesome video. I am creating Forms in Microsoft Forms then listing out data in SharePoint. However, I am using lot of "add branching" feature in Microsoft Forms, can I do it in SharePoint list forms as well?? Thanks again!
No branching options with JSON. Although you could show and hide columns based on selections that user makes. Actually you have give me an idea to try out :)
can we have tables or add something like a title for before the column but not above, but on the left side. or can we change hide names
Currently, Body formatting is not an option
Hi Reza, I have a SharePoint list to manage assets, to enter new items I would like to have a selection which returns a number of options related to the item and for these to cascade. Ie Category, returns 5 options, make, model etc. the key thing is I do not want lower level options available which are not related to the upper level selection. Can you please help me
I do not have a video reference on this scenario and would have to try it out to know the possibilities
Hello Reza, thanks for the video, so useful, the only thing is , I want using power app (customize form) to create cascading drop down menu, but I want my rows remain editable by clicking on them. can you please advise?
Most welcome!
I do not have a video reference on this scenario and would have to try it out to provide guidance. I recommend checking or posting your query on forums in case someone has done something similar powerusers.microsoft.com
thanks a million @@RezaDorrani
hi, I have a sharepoint online list with employees which I use as a lookup to link it in 3 different document libraries. is it now possible to customize the form in a way, where I can see which documents are linked to a certain list entry (employee) when I click on it in the libraries?
JSON formatting only works on current list information.
@@RezaDorrani thanks for the fast respond! do you maybe have an idea how I can achieve my goal? I know that it was pretty easy in sharepoint 2016 with the sharepoint designer and webparts
@@MagicMikeiy Probably with Power Apps.
Solid tutorial as always! Is it possible to make the displayname within the Body Format conditional? For example, all fields within a section are conditional, but if that condition is not met, currently only the displayname appears, which is not the most visually appealing format. I would like the displayname to only appear when the same field conditions are met.
I dont think that is an option
@@RezaDorrani that is also the conclusion I arrived. Appreciate the second opinion.
Hi Reza,
Thanks for your helpful video. Need your help. By any chance, do you have any video on how to share all my todo from task Planner to someone else?
Or is it possible to bring all to do of one user from task by planner to a sharepoint list automatically using Power automate ?
The reason behind this is to see the workload of other colleagues before assigning them one new todo.
or do you have any other technice to see all the todo's of a user ?
thanks :)
I do believe it’s possible but I have no video reference on it. I will recommend checking on forums in case someone has done something similar powerusers.microsoft.com
Awesome again Reza. How did you populate and format the header please. Sorry if I missed that bit.
Video description has link to a playlist of videos on header formatting. The descriptions of those videos will include links to download the JSON samples.
@@RezaDorrani Thank you. 🙂
Great stuff ... I suppose this can't be done in a document library since I don't see that dropdown in the item details at all?
I believe no
Is it possible to hide certain columns when form is in edit mode. I think we can do conditional show hide based on the column present on the form, Is there any property which I can check to hide the column ?
There is no form mode property
Hello Reza, first of all thank you so much for creating all these tutorials, it does help me a lot. I have one question for you. I do not see any entries I made to my list. What did i do wrong?
Try with a new list. My only guess is your list view filter criteria may not be matching.
@@RezaDorrani Thank you Reza...I will try that
Great video as always! Any chance we can get one on custom connectors?? Just an idea, keep up the good work as always
5:27 Hi Reza! Amazing video as always. Is it possible to show a column if the user belongs to a specific SP Group? Trying to find a way to show the fields to all the resolvers on a team. Thanks in advance! :)
I dont believe there is an option to check if user is in group with JSON
Hi @RezaDorrani , This was an extremely useful video. I am struggling with one use case and would appreciate your advice please. I want to make the "CHOICE" column as Multiple selection and also capture specific information based on each selection. Example there are 3 choices for me in the choice column - RED, YELLOW, GREEN. My requirement is that when the user selects RED, there are 2 date field and 2 multiline columns shat should become visible and capture values, then if the user also selects YELLOW there should 3 separate set of columns that should become visible and capture values. Same action when the user selects GREEN. If the user unselects any of these choices (RED, YELLOW or GREEN), their related fields should vanish along with their content . How can this be implemented ?
Hi Richa, this sounds like it may be possible but not something I have tried or have a video reference for. So not sure what the steps would be.