SlideShare a Scribd company logo
1 of 62
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
Thank you to all of our Sponsors!!
• Intro
• Approach
• Simple Styling
• Custom Table Form
• Custom Div Form
• Next Steps
• Resources
Agenda
Transform SharePoint Forms
• 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 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
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 Notepad++,
Dreamweaver, etc
• 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
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
• Inject JavaScript to move SP fields to new
layout
Dustin and Heather of SharePoint Experience
• Pure CSS approach
Acknowledgements
Transform SharePoint Forms
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
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
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
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
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
• 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
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
• 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
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
• 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;
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
• 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
• 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
• 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>
<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
• 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
• 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, 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">
<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
• 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
• 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
• 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 #4
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
• Scroll area height may not be set correctly
• May be slow on mobile
Cons of Custom “Form”
Transform SharePoint Forms
• 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
• 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
• John Calvert, Chief Architect
• Software Craft, Inc.
• john (a) softwarecraft dot ca
• softwarecraft dot ca
• (a) softwarecraft99
Contact Me
Transform SharePoint Forms
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!

More Related Content

What's hot

Overview of XSL, XPath and XSL-FO
Overview of XSL, XPath and XSL-FOOverview of XSL, XPath and XSL-FO
Overview of XSL, XPath and XSL-FOSuite Solutions
 
SharePoint Benefits
SharePoint BenefitsSharePoint Benefits
SharePoint BenefitsSameh Senosi
 
Sharepoint Document Management System (DMS) Features
Sharepoint Document Management System (DMS) Features Sharepoint Document Management System (DMS) Features
Sharepoint Document Management System (DMS) Features Nitin Gupta
 
10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)Christian Buckley
 
Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Jayant Surana
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.pptsentayehu
 
SharePoint Tips and Tricks you cannot live without
SharePoint Tips and Tricks you cannot live withoutSharePoint Tips and Tricks you cannot live without
SharePoint Tips and Tricks you cannot live withoutGregory Zelfond
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointSahil Gandhi
 
Curso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxCurso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxTiago Antônio da Silva
 
Types of sites - sharepoint 2013
Types of  sites - sharepoint 2013Types of  sites - sharepoint 2013
Types of sites - sharepoint 2013Subhi Almouslem
 
SharePoint Design & Development
SharePoint Design & DevelopmentSharePoint Design & Development
SharePoint Design & DevelopmentJonathan Schultz
 

What's hot (20)

Overview of XSL, XPath and XSL-FO
Overview of XSL, XPath and XSL-FOOverview of XSL, XPath and XSL-FO
Overview of XSL, XPath and XSL-FO
 
SharePoint Benefits
SharePoint BenefitsSharePoint Benefits
SharePoint Benefits
 
CSS
CSSCSS
CSS
 
Sharepoint Document Management System (DMS) Features
Sharepoint Document Management System (DMS) Features Sharepoint Document Management System (DMS) Features
Sharepoint Document Management System (DMS) Features
 
Basic-CSS-tutorial
Basic-CSS-tutorialBasic-CSS-tutorial
Basic-CSS-tutorial
 
10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)10 Best SharePoint Features You’ve Never Used (But Should)
10 Best SharePoint Features You’ve Never Used (But Should)
 
Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.Web deveopment using React js and Node js with SQL.
Web deveopment using React js and Node js with SQL.
 
HTML (Web) basics for a beginner
HTML (Web) basics for a beginnerHTML (Web) basics for a beginner
HTML (Web) basics for a beginner
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Sharepoint 2019 Training
Sharepoint 2019 TrainingSharepoint 2019 Training
Sharepoint 2019 Training
 
javaScript.ppt
javaScript.pptjavaScript.ppt
javaScript.ppt
 
SharePoint Tips and Tricks you cannot live without
SharePoint Tips and Tricks you cannot live withoutSharePoint Tips and Tricks you cannot live without
SharePoint Tips and Tricks you cannot live without
 
CSS
CSSCSS
CSS
 
Basics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPointBasics of Front End Web Dev PowerPoint
Basics of Front End Web Dev PowerPoint
 
How Browser Works?
How Browser Works?How Browser Works?
How Browser Works?
 
SharePoint as a Document Management System (DMS)
SharePoint as a Document Management System (DMS)SharePoint as a Document Management System (DMS)
SharePoint as a Document Management System (DMS)
 
