Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Transform SharePoint List Forms
with HTML and CSS
Turn the out-of-the-box SharePoint list forms
into custom styled forms
J...
Thank you to all of our Sponsors!!
• Intro
• Approach
• Simple Styling
• Custom Table Form
• Custom Div Form
• Next Steps
• Resources
Agenda
Transform ShareP...
• CloudShare – Environments Made Easy
• http://www.cloudshare.com/
Thank you to my sponsor
Transform SharePoint Forms
• SharePoint / .NET solution and technical architect
• Over 18 years experience developing business
solutions for private ...
Default List Forms
• Plain & simple
• Single long column
• Titles have no
emphasis
• Very limited field
validation
• No fi...
• Style the default New, Display and Edit list forms
• Use a light touch, minimalist approach
• In web design tool of choi...
• Custom master page
• SharePoint markup (CAML)
• Delegate controls and custom actions
• Farm / sandbox solutions
• ShareP...
Basic “Form” Sample Outcomes
Transform SharePoint Forms
Mark Rackley’s Easy Custom Layouts for Default
SharePoint Forms
• Inject alternate HTML “form” to define new
layout
• Inje...
Bad and Good News
Bad News
• You have to learn HTML and CSS
HTML = Hypertext Markup Language
• Computer language that desc...
One Minute Intro to HTML
• Describes structure and content of web pages
• Headings
• <H1></H1>
• Table structure:
• <TABLE...
Two Minute Intro to CSS
• Selectors { declarations }
Selectors
• Element HTML tag, eg H1
• Class name, eg .ms-formlabel
• ...
Two Minute Intro to CSS
• Each can be combined multiple times
Selector
• .ms-formlabel h3.ms-
standardheader
• Specificity...
Two Minute Intro to CSS
• Selector specificity is important to understand
• Heather Solomon – SharePoint CSS and CSS
Speci...
• Use any supported CSS or HTML
• Add CSS to form
• Add text and HTML in new blocks on form
• Inject text and HTML into ex...
Intro to List Forms
• New, Display and Edit Forms
• Editing forms in browser
• Inspecting structure of forms using F12
“De...
• In-line styling using F12 Developer Tools
• Easy way to get familiar with CSS
• No consequences, just refresh page to cl...
Prepare styling markup:
• Apply font / align / pad style to field header
<style type="text/css">
h3.ms-standardheader {
te...
• Edit each of the New, Display and Edit forms
Simple Styling
Transform SharePoint Forms
• Add a Script Editor
web part
Transform SharePoint Forms
Simple Styling
• Insert style element
with CSS
Simple Styling
Transform SharePoint Forms
• Note style changes
Simple Styling
Transform SharePoint Forms
• Final result
Simple Styling
Transform SharePoint Forms
• Simple styling in Script Editor webpart
Demo #2a
Transform SharePoint Forms
• Create a styles markup file in Site Assets library:
<style type="text/css">
h3.ms-standardheader {
text-align: right;
pa...
• Create a styles markup file in Site Assets library:
<style type="text/css">
h3.ms-standardheader {
text-align: right;
pa...
• Add a Content Editor
web part
Transform SharePoint Forms
Style Existing “Form”
• 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
• Simple styling in script file linked to Content Editor
webpart
Demo #2b
Transform SharePoint Forms
• Add Custom HTML “form” table to Default New,
Display and Edit forms
• Move Edit Controls into a Custom HTML “form” table...
• Create a form layout page in Site Assets library:
<table cellpadding="5" cellspacing="5" bgcolor="#CCCCCC" >
<tr>
<td>
<...
• Apply styling
<table cellpadding="5" cellspacing="5" bgcolor="#CCCCCC" >
<tr >
<td>
<b>Title:</b><br>
<span class="custo...
• Use placeholder for moved fields
<table cellpadding="5" cellspacing="5" bgcolor="#CCCCCC" >
<tr >
<td>
<span class="cust...
• Create a move fields script in Site Assets library:
<!– include jQuery -->
<script>
$(document).ready(function() {
$("sp...
• 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 #3
Transform SharePoint Forms
• Add Custom Tab “form”
• Move Edit Controls into Custom Tab “form”
• Hide OOTB HTML “form” table
• Use any supported HTML...
• Create a form layout page in Site Assets library:
<div id="tabs">
<ul>
<li><a href="#tabs-1">General</a></li>
<li><a hre...
• Define tabs:
<div id="tabs">
<ul>
<li><a href="#tabs-1">General</a></li>
<li><a href="#tabs-2">Description</a></li>
<li>...
• Use placeholders for moved fields:
<div id="tabs">
<ul>
<li><a href="#tabs-1">General</a></li>
<li><a href="#tabs-2">Des...
• Enable jQuery UI tabs in move fields script:
<script src="//code.jquery.com/ui/1.11.4/jquery-
ui.min.js"></script>
<scri...
• Inject stylesheet reference for tab styling:
<script src="//code.jquery.com/ui/1.11.4/jquery-
ui.min.js"></script>
<scri...
• Activate jQueryUI tabs:
<script src="//code.jquery.com/ui/1.11.4/jquery-
ui.min.js"></script>
<script>
$(function() {
va...
• 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 #4
Transform SharePoint Forms
• Pure web-based solution (HTML, CSS, JavaScript)
• Does not require SharePoint Designer or InfoPath
• Requires only limit...
• Field list on “form” is hard coded not dynamic
• List column management not tied to “form” design
• Scroll area height m...
• Learn HTML for form layout
• Learn CSS Descriptors for styling
• Learn key SharePoint class names for selectors
• Custom...
• Mark Rackley – Easy Custom Layouts for Default
SharePoint Forms (blog)
• Heather Solomon – SharePoint 2010 CSS Reference...
• John Calvert, Chief Architect
• Software Craft, Inc.
• john (a) softwarecraft dot ca
• softwarecraft dot ca
• (a) softwa...
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-...
Upcoming SlideShare
Loading in …5
×

Transform SharePoint List Forms with HTML and CSS

3,566 views

Published on

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

Published in: Technology
  • Did u try to use external powers for studying? Like ⇒ www.WritePaper.info ⇐ ? They helped me a lot once.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you’re struggling with your assignments like me, check out ⇒ www.HelpWriting.net ⇐. My friend sent me a link to to tis site. This awesome company. After I was continuously complaining to my family and friends about the ordeals of student life. They wrote my entire research paper for me, and it turned out brilliantly. I highly recommend this service to anyone in my shoes. ⇒ www.HelpWriting.net ⇐.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I JUST completed the dressing table that my wife always wanted. To be honest it took 8 days instead of 3 but keep in mind that I'm not a great carpenter. i could honestly kiss you right now. ✄✄✄ https://t.cn/A62YeZUX
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating direct: ♥♥♥ http://bit.ly/36cXjBY ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❤❤❤ http://bit.ly/36cXjBY ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Transform SharePoint List Forms with HTML and CSS

  1. 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. 2. Thank you to all of our Sponsors!!
  3. 3. • Intro • Approach • Simple Styling • Custom Table Form • Custom Div Form • Next Steps • Resources Agenda Transform SharePoint Forms
  4. 4. • CloudShare – Environments Made Easy • http://www.cloudshare.com/ Thank you to my sponsor Transform SharePoint Forms
  5. 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. 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. 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. 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. 9. Basic “Form” Sample Outcomes Transform SharePoint Forms
  10. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 20. • Edit each of the New, Display and Edit forms Simple Styling Transform SharePoint Forms
  21. 21. • Add a Script Editor web part Transform SharePoint Forms Simple Styling
  22. 22. • Insert style element with CSS Simple Styling Transform SharePoint Forms
  23. 23. • Note style changes Simple Styling Transform SharePoint Forms
  24. 24. • Final result Simple Styling Transform SharePoint Forms
  25. 25. • Simple styling in Script Editor webpart Demo #2a Transform SharePoint Forms
  26. 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. 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. 28. • Add a Content Editor web part Transform SharePoint Forms Style Existing “Form”
  29. 29. • Link to styles markup page Style Existing “Form” Transform SharePoint Forms
  30. 30. • Note style changes Style Existing “Form” Transform SharePoint Forms
  31. 31. • Final result Style Existing “Form” Transform SharePoint Forms
  32. 32. • Simple styling in script file linked to Content Editor webpart Demo #2b Transform SharePoint Forms
  33. 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. 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. 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. 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. 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. 38. • Add two Content Editor web parts Custom HTML “Form” Transform SharePoint Forms
  39. 39. • Link first to custom HTML “form” layout page Custom HTML “Form” Transform SharePoint Forms
  40. 40. • Link second to move fields script Custom HTML “Form” Transform SharePoint Forms
  41. 41. • Note layout changes Custom HTML “Form” Transform SharePoint Forms
  42. 42. • Final result Custom HTML “Form” Transform SharePoint Forms
  43. 43. • Simple TABLE-based layout Demo #3 Transform SharePoint Forms
  44. 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. 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. 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. 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. 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. 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. 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. 51. • Add two Content Editor web parts Custom Tab “Form” Transform SharePoint Forms
  52. 52. • Link first to custom tab “form” layout page Custom Tab “Form” Transform SharePoint Forms
  53. 53. • Link second to enhanced move fields script Custom Tab “Form” Transform SharePoint Forms
  54. 54. • Note layout changes Custom Tab “Form” Transform SharePoint Forms
  55. 55. • Final result Custom Tab “Form” Transform SharePoint Forms
  56. 56. • DIV-based layout with tabs Demo #4 Transform SharePoint Forms
  57. 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. 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. 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. 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. 61. • John Calvert, Chief Architect • Software Craft, Inc. • john (a) softwarecraft dot ca • softwarecraft dot ca • (a) softwarecraft99 Contact Me Transform SharePoint Forms
  62. 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!

×