Customize SharePoint Forms with JSON

Подписаться 47 тыс.

Просмотров 33 тыс.

50% 1

#SharePoint #Forms #ListFormatting
Do you need to make some simple list form customizations to your SharePoint/Microsoft Lists? In this video I go over some brand new functionality that allows you to do just that! Using the same technology called SharePoint List Formatting that allows us to customize the look and feel of our SharePoint columns and views, we can now customize our SharePoint Forms! 😍😍😍
✅ Header Formatting Sample: github.com/aprildunnam/ListFo...
✅ Footer Formatting Sample:
github.com/aprildunnam/ListFo...
✅ Asset Management List Template Body Format Sample:
github.com/aprildunnam/ListFo...
✅ More on List Formatting:
github.com/pnp/sp-dev-list-fo...
Table of Contents:
00:00 - Intro
00:38 - Accessing the Form Customization option
02:12 - Use Cases
03:11 - Adding a Header to your form
04:41 - Adding a Footer to your form
05:31 - Customize the Form Body
07:00 - Outro

Наука

Опубликовано:

21 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 101

@kzerwat4215 3 года назад

Hi April, wonderful video :) ! I don't have the icon at the top right allowing to add the JSON code, I'm in france, thank you

@AprilDunnam 3 года назад

Hey Khalid - This functionality is currently being rolled out so it might take awhile before it hits your tenant. It is rolling out in First Release tenants at the moment and will be available to all tenants shortly :)

@kzerwat4215 3 года назад

@@AprilDunnam great thank you

@hokki28 3 года назад

@@AprilDunnam What does shortly mean?

@cvkealey 3 года назад

Thanks for this video! I got legitimately excited to see this capability show up in our tenant yesterday. After the way 2021 is starting off, I'm happy for any positive changes! However, it would be really great if MS (or the community) had some solid documentation out on these features before they start rolling out. It's frustrating when users find something, ask us (SP support team) how to use it and we've got no formal/official documentation to back us up.

@AprilDunnam 3 года назад

I know the feeling Chad - I got so excited when I saw this show up in my tenant! That's a valid point and one reason that I put out this video. I am sure there will be much documentation and samples coming soon! The SharePoint PnP team is great about getting samples and documentation out for stuff like this!

@markthomas9641 2 года назад

Great example, thank you. DeltaJSON is really useful if you are working with JSON, it does compare, merge and graft.

@jaggyjut 2 года назад

The SharePoint form after applying json formatting looks much better than some of the power apps forms. Thank you for sharing. 😊

@AprilDunnam 2 года назад

You're welcome!

@SauloOliveira 3 года назад

Great video April, very useful this feature. Thank you!

@AprilDunnam 3 года назад

You're very welcome Saulo - thanks for watching!

@xAshCOREx 3 года назад

