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

Recommended

More Related Content

What's hot (20)

Similar to Transform SharePoint List Forms with HTML and CSS (20)

More from John Calvert (14)

Recently uploaded (20)

Transform SharePoint List Forms with HTML and CSS

Editor's Notes