Curso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e AjaxCurso JavaScript - Aula sobre DOM e Ajax
Curso JavaScript - Aula sobre DOM e Ajax
 
Learning Html
Learning HtmlLearning Html
Learning Html
 
Types of sites - sharepoint 2013
Types of  sites - sharepoint 2013Types of  sites - sharepoint 2013
Types of sites - sharepoint 2013
 
SharePoint Design & Development
SharePoint Design & DevelopmentSharePoint Design & Development
SharePoint Design & Development
 

Similar to Transform SharePoint List Forms with HTML and CSS

Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your WayD'arce Hess
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your WayD'arce Hess
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...SPTechCon
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessKanwal Khipple
 
SharePoint Branding From Start to Finish
SharePoint Branding From Start to FinishSharePoint Branding From Start to Finish
SharePoint Branding From Start to FinishKanwal Khipple
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptxMattMarino13
 
Managing your project portfolio with Share Point
Managing your project portfolio with Share PointManaging your project portfolio with Share Point
Managing your project portfolio with Share PointRandy Mullis
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building WebsitesSuhas R Satish
 
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterIntro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterbrightrocket
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaKanwal Khipple
 
SharePoint 2010 branding
SharePoint 2010 brandingSharePoint 2010 branding
SharePoint 2010 brandingPhil Wicklund
 
Microsoft Share Point Branding & Customization
Microsoft Share Point Branding & CustomizationMicrosoft Share Point Branding & Customization
Microsoft Share Point Branding & Customizationyeschandana
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptxMattMarino13
 
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsO365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsNCCOMMS
 
Creating websites and leading librarians to a new level of project engagement
Creating websites and leading librarians to a new level of project engagementCreating websites and leading librarians to a new level of project engagement
Creating websites and leading librarians to a new level of project engagementMarina Georgieva
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptxMattMarino13
 
Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...
Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...
Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...Paul Hunt
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT ProsPaul Hunt
 
Modern_Site_Owner_M365_Ottawa.pdf
Modern_Site_Owner_M365_Ottawa.pdfModern_Site_Owner_M365_Ottawa.pdf
Modern_Site_Owner_M365_Ottawa.pdfTheresa Lubelski
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsPaul Hunt
 

Similar to Transform SharePoint List Forms with HTML and CSS (20)

Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 
Your Intranet, Your Way
Your Intranet, Your WayYour Intranet, Your Way
Your Intranet, Your Way
 
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
Popping the Hood: How to Create Custom SharePoint Branding by Randy Drisgill ...
 
Designing SharePoint 2010 for Business
Designing SharePoint 2010 for BusinessDesigning SharePoint 2010 for Business
Designing SharePoint 2010 for Business
 
SharePoint Branding From Start to Finish
SharePoint Branding From Start to FinishSharePoint Branding From Start to Finish
SharePoint Branding From Start to Finish
 
BITM3730 9-12.pptx
BITM3730 9-12.pptxBITM3730 9-12.pptx
BITM3730 9-12.pptx
 
Managing your project portfolio with Share Point
Managing your project portfolio with Share PointManaging your project portfolio with Share Point
Managing your project portfolio with Share Point
 
Share point 2013 Building Websites
Share point 2013 Building WebsitesShare point 2013 Building Websites
Share point 2013 Building Websites
 
Intro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniterIntro to ExpressionEngine and CodeIgniter
Intro to ExpressionEngine and CodeIgniter
 
Becoming a SharePoint Design Ninja
Becoming a SharePoint Design NinjaBecoming a SharePoint Design Ninja
Becoming a SharePoint Design Ninja
 
SharePoint 2010 branding
SharePoint 2010 brandingSharePoint 2010 branding
SharePoint 2010 branding
 
Microsoft Share Point Branding & Customization
Microsoft Share Point Branding & CustomizationMicrosoft Share Point Branding & Customization
Microsoft Share Point Branding & Customization
 
1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx1-22-24 INFO 2106.pptx
1-22-24 INFO 2106.pptx
 
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna LinsO365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
O365Con19 - Customise the UI in Modern SharePoint Workspaces - Corinna Lins
 
Creating websites and leading librarians to a new level of project engagement
Creating websites and leading librarians to a new level of project engagementCreating websites and leading librarians to a new level of project engagement
Creating websites and leading librarians to a new level of project engagement
 