This was super helpful and much better for standardizing forms across multiple lists (PowerApps isn't a fan of replication for a different list)! Small problem I am running into however is the header formatting doesn't seem to like the [$Title] variable. I can't pull in the title of the list item into the header or the body, any ideas?

@Dalvazar 3 года назад

Great video! Super helpful! In your example, would there be a way to change the icon in the header for each "Status"? For example, if I wanted the icon for "Available" to be a check mark, but the icon for "In use" to be something else?

@luismoraes3063 3 года назад

Hi April, great video. is there a way to change the size of an item in the form, like the "Notes" field being 3 columns wide?

@glasskitesmedia 3 года назад

Really helpful. Can I ask how you added the sub-text for the fields e.g. "Checkout status of the issue" and "Image of the assest" as shown in 6:48 ?

@lornabrooke9848 3 года назад

Thank you for the video I am loving this new feature. Is there a way you can use the footer to execute a flow? I have a SharePoint list which has a send to approver button which triggers an approval flow. I was wondering if this could be made into the footer so the person actioning the item can edit the information and then send for approval without having to save and then scroll to find the button. I have tried to use the JSON I have in the Column formatting which makes the button appear but I am not getting very far.

@kristinaruis372 3 года назад

Hi April. Great video! Is there a way to add a description under displayname in a section?

@rserigne 3 года назад

Great explanation... I'm learning as I go with this and I have one question that I'm hoping someone might be able to answer! I've gotten my list to format exactly as April format in the video... Each section creates multiple columns that populate with fields without any issues but... is there a way to make it so that one section expands the fields across all columns instead of breaking it up into multiple columns?

@unknown4u167 Год назад

LOVE THE VIDEO! But one question: Could you confirm if there is a way to apply text styles (i.e., bold, italic, etc.) or font size to the section names to the Form Body formatting?

@ivanhernandez4691 3 года назад

Hi April, awesome video. I try to watch all your videos I learn a lot from you. I'm what you would refer to as a citizen developer nowhere near pro so I'm wondering if I'm missing something. In the header JSON I do not get the header to display. Is there something that I need to modify in the JSON. The Body and Footer worked just missing the Header which I copy and pasted.

@ethemgok4883 3 года назад

Hi April, It's a very useful video, thank you very much. I have a question; is it possible to drill-down on a SharePoint Default form with JSON?

@mauricevold8753 3 года назад

This was great Apil thanks.

@AprilDunnam 3 года назад

Glad you liked it! Thanks for watching!

@jakeli7306 3 года назад

Hi April, thanks for sharing. This is something I've been waiting for months. Can you shed some light on how to show the fields with different labels rather than their internal names? For example, what if we want to show the label of the field (internal name: FirstName) as "First Name" on the form?

@jakeli7306 3 года назад

Hi April, am I correct in assuming that we can add the following JSON code in the body section to change the label for the field in question? "children": [ { "elmType": "div", "txtContent": { "operator": "+", "operands": [ "First Name: ", "[$FirstName]" ] }, "style": { "height": "24px" } } ]

@RichardDalrympleplus 3 года назад

@April Dunnam Love the video was able to get one of my lists looking great. However im not a programmer and im trying to figure out how to have my header just take the image field and a client name field we have for the top. Anyone know how to do that?

@gregoryreddin1222 3 года назад

Hi April, it there a way to have sections in the form without it using a multi-column layout mode? Just a single column down the form but still with sections?

@robinjamesnjarlely 3 года назад

Nice feature, loved it. I am gonna use this.

@AprilDunnam 3 года назад

Glad you liked it - looking forward to seeing how you use it!

@johnathanschwager1408 Год назад

I just found this Video and Love it!!! I have a List with a Power app form and want to know how to revert back to the standard form. Is this possible and how?

@Jyotika4 2 года назад

Very helpful video. Thank you

@AprilDunnam 2 года назад

Glad it was helpful!

@_DaemonCleaner 3 года назад

Thank you for the video!

@AprilDunnam 3 года назад

You're very welcome - thanks for watching!

@andriescorneliusnienaber 8 месяцев назад

Simply a must watch video tutorial

@AprilDunnam 8 месяцев назад

Thanks so much!

@ptetdainty 3 года назад

Worked a treat for me April - excellent Tut (keep em coming) - is there a way to force the number of columns on a form, as it is it spans as wide as the browser; it would be nice to be able to force 2 or 3 columns max.

@bh1696 2 года назад

I’m also looking for a solution to this, please let me know if anyone knows how to do this.

@bh1696 2 года назад

Hey April, is there anyway we can limit the form to 2 columns max for aesthetics purposes?

@ktaber317 3 года назад

Have you figured out how we can use the created by email as the Teams url?

@rafaellatorre2898 3 года назад

Thank you very much for the video, it has opened a door for me. The video shows a form with 4 columns but I have copied the header and footer in a test list and I only get 3. Where can I configure the number of columns in the form or expand it to at least 4? (Excuse my English as a translator) Edited. I have verified that modifying the screen configuration I get 4 columns.

@timkeehan7039 2 года назад

Hi April! Great video! Is there a way to change the font color of the section names ("displayname")?

@AprilDunnam 2 года назад

Yes you can add a styles parameter to change the font color :)

@nathangarner5775 2 года назад

Great video, April. How did you get the Save button at the bottom of the Form? Is this some setting I'm missing?

@AprilDunnam 2 года назад

That should be there by default in all modern SharePoint list forms

@sassyshine1829 Год назад

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?

@RPAChampion 3 года назад

This is really cool thanks for the video.Best way to learn is to follow by example.

@AprilDunnam 3 года назад

Glad you liked it!

@RPAChampion 3 года назад

@@AprilDunnam will you be doing any RPA videos?

@charlestongeek964 3 месяца назад

Awesome. Quick question: How would I add a link to the form the pulls in that contact information you had in the form? It would be nice to have a "Email Contact" button in the Header or Footer. Or Example Company list with Multiple Lookup "Contacts" field to "Email Contacts"?

@carlw 3 года назад

Thanks April, very educational. I will subscribe. I do have an issue however. Setting it all up and previewing works fine but when I go to add a new record the newly configured form only shows up as a single column rather than the three like you show. Edit: I just saw Jack Failla's response. Yup turns out it was just Edge and similarly a restart on it fixed it. Just another fine gotcha from Microsoft.

@AprilDunnam 3 года назад

Yeah the Edge thing is throwing a wrench in it for sure - I need to add a note to the video description warning people of the Edge issue!

@carlw 3 года назад

@@AprilDunnam Haha. Far be it for Microsoft to fix one of their own issues.

@brianhiggins9986 2 года назад

Can you have an accordion or hide a section based on another field?

@alomarvelazquez 2 года назад

Hello April! I'm working in a SharePoint List for my company but I would like to know if I could create two columns inside a column in that SP List. Do you know if that is possible? I thought the answer was "Metadata Column" or usign JSON Format but I can't solve my problem. Your videos are awersome and help me to know more funcitions in M365 enviroment. Have a nice day! Regards :)

@jbwise2002 3 года назад

Finally! Using powerapps is great but really breaks the powerful MS Lists integrated feel in teams and sharepoint. Can you format field input controls like change a number field to a slider control?

@AprilDunnam 3 года назад

Hey Joseph - I don't believe that you can change how an input control functions with the list formatting right now because that would require interactivity therefore some kind of script. List formatting is really just apply styling (CSS) to the form.

