Transform SharePoint List Forms with HTML and CSS

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

Thank you to all of our Sponsors!!

• Intro
• Approach
• Simple Styling
• Custom Table Form
• Custom Div Form
• Next Steps
• Resources
Agenda
Transform SharePoint Forms

• CloudShare – Environments Made Easy
• http://www.cloudshare.com/
Thank you to my sponsor

• 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

Default List Forms
• Plain & simple
• Single long column
• Titles have no
emphasis
• Very limited field
validation
• No field correlation
• In short, it’s UGLY!

• 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

• Custom master page
• SharePoint markup (CAML)
• Delegate controls and custom actions
• Farm / sandbox solutions
• SharePoint Designer
• InfoPath forms
• Visual Studio
Avoid Heavy-Weight Solution

Basic “Form” Sample Outcomes

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

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

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>

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

• 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;}

• Selector specificity is important to understand
• Heather Solomon – SharePoint CSS and CSS
Specificity
• Not strictly numerical, no carry over when
summing values
Weight 1,000 100 10 1 0
Selector Type Inline style ID Class
Attribute
Pseudo-class
Element
Pseudo-element
Universal (*)
Inherited

• 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”

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

• In-line styling using F12 Developer Tools
• Easy way to get familiar with CSS
• No consequences, just refresh page to clear
Demo #1

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

• Edit each of the New, Display and Edit forms
Simple Styling

• Add a Script Editor
web part
Simple Styling

• Insert style element
with CSS
Simple Styling

• Note style changes
Simple Styling

• Final result
Simple Styling

• Simple styling in Script Editor webpart
Demo #2a

• Create a styles markup file in Site Assets library:
<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 b

• Add a Content Editor
web part
Style Existing “Form”

• Link to styles markup
page

• Note style changes

• Final result

• Simple styling in script file linked to Content Editor
webpart
Demo #2b

• 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”

• 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>

• Apply styling
<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>

• Use placeholder for moved fields
<tr >
<td>
<span class="customLabel" data-internalName="Title"></span>
<br>
<span class="customField" data-internalName="Title"></span>
</td>
<td>
<span class="customLabel" data-internalName="Status"></span>
<br>
<span class="customField” data-internalName="Status"></span>
</td>
</tr>
...
</table>

• Create a move fields script in Site Assets library:
<!– include jQuery -->
<script>
$(document).ready(function() {
$("span.customField").each(function() {
elem = $(this);
sib = $(this).parent().children(".customLabel").first();
internalName = $(this).attr("data-internalName");
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf(
'FieldInternalName="'+internalName+'"') != -1){
$(this).contents().appendTo(elem);
$(this).prev().contents().appendTo(sib);
}
});
});
});
</script>

• Add two Content
Editor web parts
Custom HTML “Form”

• Link first to custom
HTML “form” layout
page

• Link second to move
fields script

• Note layout changes

• Final result

• Simple TABLE-based layout
Demo #3

• Add Custom Tab “form”
• Move Edit Controls into Custom Tab “form”
• Hide OOTB HTML “form” table
• Use any supported HTML, CSS, and JavaScript
• Use any JavaScript framework
• Eg, jQuery, jQuery UI and plugins
Design Custom Tab “Form”

• Create a form layout page in Site Assets library:
<div id="tabs">
<ul>
<li><a href="#tabs-1">General</a></li>
<li><a href="#tabs-2">Description</a></li>
<li><a href="#tabs-3">Related</a></li>
</ul>
<div id="tabs-1">
<div class="table">
<div class="row">
<span class="customLabel" data-internalName="Title"></span><br>
</div><br/>
<div class="row">
<span class="customLabel" data-internalName="Status"></span><br>
<span class="customField" data-internalName="Status"></span>
</div><br/>
...
</div>

• Define tabs:
<div id="tabs">
<ul>
</ul>
<div id="tabs-1">
<div class="table">
<div class="row">
</div><br/>
<div class="row">
</div><br/>
...
</div>

• Use placeholders for moved fields:
<div id="tabs">
<ul>
</ul>
<div id="tabs-1">
<div class="table">
<div class="row">
</div><br/>
<div class="row">
</div><br/>
...
</div>

• Enable jQuery UI tabs in move fields script:
<script src="//code.jquery.com/ui/1.11.4/jquery-
ui.min.js"></script>
<script>
$(function() {
var css =
"//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css";
document.createStyleSheet(css);
$( "#tabs" ).tabs();
});
</script>

• Inject stylesheet reference for tab styling:
<script>
$(function() {
var css =
});
</script>

• Activate jQueryUI tabs:
<script>
$(function() {
var css =
});
</script>

• Add two Content
Editor web parts
Custom Tab “Form”

• Link first to custom tab
“form” layout page

• Link second to
enhanced move fields
script

• Note layout changes

• Final result

• DIV-based layout with tabs
Demo #4

• 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”

• 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”

• 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

• 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

• John Calvert, Chief Architect
• Software Craft, Inc.
• john (a) softwarecraft dot ca
• softwarecraft dot ca
• (a) softwarecraft99
Contact Me

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!

Transform SharePoint List Forms with HTML and CSS

In this document