SlideShare a Scribd company logo
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
Transform SharePoint Forms
• .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
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
• 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
• 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
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
• 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
• 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
• Load jQuery:
<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
• Apply font / align / pad style to field header:
<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
• Inject text into DOM:
<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
• Edit each of the New, Display and Edit forms
Style Existing “Forms”
Transform SharePoint Forms
• Add a Content Editor
web part
Style Existing “Form”
Transform SharePoint Forms
• Link to styles markup
page
Style Existing “Form”
Transform SharePoint Forms
• Note style changes
Style Existing “Form”
Transform SharePoint Forms
• Final result
Style Existing “Form”
Transform SharePoint Forms
• Style existing form
Demo #1
Transform SharePoint Forms
• 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
• 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
• Apply styling
<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
• Use placeholder for moved fields
<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
• Create a move fields script in Site Assets library:
<!– include jQuery -->
<script>
$(document).ready(function() {
$("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>
Design Custom HTML “Form”
Transform SharePoint Forms
• Traverse placeholders in custom form
<!– include jQuery -->
<script>
$(document).ready(function() {
$("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>
Design Custom HTML “Form”
Transform SharePoint Forms
• Find corresponding fields in OOTB form
<!– include jQuery -->
<script>
$(document).ready(function() {
$("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>
Design Custom HTML “Form”
Transform SharePoint Forms
• Move fields from OOTB form to custom form
<!– include jQuery -->
<script>
$(document).ready(function() {
$("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>
Design Custom HTML “Form”
Transform SharePoint Forms
• Add two Content
Editor web parts
Custom HTML “Form”
Transform SharePoint Forms
• Link first to custom
HTML “form” layout
page
Custom HTML “Form”
Transform SharePoint Forms
• Link second to move
fields script
Custom HTML “Form”
Transform SharePoint Forms
• Note layout changes
Custom HTML “Form”
Transform SharePoint Forms
• Final result
Custom HTML “Form”
Transform SharePoint Forms
• Simple TABLE-based layout
Demo #2
Transform SharePoint Forms
• 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”
Transform SharePoint Forms
• 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>
<span class="customForm" data-internalName="Title"></span>
</div><br/>
<div class="row">
<b>Issue Status:</b><br>
<span class="customForm" data-internalName="Status"></span>
</div><br/>
...
</div>
Design Custom Tab “Form”
Transform SharePoint Forms
• Define tabs:
<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>
<span class="customForm" data-internalName="Title"></span>
</div><br/>
<div class="row">
<b>Issue Status:</b><br>
<span class="customForm" data-internalName="Status"></span>
</div><br/>
...
</div>
Design Custom Tab “Form”
Transform SharePoint Forms
• Use placeholders for moved fields:
<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>
<span class="customForm" data-internalName="Title"></span>
</div><br/>
<div class="row">
<b>Issue Status:</b><br>
<span class="customForm" data-internalName="Status"></span>
</div><br/>
...
</div>
Design Custom Tab “Form”
Transform SharePoint Forms
• 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>
Design Custom Tab “Form”
Transform SharePoint Forms
• Inject stylesheet reference for tab styling:
<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>
Design Custom Tab “Form”
Transform SharePoint Forms
• Activate jQueryUI tabs:
<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>
Design Custom Tab “Form”
Transform SharePoint Forms
• Add two Content
Editor web parts
Custom Tab “Form”
Transform SharePoint Forms
• Link first to custom
tab “form” layout
page
Custom Tab “Form”
Transform SharePoint Forms
• Link second to
enhanced move
fields script
Custom Tab “Form”
Transform SharePoint Forms
• Note layout changes
Custom Tab “Form”
Transform SharePoint Forms
• Final result
Custom Tab “Form”
Transform SharePoint Forms
• DIV-based layout with tabs
Demo #3
Transform SharePoint Forms
• 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
• 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
• 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
• 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
• John Calvert, Chief Architect
• Software Craft, Inc.
• john at softwarecraft dot ca
• softwarecraft dot ca
• at softwarecraft99
Contact Me
Transform SharePoint Forms

More Related Content

What's hot (20)

PPTX
SAP HANA Overview
Manjunath Pathapadu
 
PDF
S4HANA Migration Overview
Samir Lalani -CPA
 
PPTX
Sharepoint overview
Richard Christian
 
PPTX
SharePoint Benefits
Sameh Senosi
 
PPTX
Django
Abhijeet Shekhar
 
PPTX
Elements of html powerpoint
Anastasia1993
 
PPTX
SharePoint Folders vs. Metadata Best Practices
Chris Woodill
 
PPTX
L1_RISE_with_SAP_NNN_V3.4.pptx
Guruprasad Bellary
 
PDF
On Demand meat Delivery App Development
GOTESO
 
PPTX
Apache Lucene Basics
Anirudh Sharma
 
PPTX
SAP Fiori ppt
Pushkar Vinchurkar
 
PPT
android layouts
Deepa Rani
 
PPTX
Understanding SharePoint site structure what's inside
Benjamin Niaulin
 
PPTX
SharePoint Document Management
MJ Ferdous
 
PPTX
Microsoft Dynamics 365 Business Central
Roberto Stefanetti
 
PDF
CSS Best practice
Russ Weakley
 
PDF
SharePoint Folders vs. Metadata
Gregory Zelfond
 
PPTX
Decoding SAP S/4HANA System Conversion
Akilesh Kumaran
 
PDF
CSS Grid
Digital Surgeons
 
PPTX
PowerApps Deep Dive
SPC Adriatics
 
SAP HANA Overview
Manjunath Pathapadu
 
S4HANA Migration Overview
Samir Lalani -CPA
 
Sharepoint overview
Richard Christian
 
SharePoint Benefits
Sameh Senosi
 
Elements of html powerpoint
Anastasia1993
 
SharePoint Folders vs. Metadata Best Practices
Chris Woodill
 
L1_RISE_with_SAP_NNN_V3.4.pptx
Guruprasad Bellary
 
On Demand meat Delivery App Development
GOTESO
 
Apache Lucene Basics
Anirudh Sharma
 
SAP Fiori ppt
Pushkar Vinchurkar
 
android layouts
Deepa Rani
 
Understanding SharePoint site structure what's inside
Benjamin Niaulin
 
SharePoint Document Management
MJ Ferdous
 
Microsoft Dynamics 365 Business Central
Roberto Stefanetti
 
CSS Best practice
Russ Weakley
 
SharePoint Folders vs. Metadata
Gregory Zelfond
 
Decoding SAP S/4HANA System Conversion
Akilesh Kumaran
 
PowerApps Deep Dive
SPC Adriatics
 

More from John Calvert (15)

PPTX
Azure IaaS-PaaS Migrations - Lessons Learned
John Calvert
 
PPTX
Lessons learned from migrating a legacy web app to azure
John Calvert
 
PPTX
What's New and What's Out for SharePoint Server 2019 On-Premises
John Calvert
 
PPTX
SharePoint 2016 Platform Adoption Lessons Learned and Advanced Troubleshooting
John Calvert
 
PPTX
SharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
John Calvert
 
PPTX
SharePoint On-Premises Nirvana
John Calvert
 
PPTX
SharePoint 2016 - What’s New and What Matters
John Calvert
 
PPTX
Transform SharePoint List Forms with HTML and CSS
John Calvert
 
PPTX
SharePoint 2013 APIs
John Calvert
 
PPTX
Migrating to SharePoint 2013 - Business and Technical Perspective
John Calvert
 
PPTX
How to be Social with My Sites in SharePoint 2013
John Calvert
 
PPTX
IIBA OO - Is a business analyst required for SharePoint projects?
John Calvert
 
PPTX
SharePoint for the .NET Developer
John Calvert
 
PPTX
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
John Calvert
 
PPTX
Cloud-Based Dev/Test Environments for SharePoint using CloudShare
John Calvert
 
Azure IaaS-PaaS Migrations - Lessons Learned
John Calvert
 
Lessons learned from migrating a legacy web app to azure
John Calvert
 
What's New and What's Out for SharePoint Server 2019 On-Premises
John Calvert
 
SharePoint 2016 Platform Adoption Lessons Learned and Advanced Troubleshooting
John Calvert
 
SharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
John Calvert
 
SharePoint On-Premises Nirvana
John Calvert
 
SharePoint 2016 - What’s New and What Matters
John Calvert
 
Transform SharePoint List Forms with HTML and CSS
John Calvert
 
SharePoint 2013 APIs
John Calvert
 
Migrating to SharePoint 2013 - Business and Technical Perspective
John Calvert
 
How to be Social with My Sites in SharePoint 2013
John Calvert
 
IIBA OO - Is a business analyst required for SharePoint projects?
John Calvert
 
SharePoint for the .NET Developer
John Calvert
 
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
John Calvert
 
Cloud-Based Dev/Test Environments for SharePoint using CloudShare
John Calvert
 
Ad

Recently uploaded (20)

PPTX
ChiSquare Procedure in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PDF
Beyond Binaries: Understanding Diversity and Allyship in a Global Workplace -...
Imma Valls Bernaus
 
PPTX
Hardware(Central Processing Unit ) CU and ALU
RizwanaKalsoom2
 
PDF
Open Chain Q2 Steering Committee Meeting - 2025-06-25
Shane Coughlan
 
PDF
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
PDF
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
DOCX
Import Data Form Excel to Tally Services
Tally xperts
 
PDF
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
PDF
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
PPTX
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
PDF
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
PDF
Alarm in Android-Scheduling Timed Tasks Using AlarmManager in Android.pdf
Nabin Dhakal
 
PPTX
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
PDF
유니티에서 Burst Compiler+ThreadedJobs+SIMD 적용사례
Seongdae Kim
 
PPTX
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
PDF
HiHelloHR – Simplify HR Operations for Modern Workplaces
HiHelloHR
 
PDF
Digger Solo: Semantic search and maps for your local files
seanpedersen96
 
PPTX
Tally software_Introduction_Presentation
AditiBansal54083
 
PPTX
Coefficient of Variance in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
PDF
Mobile CMMS Solutions Empowering the Frontline Workforce
CryotosCMMSSoftware
 
ChiSquare Procedure in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Beyond Binaries: Understanding Diversity and Allyship in a Global Workplace -...
Imma Valls Bernaus
 
Hardware(Central Processing Unit ) CU and ALU
RizwanaKalsoom2
 
Open Chain Q2 Steering Committee Meeting - 2025-06-25
Shane Coughlan
 
SciPy 2025 - Packaging a Scientific Python Project
Henry Schreiner
 
MiniTool Partition Wizard 12.8 Crack License Key LATEST
hashhshs786
 
Import Data Form Excel to Tally Services
Tally xperts
 
Thread In Android-Mastering Concurrency for Responsive Apps.pdf
Nabin Dhakal
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pdf
Varsha Nayak
 
Agentic Automation: Build & Deploy Your First UiPath Agent
klpathrudu
 
vMix Pro 28.0.0.42 Download vMix Registration key Bundle
kulindacore
 
Alarm in Android-Scheduling Timed Tasks Using AlarmManager in Android.pdf
Nabin Dhakal
 
Agentic Automation Journey Session 1/5: Context Grounding and Autopilot for E...
klpathrudu
 
유니티에서 Burst Compiler+ThreadedJobs+SIMD 적용사례
Seongdae Kim
 
Why Businesses Are Switching to Open Source Alternatives to Crystal Reports.pptx
Varsha Nayak
 
HiHelloHR – Simplify HR Operations for Modern Workplaces
HiHelloHR
 
Digger Solo: Semantic search and maps for your local files
seanpedersen96
 
Tally software_Introduction_Presentation
AditiBansal54083
 
Coefficient of Variance in IBM SPSS Statistics Version 31.pptx
Version 1 Analytics
 
Mobile CMMS Solutions Empowering the Frontline Workforce
CryotosCMMSSoftware
 
Ad

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
  • 11. • Load jQuery: <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
  • 12. • Apply font / align / pad style to field header: <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
  • 13. • Inject text into DOM: <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
  • 14. • Edit each of the New, Display and Edit forms Style Existing “Forms” Transform SharePoint Forms
  • 15. • Add a Content Editor web part Style Existing “Form” Transform SharePoint Forms
  • 16. • Link to styles markup page Style Existing “Form” Transform SharePoint Forms
  • 17. • Note style changes Style Existing “Form” Transform SharePoint Forms
  • 18. • Final result Style Existing “Form” Transform SharePoint Forms
  • 19. • Style existing form Demo #1 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
  • 22. • Apply styling <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
  • 23. • Use placeholder for moved fields <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
  • 24. • Create a move fields script in Site Assets library: <!– include jQuery --> <script> $(document).ready(function() { $("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> Design Custom HTML “Form” Transform SharePoint Forms
  • 25. • Traverse placeholders in custom form <!– include jQuery --> <script> $(document).ready(function() { $("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> Design Custom HTML “Form” Transform SharePoint Forms
  • 26. • Find corresponding fields in OOTB form <!– include jQuery --> <script> $(document).ready(function() { $("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> Design Custom HTML “Form” Transform SharePoint Forms
  • 27. • Move fields from OOTB form to custom form <!– include jQuery --> <script> $(document).ready(function() { $("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> Design Custom HTML “Form” Transform SharePoint Forms
  • 28. • Add two Content Editor web parts Custom HTML “Form” Transform SharePoint Forms
  • 29. • Link first to custom HTML “form” layout page Custom HTML “Form” Transform SharePoint Forms
  • 30. • Link second to move fields script Custom HTML “Form” Transform SharePoint Forms
  • 31. • Note layout changes Custom HTML “Form” Transform SharePoint Forms
  • 32. • Final result Custom HTML “Form” Transform SharePoint Forms
  • 33. • Simple TABLE-based layout Demo #2 Transform SharePoint Forms
  • 34. • 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” Transform SharePoint Forms
  • 35. • 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> <span class="customForm" data-internalName="Title"></span> </div><br/> <div class="row"> <b>Issue Status:</b><br> <span class="customForm" data-internalName="Status"></span> </div><br/> ... </div> Design Custom Tab “Form” Transform SharePoint Forms
  • 36. • Define tabs: <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> <span class="customForm" data-internalName="Title"></span> </div><br/> <div class="row"> <b>Issue Status:</b><br> <span class="customForm" data-internalName="Status"></span> </div><br/> ... </div> Design Custom Tab “Form” Transform SharePoint Forms
  • 37. • Use placeholders for moved fields: <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> <span class="customForm" data-internalName="Title"></span> </div><br/> <div class="row"> <b>Issue Status:</b><br> <span class="customForm" data-internalName="Status"></span> </div><br/> ... </div> Design Custom Tab “Form” Transform SharePoint Forms
  • 38. • 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> Design Custom Tab “Form” Transform SharePoint Forms
  • 39. • Inject stylesheet reference for tab styling: <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> Design Custom Tab “Form” Transform SharePoint Forms
  • 40. • Activate jQueryUI tabs: <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> Design Custom Tab “Form” Transform SharePoint Forms
  • 41. • Add two Content Editor web parts Custom Tab “Form” Transform SharePoint Forms
  • 42. • Link first to custom tab “form” layout page Custom Tab “Form” Transform SharePoint Forms
  • 43. • Link second to enhanced move fields script Custom Tab “Form” Transform SharePoint Forms
  • 44. • Note layout changes Custom Tab “Form” Transform SharePoint Forms
  • 45. • Final result Custom Tab “Form” Transform SharePoint Forms
  • 46. • DIV-based layout with tabs Demo #3 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