@SunnyVandenbossche Год назад

Hi. I used this for 1 of my lists. It was decided after the fact to enable content types which now how up at the bottom of my edit form. Is there any way to move it?

@cmac6877 3 года назад

can you style the displayname in sections ?

@TDevolder 3 года назад

Great! Thx!

@AprilDunnam 3 года назад

You're welcome - thanks for watching!

@geraldslonaker3289 2 года назад

April...is it possible to use JSON to combine data from 3 different fields into an Sharepoint Calendar Event "Title" field? I can't use a new field because I want this to show up in an Outlook Calendar which uses the Title field and to make matters worse, one of the three fields I want to display I'm the Title comes from a Lookup column which can't be used in a calculated field

@chaddytee726 3 года назад

awesome April, question tho, if I want to use my own icon for the header, can I do this??? do I need to reference the icon someplace in SharePoint?

@AprilDunnam 3 года назад

Hey Chad - You can reference your own image - it just has to be somewhere accessible like SharePoint

@olivergrobs349 3 года назад

Since I found SP Formatter in Chrome/Edge Store and also installed the plugin for VS Code, editing JSON aus not a mess anymore. Also no more copy&paste try&error.

@AprilDunnam 3 года назад

SP Formatter is awesome!

@chap666ish 3 года назад

@@AprilDunnam I'd never even heard of SP Formatter before. Googled it and it looks rather handy!

@issiewizzie 3 года назад

My saviour and I am serious :) April

@AprilDunnam 3 года назад

Well I'm glad this was helpful Issie! Thanks for watching :)

@sundrapillay6668 3 года назад

Thanks April

@AprilDunnam 3 года назад

Thanks for watching!

@revatichaudhari1694 2 года назад

Is it possible to apply cascading dropdown in forms using json?

@xyzphd122 2 года назад

Is this possible to do in 2013? I’m currently not able to use powerapps and this looks like a great feature to apply to older sharepoint forms!

@AprilDunnam 2 года назад

Hi Andrew! Unfortunately this is only for SharePoint Modern lists (Online or SP2016 modern and above)

@davidwebster2616 3 года назад

Hi April, thank you for the video. I did (I believe) everything you did, and the column information is not displaying, but I have the icon and title. Drop down info from that field is not displaying. Any suggestions? I have it spelled corrected in "[$field name]". Any suggestions from anyone here would be helpful as well.

@kathrynhaycock7036 3 года назад

I have this same problem! I thought it was because the field name had a space in it, but even after removing the space and renaming it, it still doesn't show.

@manublr 2 года назад

Can display name of a section be combined with values from the SPO list? Eg- I want section to have a display name Below section has employment details of Adam Jones Here ‘Adam Jones’ is from the Name column of the record.

@abuena73 3 года назад

What if column or field has a description, how to show it into a customized column with JSON..?

@failla84 3 года назад

Awesome work as always. One question. I've used your code with only changes for the form field names. In preview the form shows as three columns but in actual use it is only one. Am i missing something? Edit: Please disregard. Turns out it was just Edge being Edge. Restarted it and it shows as expected.

@AprilDunnam 3 года назад

Awesome - glad Edge decided to cooperate and it's working :)

@yazidsalehuddin7633 3 года назад

Wow, i had been wondering why i also having the same problem as you (i'm using Mozilla) and then i read your comment and try this on Edge and it work (pffttt.....)

@stacie14 3 года назад

Is there a way to change the font color of one of the field names in the Body? I've tried but can't figure out where to but font color.

@AprilDunnam 3 года назад

Hey! Yes you can. You would add that in the style section of the formatting which contains your text value like so: { "elmType": "div", "style": { "color": "#1A5A92", "font-weight": "900", "font-size": "14px" }, "attributes": { "iconName": "Add" } }

@davem3911 3 года назад

can we change the color / size of the text? and can we change color of the fields? thank you

@AprilDunnam 3 года назад

Hey Dave - yes, all of that can be done by adding a style property to the JSON formatting. There are a ton of samples on the PnP repo that show how to use the style attribute to control things like color and size

@relaxingmusicsoundcorner9127 2 года назад

Can we print out that forms?

@tammylang2697 Год назад

Has this changed since 2021. I am using your code but it will not show the field value. My field is [$RequestID]. WIth no changes to your code except the name of the field, nothing appears. I have tried this with all fields on the form. What am I missing?

@ShaneC0271 2 года назад

I feel like creating and styling elements directly with HTML/CSS is like talking face to face with someone in a quiet and peaceful room whereas doing the same in SharePoint via JSON formatting is like shouting to someone through a malfunctioning megaphone across a ravine in the middle of a snow storm.

@AprilDunnam 2 года назад

This is quite possibly the best comment I've gotten. Kudos to you.

@timrayworth929 3 года назад

Is it possible to modify list views (table, gallery, or calendar) with JSON?

@AprilDunnam 3 года назад

Hey Tim - Yes you can definitely do that. I show an example of it in this video: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-9TpzfmPMzDI.html You can find a ton of great samples of how to customize list views here: github.com/pnp/sp-dev-list-formatting