1. Transform SharePoint List Forms
with HTML and CSS
Turn the out-of-the-box SharePoint list forms
into custom styled forms
John Calvert
Chief Architect
Software Craft, Inc
john (a) softwarecraft dot ca
Nov 21, 2015
3. • Intro
• Approach
• Simple Styling
• Custom Table Form
• Custom Div Form
• Next Steps
• Resources
Agenda
Transform SharePoint Forms
4. • CloudShare – Environments Made Easy
• http://www.cloudshare.com/
Thank you to my sponsor
Transform SharePoint Forms
5. • SharePoint / .NET solution and technical architect
• Over 18 years experience developing business
solutions for private industry & government
• Recent clients include StatCan, HoC, Justice Canada,
NRC, NSERC, DFAIT, CFPSA, MCC, OSFI
• Specialize in Microsoft technologies
• Speaker at user groups and conferences
About Me
Transform SharePoint Forms
6. Default List Forms
• Plain & simple
• Single long column
• Titles have no
emphasis
• Very limited field
validation
• No field correlation
• In short, it’s UGLY!
Transform SharePoint Forms
7. • Style the default New, Display and Edit list forms
• Use a light touch, minimalist approach
• In web design tool of choice, eg Notepad++,
Dreamweaver, etc
• Implement using pure HTML, CSS, and JavaScript
Desired Situation
Transform SharePoint Forms
8. • Custom master page
• SharePoint markup (CAML)
• Delegate controls and custom actions
• Farm / sandbox solutions
• SharePoint Designer
• InfoPath forms
• Visual Studio
Avoid Heavy-Weight Solution
Transform SharePoint Forms
10. Mark Rackley’s Easy Custom Layouts for Default
SharePoint Forms
• Inject alternate HTML “form” to define new
layout
• Inject JavaScript to move SP fields to new
layout
Dustin and Heather of SharePoint Experience
• Pure CSS approach
Acknowledgements
Transform SharePoint Forms
11. Bad and Good News
Bad News
• You have to learn HTML and CSS
HTML = Hypertext Markup Language
• Computer language that describes the structure
and content of web pages
CSS = Cascading Style Sheet language
• Computer language that describes the
appearance of web pages
Good News
• You have to learn only a little HTML and CSS
Transform SharePoint Forms
12. One Minute Intro to HTML
• Describes structure and content of web pages
• Headings
• <H1></H1>
• Table structure:
• <TABLE><TR><TD></TD></TR></TABLE>
• Div layout:
• <DIV><DIV><DIV></DIV></DIV></DIV>
Transform SharePoint Forms
13. Two Minute Intro to CSS
• Selectors { declarations }
Selectors
• Element HTML tag, eg H1
• Class name, eg .ms-formlabel
• Element ID, eg #WebPartWPQ2
Declarations
• font-weight: bold
• text-align: right
• pad: 10px
Cascading Style Sheets (MSDN) reference
Transform SharePoint Forms
14. Two Minute Intro to CSS
• Each can be combined multiple times
Selector
• .ms-formlabel h3.ms-
standardheader
• Specificity is important to understand
Declaration
• {font-weight:bold; text-align:
right; padding-right: 10px;}
Transform SharePoint Forms
15. Two Minute Intro to CSS
• Selector specificity is important to understand
• Heather Solomon – SharePoint CSS and CSS
Specificity
• Not strictly numerical, no carry over when
summing values
Transform SharePoint Forms
Weight 1,000 100 10 1 0
Selector Type Inline style ID Class
Attribute
Pseudo-class
Element
Pseudo-element
Universal (*)
Inherited
16. • Use any supported CSS or HTML
• Add CSS to form
• Add text and HTML in new blocks on form
• Inject text and HTML into existing blocks
• Simple helper JavaScript function to
restructure form
• Requires turning off site-scoped feature
Minimal Download Strategy
Style Existing “Forms”
Transform SharePoint Forms
17. Intro to List Forms
• New, Display and Edit Forms
• Editing forms in browser
• Inspecting structure of forms using F12
“Developer Tools”
• HTML elements
• SharePoint class names
• Heather Solomon – SharePoint 2010 CSS
Reference Chart
Transform SharePoint Forms
18. • In-line styling using F12 Developer Tools
• Easy way to get familiar with CSS
• No consequences, just refresh page to clear
Demo #1
Transform SharePoint Forms
19. Prepare styling markup:
• Apply font / align / pad style to field header
<style type="text/css">
h3.ms-standardheader {
text-align: right;
padding-right: 10px;
}
.ms-formlabel h3.ms-standardheader {
font-weight:bold;
}
.ms-formlabel h3.ms-standardheader:after {
content : " :";
}
</style>
Simple Styling, part a
Transform SharePoint Forms
20. • Edit each of the New, Display and Edit forms
Simple Styling
Transform SharePoint Forms
21. • Add a Script Editor
web part
Transform SharePoint Forms
Simple Styling
22. • Insert style element
with CSS
Simple Styling
Transform SharePoint Forms
23. • Note style changes
Simple Styling
Transform SharePoint Forms
32. • Simple styling in script file linked to Content Editor
webpart
Demo #2b
Transform SharePoint Forms
33. • Add Custom HTML “form” table to Default New,
Display and Edit forms
• Move Edit Controls into a Custom HTML “form” table
• Hide OOTB HTML “form” table
• Use any supported HTML, CSS, and JavaScript
• Use any JavaScript framework
• Eg, jQuery, jQuery UI and plugins
Design Custom HTML “Form”
Transform SharePoint Forms
34. • Create a form layout page in Site Assets library:
<table cellpadding="5" cellspacing="5" bgcolor="#CCCCCC" >
<tr>
<td>
<b>Title:</b><br>
<span class="customForm" data-internalName="Title"></span>
</td>
<td>
<b>Issue Status:</b><br>
<span class="customForm" data-internalName="Status"></span>
</td>
</tr>
...
</table>
Design Custom HTML “Form”
Transform SharePoint Forms
57. • Pure web-based solution (HTML, CSS, JavaScript)
• Does not require SharePoint Designer or InfoPath
• Requires only limited permissions
• Manage Lists for initial config of web parts on default
forms
• Edit document to revise HTML or Tab “form” layout
Pros of Custom “Form”
Transform SharePoint Forms
58. • Field list on “form” is hard coded not dynamic
• List column management not tied to “form” design
• Scroll area height may not be set correctly
• May be slow on mobile
Cons of Custom “Form”
Transform SharePoint Forms
59. • Learn HTML for form layout
• Learn CSS Descriptors for styling
• Learn key SharePoint class names for selectors
• Customize a SharePoint New / Display / Edit form
with an embedded HTML form
• Never again leave an ugly OOTB SharePoint form as
is!
Next Steps
Transform SharePoint Forms
60. • Mark Rackley – Easy Custom Layouts for Default
SharePoint Forms (blog)
• Heather Solomon – SharePoint 2010 CSS Reference Chart
• The 30 CSS Selectors you Must Memorize
• MSDN – CSS Selectors and Declarations – Alphabetical
Index
• Martin Hatch – JSLink and Display Templates (blog)
• Todd Bleeker – Custom Forms and Conditional
Formatting in SharePoint 2013 (conference)
• Sly Gryphon – Ways to load jQuery in SharePoint
(2010/2013)
Resources
Transform SharePoint Forms
61. • John Calvert, Chief Architect
• Software Craft, Inc.
• john (a) softwarecraft dot ca
• softwarecraft dot ca
• (a) softwarecraft99
Contact Me
Transform SharePoint Forms
62. At the Observatory Student Pub in Building A
4:10 pm: New! Experts’ Panel Q&A
4:30 pm: Prizes and Giveaways
4:45 pm: Wrap-up and SharePint!
Parking: No need to move your car!*
If you don’t know where the Observatory is, ask an organizer or a
volunteer for directions.
Remember to fill out your evaluation forms to win some great prizes!
Join the conversation – tweet at #spsottawa
New and Improved!
SharePint!
Editor's Notes
At the end of the day, please ensure your evaluation is signed and handed in for door prizes. The draw takes place in The Observatory
Heather has not published an equivalent chart for SharePoint 2013, only a focus in on SP2013 specific problematic classes that are not relevant to list forms
Issue rendering List ribbon Customize List group Form Web Parts item:
Chrome O365 OK; CloudShare OK
MS Edge O365 OK; CloudShare Failed to retrieve forms for list
MSIS11 O365 OK; CloudShare Failed to retrieve forms for list