Turn the out-of-the-box SharePoint list forms into custom styled forms with HTML and CSS

1. 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

2. Thank you to all of our Sponsors!!

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

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

5. • 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
Transform SharePoint Forms

6. 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

7. • 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
Transform SharePoint Forms

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

9. Basic “Form” Sample Outcomes
Transform SharePoint Forms

10. 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
Transform SharePoint Forms

11. 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
Transform SharePoint Forms

12. 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>
Transform SharePoint Forms

13. 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
Transform SharePoint Forms

14. Two Minute Intro to CSS
• 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;}
Transform SharePoint Forms

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

16. • 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”
Transform SharePoint Forms

17. 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
Transform SharePoint Forms

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

19. 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
Transform SharePoint Forms

20. • Edit each of the New, Display and Edit forms
Simple Styling
Transform SharePoint Forms

21. • Add a Script Editor
web part
Transform SharePoint Forms
Simple Styling

22. • Insert style element
with CSS
Simple Styling
Transform SharePoint Forms

23. • Note style changes
Simple Styling
Transform SharePoint Forms

24. • Final result
Simple Styling
Transform SharePoint Forms

25. • Simple styling in Script Editor webpart
Demo #2a
Transform SharePoint Forms

26. • 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
Transform SharePoint Forms

27. • 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
Transform SharePoint Forms

28. • Add a Content Editor
web part
Transform SharePoint Forms
Style Existing “Form”

29. • Link to styles markup
page
Style Existing “Form”
Transform SharePoint Forms

30. • Note style changes
Style Existing “Form”
Transform SharePoint Forms

31. • Final result
Style Existing “Form”
Transform SharePoint Forms

32. • Simple styling in script file linked to Content Editor
webpart
Demo #2b
Transform SharePoint Forms

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

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

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

36. • Use placeholder for moved fields
<table cellpadding="5" cellspacing="5" bgcolor="#CCCCCC" >
<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>
Design Custom HTML “Form”
Transform SharePoint Forms

37. • 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>
Design Custom HTML “Form”
Transform SharePoint Forms

38. • Add two Content
Editor web parts
Custom HTML “Form”
Transform SharePoint Forms

39. • Link first to custom
HTML “form” layout
page
Custom HTML “Form”
Transform SharePoint Forms

40. • Link second to move
fields script
Custom HTML “Form”
Transform SharePoint Forms

41. • Note layout changes
Custom HTML “Form”
Transform SharePoint Forms

42. • Final result
Custom HTML “Form”
Transform SharePoint Forms

43. • Simple TABLE-based layout
Demo #3
Transform SharePoint Forms

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

45. • 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>
<span class="customField" data-internalName="Title"></span>
</div><br/>
<div class="row">
<span class="customLabel" data-internalName="Status"></span><br>
<span class="customField" data-internalName="Status"></span>
</div><br/>
...
</div>
Design Custom Tab “Form”
Transform SharePoint Forms

46. • 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">
<span class="customLabel" data-internalName="Title"></span><br>
<span class="customField" data-internalName="Title"></span>
</div><br/>
<div class="row">
<span class="customLabel" data-internalName="Status"></span><br>
<span class="customField" data-internalName="Status"></span>
</div><br/>
...
</div>
Design Custom Tab “Form”
Transform SharePoint Forms

47. • 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">
<span class="customLabel" data-internalName="Title"></span><br>
<span class="customField" data-internalName="Title"></span>
</div><br/>
<div class="row">
<span class="customLabel" data-internalName="Status"></span><br>
<span class="customField" data-internalName="Status"></span>
</div><br/>
...
</div>
Design Custom Tab “Form”
Transform SharePoint Forms

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

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

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

51. • Add two Content
Editor web parts
Custom Tab “Form”
Transform SharePoint Forms

52. • Link first to custom tab
“form” layout page
Custom Tab “Form”
Transform SharePoint Forms

53. • Link second to
enhanced move fields
script
Custom Tab “Form”
Transform SharePoint Forms

54. • Note layout changes
Custom Tab “Form”
Transform SharePoint Forms

55. • Final result
Custom Tab “Form”
Transform SharePoint Forms

56. • DIV-based layout with tabs
Demo #4
Transform SharePoint Forms

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

58. • 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”
Transform SharePoint Forms

59. • 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
Transform SharePoint Forms

60. • 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
Transform SharePoint Forms

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

62. 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!