BITM3730Week1.pptx
BITM3730Week1.pptxBITM3730Week1.pptx
BITM3730Week1.pptx
 
Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...
Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...
Creating an FAQ for end users, An evolution of an idea - SharePoint Saturday ...
 
#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros#SPSLondon - Session 2 JSLink for IT Pros
#SPSLondon - Session 2 JSLink for IT Pros
 
Modern_Site_Owner_M365_Ottawa.pdf
Modern_Site_Owner_M365_Ottawa.pdfModern_Site_Owner_M365_Ottawa.pdf
Modern_Site_Owner_M365_Ottawa.pdf
 
SUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT ProsSUGUK Cambridge - Display Templates & JSLink for IT Pros
SUGUK Cambridge - Display Templates & JSLink for IT Pros
 

More from John Calvert

Azure IaaS-PaaS Migrations - Lessons Learned
Azure IaaS-PaaS Migrations - Lessons LearnedAzure IaaS-PaaS Migrations - Lessons Learned
Azure IaaS-PaaS Migrations - Lessons LearnedJohn Calvert
 
Lessons learned from migrating a legacy web app to azure
Lessons learned from migrating a legacy web app to azureLessons learned from migrating a legacy web app to azure
Lessons learned from migrating a legacy web app to azureJohn Calvert
 
What's New and What's Out for SharePoint Server 2019 On-Premises
What's New and What's Out for SharePoint Server 2019 On-PremisesWhat's New and What's Out for SharePoint Server 2019 On-Premises
What's New and What's Out for SharePoint Server 2019 On-PremisesJohn Calvert
 
SharePoint 2016 Platform Adoption Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Platform Adoption   Lessons Learned and Advanced TroubleshootingSharePoint 2016 Platform Adoption   Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Platform Adoption Lessons Learned and Advanced TroubleshootingJohn Calvert
 
SharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Adoption - Lessons Learned and Advanced TroubleshootingSharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Adoption - Lessons Learned and Advanced TroubleshootingJohn Calvert
 
SharePoint On-Premises Nirvana
SharePoint On-Premises NirvanaSharePoint On-Premises Nirvana
SharePoint On-Premises NirvanaJohn Calvert
 
SharePoint 2016 - What’s New and What Matters
SharePoint 2016 - What’s New and What MattersSharePoint 2016 - What’s New and What Matters
SharePoint 2016 - What’s New and What MattersJohn Calvert
 
SharePoint 2013 APIs
SharePoint 2013 APIsSharePoint 2013 APIs
SharePoint 2013 APIsJohn Calvert
 
Migrating to SharePoint 2013 - Business and Technical Perspective
Migrating to SharePoint 2013 - Business and Technical PerspectiveMigrating to SharePoint 2013 - Business and Technical Perspective
Migrating to SharePoint 2013 - Business and Technical PerspectiveJohn Calvert
 
How to be Social with My Sites in SharePoint 2013
How to be Social with My Sites in SharePoint 2013How to be Social with My Sites in SharePoint 2013
How to be Social with My Sites in SharePoint 2013John Calvert
 
IIBA OO - Is a business analyst required for SharePoint projects?
IIBA OO - Is a business analyst required for SharePoint projects?IIBA OO - Is a business analyst required for SharePoint projects?
IIBA OO - Is a business analyst required for SharePoint projects?John Calvert
 
SharePoint for the .NET Developer
SharePoint for the .NET DeveloperSharePoint for the .NET Developer
SharePoint for the .NET DeveloperJohn Calvert
 
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShareCloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShareJohn Calvert
 
Cloud-Based Dev/Test Environments for SharePoint using CloudShare
Cloud-Based Dev/Test Environments for SharePoint using CloudShareCloud-Based Dev/Test Environments for SharePoint using CloudShare
Cloud-Based Dev/Test Environments for SharePoint using CloudShareJohn Calvert
 

More from John Calvert (14)

Azure IaaS-PaaS Migrations - Lessons Learned
Azure IaaS-PaaS Migrations - Lessons LearnedAzure IaaS-PaaS Migrations - Lessons Learned
Azure IaaS-PaaS Migrations - Lessons Learned
 
Lessons learned from migrating a legacy web app to azure
Lessons learned from migrating a legacy web app to azureLessons learned from migrating a legacy web app to azure
Lessons learned from migrating a legacy web app to azure
 
