Transform SharePoint default list forms with HTML, CSS and JavaScript

Transform SharePoint List Forms
with HTML, CSS and JavaScript
Turn the out-of-the-box SharePoint list forms
into custom styled forms

• Intro
• Custom “Form” Approach
• Next Steps
• Resources
Agenda
Transform SharePoint Forms

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

• .NET / SharePoint solution and technical architect
• Over 18 years experience developing business
solutions for private industry & government
• Recent clients include 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 Dreamweaver
• 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

Based on Mark Rackley’s original approach, Easy
Custom Layouts for Default SharePoint Forms
• Modify Default List Form Web Parts
• Use Content Editor webparts to inject HTML and
JavaScript
• Inject alternate HTML “form” to define new layout
• Inject JavaScript to move SP fields to new layout
Acknowledgements

• Add CSS to Default New, Display and Edit forms
• Inject text and HTML using JavaScript
• Use any supported HTML, CSS, and JavaScript
• Use any JavaScript framework
• Eg, jQuery, jQuery UI and plugins
Style Existing “Forms”

• Create a styles markup page in Site Assets library:
<script src="//code.jquery.com/jquery-1.10.1.min.js"></script>
<style type="text/css">
.ms-formlabel h3.ms-standardheader {font-weight:bold; text-align:
right; padding-right: 10px;}
</style>
<script>
$(document).ready(function() {
$(".ms-formlabel h3.ms-standardheader").each(function(){
$(this).append(“ :");
});
});
</script>

• Load jQuery:
</style>
<script>
});
});
</script>

• Apply font / align / pad style to field header:
</style>
<script>
});
});
</script>

• Inject text into DOM:
</style>
<script>
});
});
</script>

• Edit each of the New, Display and Edit forms

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

• Link to styles markup
page

• Note style changes

• Final result

• Style existing form
Demo #1

• 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
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>
</td>
<td>
</td>
</tr>
...
</table>

• Use placeholder for moved fields
<tr >
<td>
<b>Title:</b><br>
</td>
<td>
</td>
</tr>
...
</table>

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

• Traverse placeholders in custom form
<script>
elem = $(this);
}
});
});
});
</script>

• Find corresponding fields in OOTB form
<script>
elem = $(this);
}
});
});
});
</script>

• Move fields from OOTB form to custom form
<script>
elem = $(this);
}
});
});
});
</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 #2

• Add Custom Tab “form”
• Move Edit Controls into Custom Tab “form”
• Hide OOTB HTML “form” table
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">
<b>Title:</b><br>
</div><br/>
<div class="row">
</div><br/>
...
</div>

• Define tabs:
<div id="tabs">
<ul>
</ul>
<div id="tabs-1">
<div class="table">
<div class="row">
<b>Title:</b><br>
</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">
<b>Title:</b><br>
</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() {
ui.css";
});
</script>

• Activate jQueryUI tabs:
<script>
$(function() {
ui.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 #3

• 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
• Field titles are initially hard coded (eg unilingual),
but additional line of JavaScript will move them as
well
Cons of Custom “Form”

• Learn JavaScript
• Learn SharePoint’s flavour of JavaScript, its
objects, helper functions, and APIs
• Customize a SharePoint View / Edit form with an
embedded HTML form
• Customize a SharePoint field on a View / Edit form
with a field display template
• Never again leave an ugly OOTB SharePoint form
as is!
Next Steps

• Mark Rackley – Easy Custom Layouts for Default
SharePoint Forms (blog)
• 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 at softwarecraft dot ca
• softwarecraft dot ca
• at softwarecraft99
Contact Me

Transform SharePoint default list forms with HTML, CSS and JavaScript

More Related Content

What's hot (20)

More from John Calvert (14)

Recently uploaded (20)

Transform SharePoint default list forms with HTML, CSS and JavaScript