Customizing SharePoint’s Modern Lists’ Forms

Ya know that awesome new interface we get in Office 365 called Modern Lists? Ya know how that’s not editable, or customizable, or extensible? Well, ya know it right! It’s not.

However…

Above is a typical modern list, in all of it’s glory. Pretty right? But I want to add some of my own code to this and do some cool customizations. Currently, that’s only reserved for the classic list view:

I just threw up a little in my mouth. 

What if we took the classic view, and persuaded it to be modern, but keep the beauty of customizations? It’s just some good ‘ole CSS, and yes I’ll share.

Quick steps on what to do:

1. Download this little CSS file (click here for project on github).
2. Upload the CSS file to SharePoint somewhere, like your Site Assets library
3. Create a quick HTML file with just a link to the CSS file, i.e. <link rel=”stylesheet” href=”/SiteAssets/classic_modern.min.css”></link>.
4. Upload the HTML file to SharePoint
5. In the library where you uploaded the files, right click on the HTML file, Get Link, then select Restricted Link, and copy that URL
6. Navigate to your list.
7. Ensure it’s in Classic mode, and will stay that way. Go to List Settings, then Advanced settings. Scroll all the way down to List Experience and select Classic experience.
8. Navigate back to your list and create a new item.
9. Use the cog in the top right, and select Edit page.
10. Add a Content Editor Web Part and set the Content Link to the URL of your HTML file.
11. Save it all and reload the page, BLAMO
12. I have a more indepth walk through on how to do this using a JavaScript file here, same applies to a CSS file.

YAY!

The flow and feel of the classic form is a lot more like the modern form, but ’tis classic.

Some Notes

• Terrifyingly enough, the CSS for the modern lists are on the pages themselves, not in a CSS file I can reference. So there was a lot of copy/pasting of CSS from a modern list to this CSS file.
• Your classic list form will have the full ribbon, this CSS is primarily focused on the form interface for users.
• This will not do anything on the list view pages, I haven’t bothered styling those yet.
• If you wanted to, you could put this CSS into a global CSS file so all classic lists will have similar interfaces.
• This CSS is not all inclusive, it should get you most of the way there. If you do add to it, please feel free to share on the github project, or send me the changes.

Thanks, and ’til next time Happy SharePointing!