What's New and What's Out for SharePoint Server 2019 On-Premises
What's New and What's Out for SharePoint Server 2019 On-PremisesWhat's New and What's Out for SharePoint Server 2019 On-Premises
What's New and What's Out for SharePoint Server 2019 On-Premises
 
SharePoint 2016 Platform Adoption Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Platform Adoption   Lessons Learned and Advanced TroubleshootingSharePoint 2016 Platform Adoption   Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Platform Adoption Lessons Learned and Advanced Troubleshooting
 
SharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Adoption - Lessons Learned and Advanced TroubleshootingSharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
SharePoint 2016 Adoption - Lessons Learned and Advanced Troubleshooting
 
SharePoint On-Premises Nirvana
SharePoint On-Premises NirvanaSharePoint On-Premises Nirvana
SharePoint On-Premises Nirvana
 
SharePoint 2016 - What’s New and What Matters
SharePoint 2016 - What’s New and What MattersSharePoint 2016 - What’s New and What Matters
SharePoint 2016 - What’s New and What Matters
 
SharePoint 2013 APIs
SharePoint 2013 APIsSharePoint 2013 APIs
SharePoint 2013 APIs
 
Migrating to SharePoint 2013 - Business and Technical Perspective
Migrating to SharePoint 2013 - Business and Technical PerspectiveMigrating to SharePoint 2013 - Business and Technical Perspective
Migrating to SharePoint 2013 - Business and Technical Perspective
 
How to be Social with My Sites in SharePoint 2013
How to be Social with My Sites in SharePoint 2013How to be Social with My Sites in SharePoint 2013
How to be Social with My Sites in SharePoint 2013
 
IIBA OO - Is a business analyst required for SharePoint projects?
IIBA OO - Is a business analyst required for SharePoint projects?IIBA OO - Is a business analyst required for SharePoint projects?
IIBA OO - Is a business analyst required for SharePoint projects?
 
SharePoint for the .NET Developer
SharePoint for the .NET DeveloperSharePoint for the .NET Developer
SharePoint for the .NET Developer
 
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShareCloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
Cloud Based Dev/Test Environments for .NET and SharePoint Using CloudShare
 
Cloud-Based Dev/Test Environments for SharePoint using CloudShare
Cloud-Based Dev/Test Environments for SharePoint using CloudShareCloud-Based Dev/Test Environments for SharePoint using CloudShare
Cloud-Based Dev/Test Environments for SharePoint using CloudShare
 

Recently uploaded

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdfPedro Manuel
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1DianaGray10
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...DianaGray10
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsSeth Reyes
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.YounusS2
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPathCommunity
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostMatt Ray
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationIES VE
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 

Recently uploaded (20)

Nanopower In Semiconductor Industry.pdf
Nanopower  In Semiconductor Industry.pdfNanopower  In Semiconductor Industry.pdf
Nanopower In Semiconductor Industry.pdf
 
Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1Secure your environment with UiPath and CyberArk technologies - Session 1
Secure your environment with UiPath and CyberArk technologies - Session 1
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
Connector Corner: Extending LLM automation use cases with UiPath GenAI connec...
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
Computer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and HazardsComputer 10: Lesson 10 - Online Crimes and Hazards
Computer 10: Lesson 10 - Online Crimes and Hazards
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.Basic Building Blocks of Internet of Things.
Basic Building Blocks of Internet of Things.
 
UiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation DevelopersUiPath Community: AI for UiPath Automation Developers
UiPath Community: AI for UiPath Automation Developers
 
20150722 - AGV
20150722 - AGV20150722 - AGV
20150722 - AGV
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCostKubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
KubeConEU24-Monitoring Kubernetes and Cloud Spend with OpenCost
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve DecarbonizationUsing IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
Using IESVE for Loads, Sizing and Heat Pump Modeling to Achieve Decarbonization
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 

Transform SharePoint List 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!

Editor's Notes

  1. At the end of the day, please ensure your evaluation is signed and handed in for door prizes. The draw takes place in The Observatory
  2. Heather has not published an equivalent chart for SharePoint 2013, only a focus in on SP2013 specific problematic classes that are not relevant to list forms
  3. Issue rendering List ribbon Customize List group Form Web Parts item: Chrome O365 OK; CloudShare OK MS Edge O365 OK; CloudShare Failed to retrieve forms for list MSIS11 O365 OK; CloudShare Failed to retrieve forms for list
  4. Add highlites for other two code blocks