#SharePoint​ #Forms​ #ListFormatting​ #FormFormatting #ListForms

In this video on Customize SharePoint List Forms using JSON Formatting, we will walk through applying simple form customizations to your SharePoint lists or Microsoft Lists. This newly released feature of form formatting uses the same logic as SharePoint List Formatting (column and view formatting). Hence, we can now customize the look and feel of our SharePoint columns, SharePoint views and SharePoint Forms using JSON and apply conditional formatting.

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

✅ Formatting Samples:
Header Formatting: https://github.com/rdorrani/SharePoint/blob/master/HeaderFormatIssueTracker.json
Body Formatting:
https://github.com/rdorrani/SharePoint/blob/master/BodyFormatIssueTracker.json
Footer Formatting:
https://github.com/rdorrani/SharePoint/blob/master/FooterFormatIssueTracker.json

✅ Microsoft List template used: Issue Tracker
Columns added:
Comments – Multiple lines of text
Expected Completion Date – Date

✅ PnP Samples: https://pnp.github.io/sp-dev-list-formatting/

Table of Contents:
00:00 – Intro
00:36 – Create list from template
01:48 – Edit columns Option
02:36 – Conditional formatting of columns
04:33 – Configure Layout formatting option
05:05 – Customizing the form body
08:10 – Adding Header to form
08:32 – Adding Footer to form
08:53 – Issue tracking list form customization (tutorial)
16:00 – Customizing SharePoint list form with Power Apps
17:42 – Subscribe

