Developer Data Modeling Mistakes: From Postgres to NoSQL
Maximize SharePoint Form Usability with jQuery
1. SPTechCon San Fransicso 2014
Using jQuery to Maximize SharePoint Form
Usability
Mark.Rackley@capSpire.com
April, Twenty Fourteen
2. Mark Rackley / Senior Consultant
• 19+ years software
architecture and development
experience
• SharePoint Junkie since 2007
• Event Organizer
• Blogger, Writer, Speaker
• Bacon aficionado
@mrackley
www.SharePointHillbilly.com
www.MarkRackley.net
www.SharePointaLooza.org
3. Agenda
• What’s and Why’s
• The Basics
• Automatic Parent / Child relationship
• Showing / Hiding Fields
• Custom field validation
• Using REST for cascading drop down lists
• Improving form layout using HTML Templates
4. What Exactly Are We Going To Be Doing?
Create powerful dynamic forms
Create visually appealing forms
Use HTML, JavaScript
Utilize existing default New and Edit Forms
5. Why Are We Doing This?
Default SharePoint Forms are ugly
Default SharePoint Forms aren’t dynamic
Creating new forms from scratch is time
consuming and cumbersome
InfoPath is not the right approach for many
scenarios (and it’s going away yay!)
6. What Skills Do I Need?
HTML / CSS
Create Pretty forms
JavaScript / jQuery
Create dynamic forms
REST / CSOM / SPServices
Create powerful forms
7. The Basis
Create a script and place it in a Document
Library
Edit the Default New or Edit Form for a
List/Library
Add a Content Editor Web Part to the default
form
Link Script to the Content Editor Web Part
8. The Basics – Editing the Default Form
From a list view on the
ribbon, click on the “List”
tab
Click on the “Modify
Form Web Parts” button
and select the form to
edit.
9. The Basics – Identifying Form Elements
Use the “title” attribute when possible to
retrieve a field
<select title="City" id="City_310b7c27-13ba-4a7e-
a133-058d312a6b7f_$LookupField">
$(“select*title=‘City’+”);
Be careful of DOM changes (ie “Required Fields)
<select title="City Required Field" id="City_310b7c27-
13ba-4a7e-a133-058d312a6b7f_$LookupField">
10. The Basics – Identifying Form Elements
Use the “FieldName” or “FieldInternalName”
stored in the comments if necessary
<td width="350" class="ms-formbody" valign="top">
<!-- FieldName="City" FieldInternalName="City"
FieldType="SPFieldLookup“ -->
$("table.ms-formtable td").each(function(){
if (this.innerHTML.indexOf('FieldName=“City"') != -1)
{
var field = this;
}
});
11. The Basic – Interacting with basic form fields
//get input / select values
$(“select*title=‘City’+”).val();
//set input / select values
$(“select*title=‘City’+”).val(“value”);
//uncheck a check box
$(“input*title=‘City’+").removeAttr('checked');
//check a check box
$(“input*title=‘City’+").attr('checked','checked');
//is a check box checked?
if ($(“input*title=‘City’+”).is(':checked'))
12. Showing / Hiding Fields
Show/Hide the field’s entire row to ensure the label is
not visible
$(“select*title=‘City’+”).closest(“tr”).hide();
Attach to click event of field to trigger showing/hiding
$(“input*title=‘myCheckbox’+”).click(function()
{
if ($(this).is(‘:checked’))
{
hide or show fields
}
});
13. Demo: Add jQuery to default form and learn
how to identify elements