SPTechCon San Fransicso 2014
Using jQuery to Maximize SharePoint Form
Usability
Mark.Rackley@capSpire.com
April, Twenty Fo...
Mark Rackley / Senior Consultant
• 19+ years software
architecture and development
experience
• SharePoint Junkie since 20...
Agenda
• What’s and Why’s
• The Basics
• Automatic Parent / Child relationship
• Showing / Hiding Fields
• Custom field va...
What Exactly Are We Going To Be Doing?
Create powerful dynamic forms
Create visually appealing forms
Use HTML, JavaScript
...
Why Are We Doing This?
Default SharePoint Forms are ugly
Default SharePoint Forms aren’t dynamic
Creating new forms from s...
What Skills Do I Need?
HTML / CSS
 Create Pretty forms
JavaScript / jQuery
 Create dynamic forms
REST / CSOM / SPService...
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 Co...
The Basics – Editing the Default Form
From a list view on the
ribbon, click on the “List”
tab
Click on the “Modify
Form We...
The Basics – Identifying Form Elements
Use the “title” attribute when possible to
retrieve a field
 <select title="City" ...
The Basics – Identifying Form Elements
Use the “FieldName” or “FieldInternalName”
stored in the comments if necessary
 <t...
The Basic – Interacting with basic form fields
//get input / select values
$(“select*title=‘City’+”).val();
//set input / ...
Showing / Hiding Fields
Show/Hide the field’s entire row to ensure the label is
not visible
 $(“select*title=‘City’+”).cl...
Demo: Add jQuery to default form and learn
how to identify elements
Demo: Automatic Parent / Child List
Relationship
Demo: Showing / Hiding fields when a check
box is checked
Demo: Custom Field Validation
Demo: Using REST for Cascading Drop Down
Lists
Demo: Improving Form Layout using HTML
Templates
April, Twenty Fourteen
Upcoming SlideShare
Loading in...5
×

Using jQuery to Maximize Form Usability

414

Published on

Slide deck from SPTechCon San Francisco 2014 on how to use jQuery to enhance out of the box SharePoint Forms

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
414
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Using jQuery to Maximize Form Usability"

  1. 1. SPTechCon San Fransicso 2014 Using jQuery to Maximize SharePoint Form Usability Mark.Rackley@capSpire.com April, Twenty Fourteen
  2. 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. 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. 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. 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. 6. What Skills Do I Need? HTML / CSS  Create Pretty forms JavaScript / jQuery  Create dynamic forms REST / CSOM / SPServices  Create powerful forms
  7. 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. 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. 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. 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. 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. 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. 13. Demo: Add jQuery to default form and learn how to identify elements
  14. 14. Demo: Automatic Parent / Child List Relationship
  15. 15. Demo: Showing / Hiding fields when a check box is checked
  16. 16. Demo: Custom Field Validation
  17. 17. Demo: Using REST for Cascading Drop Down Lists
  18. 18. Demo: Improving Form Layout using HTML Templates
  19. 19. April, Twenty Fourteen

×