35 Comments
  1. Fabian Ackeret 5 months ago

    great video. Thanks for putting it together.
    The only two things that are missing now are cascading dropdowns with json & modern lookups (to other sites) 🙂 Let's hope MS is reading…

  2. Mojo Jojo 5 months ago

    Reza. Do you have any links that people can use to understand which json properties/values etc. are valid to use with SharePoint and what those properties do? It's good to use the community samples but also better to understand how they work, if possible. Thanks for your standard superb content.

  3. Jagan V 5 months ago

    Great video and super explanation, I am fan of your videos. I have a doubt over here can I put custom buttons like Approve, Reject based on user login? Instead of save and cancel.

  4. Rene Scrooby 5 months ago

    Hi Reza
    how can one configure the layout if the option or icon is not available as a second level within the form. how do I enable this option instead of using the only option – PowerApps.

  5. Javed Ali 5 months ago

    Thank you for sharing. Do you recommend any source to learn JSON instead we picka codes directly without much understanding.

  6. SA 5 months ago

    Hi Reza, fantastic explanation. Does this apply modern SP lists or classic SP lists can also be configured using these features?

  7. Per Svedenbring 5 months ago

    We got this feature today. I am able to build up sections but the header for each section is not visible (does not show in the form).

  8. Ramadhanu Rachman 5 months ago

    Hi Reza, why i can't see my display name although already write "displayName": "detail", need your advice please

  9. Ramadhanu Rachman 5 months ago

    Hi Reza, just wondering if i want to change the "bug icon" with my picture logo, how to create JSON formula. Need your advice please. I can't find the solution in PNP, Thank you

  10. Naqash Ahmed 5 months ago

    Hi Reza,

    I cannot see the Configure Layout option in my SharePoint List. What would be the reason? I have A1 Plan.

  11. Joseph Wise 5 months ago

    So cool! This is going to be so amazing to avoid PowerApps which is awesome but an administrators nightmare.

  12. Robin James 5 months ago

    I love the new feature, but just for information, what would be the negatives if we use customize forms using PowerApps, do we have issues like delegation(I guess its no, as its not searching or filtering anything), or another negative apart.

  13. raja sekar 5 months ago

    Awesome 😎

  14. sri kanth 5 months ago

    Hi Reza, I have enabled the content type and created sections but content type not able to drag and content type showing in last section, Colud you please help me on this issue?

  15. Luis Moraes 5 months ago

    Great video. Is there a way to resize the fields inside a section?

  16. vinay ayinapurapu 5 months ago

    i am getting the following error when updating the column formatting for header 'Title was not found on the data object'. i also tried to replace the 'Title' with issue field in Json, it still show the same error 'Issue was not found on the data object'. any idea what i could be missing?

  17. vinay ayinapurapu 5 months ago

    i see most of the conditional format is working. But Assigned to equal to me, is not getting executed, unless i click on Assgined to and clicking on Action to show 'Status' and 'Comments'. Does anyone face the same issue?

  18. Bernd Kroon 4 months ago

    Great. Great video. Great!

  19. Marcos Donoso 4 months ago

    Thank you. Very well explained!

  20. r manoj Kumar 4 months ago

    @Reza Dorrani  how to add color in body display name

  21. Lorna Brooke 4 months ago

    This is great, Do you know if there is a way you can put a button as a footer that will execute a flow? Where some items need one approval and some need two, due to the complex nature we find it easier to have a standard flow for the first approval and then a button trigger for the second flow. I would love to move this button to the footer so the person processing the item does not have to click out to trigger the flow. I can get the button on the footer but it doesnt do anything. I am using the below as the moment to start the basics

    {
    "elmType": "button",
    "txtContent": "Send to Travel Team",
    "attributes": {
    "action": "executeFlow",
    "actionParams": "{"id": "7c635437-29ad-4e79-b9cd-ba61e6646534"}"
    },
    "style": {
    "background-color": "Maroon",
    "color": "white"
    }
    }

  22. Artemis Optical 4 months ago

    Very Informative Video. Is it possible using JSON (rather than Power Apps) to colour the form sections differently so that they stand out from each other, or darken the line divider?

  23. R DaL 4 months ago

    Love this video! this is exactly what we needed! One question if you have time. We want to add to our header say a field called "client name" and also a "logo" for the client. Is that possible?

  24. Anil kumar 4 months ago

    Nice video. Can u please create a video of displaying project lists from Project online……..in sharepoint modern list.

  25. Rob Versteeg 4 months ago

    Again, an awesome video! When i check the info site: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-conditional-show-hide#specify-conditional-formula-to-show-or-hide-columns i don't see if there is also an condition, if you can check, if the column is filled in, like in PowerApps (IfBlank), is that also possible?

  26. Jillian Hansen 4 months ago

    Is there a way to use conditional formula to hide a column when not equal to value in choice column? I used the following but does not seem to be working =if([$Category]!='Product Management','true', 'false').

  27. Suneel Prakash 4 months ago

    Awesome video. A question from my end is whether we could hide the entire section based using the conditional formatting ??

  28. One Stop Systems 4 months ago

    Hi Reza, thank you for the video tutorial. This is awesome, easy to follow and understand. My question: Can you show a video on how to make a page for the sharepoint list (i.e Issue Tracker). I made a simple FAQ list and I would like to create a page for that to show its content (the list). I appreciate it if you have a video for this. Thank you so much.
    Basically, How do I add a SharePoint list to a page or create a new page for the sharepoint list (like the issue tracker)?

  29. Ankur Gulati 4 months ago

    Great Video Reza. One Question: Is there a way to have a separate configuration for New item form and Edit item form? I want some fields on New and some additional fields on Edit list form along with different conditions. This would be on sharepoint online modern list.

  30. Ahmad Alamili 4 months ago

    Can we use the internal name for the list and fields ?

  31. Pir Khurram Rashdi 4 months ago

    Informative training. Thanks

  32. Thomas Vollmann 4 months ago

    Thx! Great Video!
    Can i set a Field to read Only in a Form based on a condition?
    For Example: in These is some Value in Field „a“, then set Field „b“ to read only in a edit form.
    Thx

  33. Shivin Khanna 4 months ago

    Very informative video 👍👍

  34. David Prentice 4 months ago

    How do you display the ID? I've tried [$ID], but get an error that its not found. This is on viewing an existing record.

  35. FitRia00 4 months ago

    Great video Reza!
    Can i using this JSON Formatting to disable the save button depend on status?

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

©2021 TDG - We Are Back Baby!

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending
or

Log in with your credentials

or    

Forgot your details?

or

Create Account