This document discusses transforming SharePoint list forms by customizing the out-of-the-box forms using HTML, CSS and JavaScript. It presents three approaches to customizing the forms: styling the existing forms, using a custom HTML table layout, and using a custom tab layout. It demonstrates moving fields from the default forms into the custom forms using JavaScript. The approaches allow creating attractive, customized forms without requiring advanced tools like SharePoint Designer.
Transform SharePoint default list forms with HTML, CSS and JavaScript
1. Transform SharePoint List Forms
with HTML, CSS and JavaScript
Turn the out-of-the-box SharePoint list forms
into custom styled forms
2. • Intro
• Custom “Form” Approach
• Next Steps
• Resources
Agenda
Transform SharePoint Forms
3. • CloudShare – Environments Made Easy
• http://www.cloudshare.com/
Thank you to my sponsor
Transform SharePoint Forms
4. • .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
Transform SharePoint Forms
5. 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
6. • 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
Transform SharePoint Forms
7. • 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
8. 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
Transform SharePoint Forms
9. • 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”
Transform SharePoint Forms
10. • 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>
Style Existing “Forms”
Transform SharePoint Forms
20. • 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
21. • 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
47. • 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
48. • 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”
Transform SharePoint Forms
49. • 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
Transform SharePoint Forms
50. • 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
Transform SharePoint Forms
51. • John Calvert, Chief Architect
• Software Craft, Inc.
• john at softwarecraft dot ca
• softwarecraft dot ca
• at softwarecraft99
Contact Me
Transform SharePoint Forms
