Using free 3rd party libraries to get the most of your SharePoint User Experience

1. © 2003-2014 PAIT Group
Maximizing the SharePoint User
Experience with Free 3rd Party
jQuery Libraries
Mark Rackley
Mark Rackley
mrackley@paitgroup.com
Tulsa TechFest 2015

2. Mark Rackley / Partner & CTO
• 20+ years software architecture and
development experience
• Office 365 MVP, SharePoint Junkie
since 2007
• Event Organizer
(SharePointalooza.org)
• Blogger, Writer, Speaker
• Bacon aficionado
@mrackley
www.SharePointHillbilly.com
www.PaitGroup.com
www.SharePointaLooza.org
www.StratusForms.com

3. http://www.SharePointalooza.org

4. Agenda
• What are we doing? (Julia Child Style)
• Why would we do this?
• Tips and Best Practices
• Let’s build some of the pieces
– jQueryUI Tabs
– DataTables
– FullCalendar
– Chart.js
– Stratus Forms

5. DEMO: Contract
Management Solution
SharePoint gets you 85% of the way there, client side
development can’t do the rest…

6. Why bother with client side dev?
• Stay off the server
• Deployment and maintenance can be easier
• Upgrades can be painless
• You don’t have to be a development guru
• You don’t need expensive tools like Visual
Studio… well you don’t NEED any tools at all.

7. Development basics
• Store scripts in a document library
• To deploy a script across a site collection use a Custom
Action
• Avoid directly adding scripts to Master Page
• Can be more difficult to maintain and debug
• To deploy script to a page, add a Content Editor Web
Part and link to script
• Avoid placing scripts directly in CEWP
• Scripts can get mangled and there is no reuse / backup.

8. How about some best practices?
• Avoid global variables
• Write scripts in small digestible chunks
• Code with performance in mind
• Minify files, but make updates in un-minified files
• Be consistent in structure and syntax ESPECIALLY if
developing as part of a team
• Document what you’ve done

9. jQueryUI
• http://jqueryui.com/
• jQuery UI is a curated set of user interface interactions, effects,
widgets, and themes built on top of the jQuery JavaScript Library.
Whether you're building highly interactive web applications or you
just need to add a date picker to a form control, jQuery UI is the
perfect choice.

10. jQueryUI– Basic Usage - Tabs
<div id="tabs">
<ul>
<li><a href="#tabs-1">Tab 1 title</a></li>
<li><a href="#tabs-2">Tab 2 title</a></li>
<li><a href="#tabs-3">Tab 3 title</a></li>
</ul>
<div id="tabs-1">
<p>content in tab 1</p>
</div>
<div id="tabs-2">
<p>content in tab 2</p>
</div>
<div id="tabs-3">
<p>content in tab 3</p>
</div>
</div>
<script>
$(function() {
$( "#tabs" ).tabs();
});
</script>

11. DEMO: jQuery ui tabs
How to place web parts into jQuery UI Tabs

12. DataTables
• http://www.datatables.net/
• DataTables is a plug-in for the jQuery Javascript library. It is a
highly flexible tool, based upon the foundations of progressive
enhancement, which will add advanced interaction controls to any
HTML table.

13. DataTables – Basic Usage
//array of arrays
$('#example').dataTable( {
"aaData": [
["row 1","value"],
["row 2","value 2"],
],
"aoColumns": [ //field count must match column count
{ "sTitle": "Column Name" },
{ "sTitle": "Column Name 2" }
]
});
//array of objects
$('#example').dataTable({
"bProcessing": true,
"aaData": vendors, //array of objects
"aoColumns": [
{ "mData": "Vendor" }
]
});

14. DEMO: Creating a list view
with datatables
Bringing REST and Datatables together to build list views

15. FullCalendar
• http://arshaw.com/fullcalendar/
• FullCalendar is a jQuery plugin that provides
a full-sized, drag & drop calendar like the one
below. It uses AJAX to fetch events on-the-fly
for each month and is easily configured to use
your own feed format (an extension is provided
for Google Calendar). It is visually
customizable and exposes hooks for user-
triggered events (like clicking or dragging an
event).

16. FullCalendar – Basic Usage
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: false,
events: function(start, end, callback) {
//data query goes here
}
});
<div id='calendar'></div>

17. DEMO: Fullcalendar demo
Create a dynamic calendar view of tasks and list items that
contain multiple date fields

18. Bluff Charts
• http://bluff.jcoglan.com/
• Bluff is a JavaScript port of the Gruff graphing
library for Ruby. It is designed to support all
the features of Gruff with minimal
dependencies; the only third-party scripts you
need to run it are a copy of JS.Class (2.6kB
gzipped) and a copy of Google’s ExCanvas to
support canvas in Internet Explorer. Both these
scripts are supplied with the Bluff download.
Bluff itself is around 11kB gzipped.

19. Bluff Charts – Basic Usage
var g = new Bluff.Bar('LineBarChart', '800x400');
g.title = 'Tasks By User';
g.tooltips = true;
g.theme_37signals();
for (index in tasks)
{
g.data(tasks[index].name, [tasks[index].Completed,
tasks[index].Deferred,tasks[index].NotStarted,
tasks[index].InProgress,tasks[index].Waitingonsomeoneelse]);
}
g.labels = {0: 'Completed', 1: 'Deferred', 2: 'Not Started',
3: 'In Progress', 4: 'Waiting'};
g.draw();

20. DEMO: Bluff Charts demo
Pie Charts, Bar Charts, and more…

21. Stratus Forms
www.StratusForms.com
• A lightweight InfoPath alternative
• 100% Client Side Based
• Engine is 100% Free
• Build forms using standard HTML, CSS, and
JavaScript
– They can look EXACTLY like you want
– You can write additional business logic using
JavaScript to interact with other systems
– All form fields MUST have unique ID’s

22. Stratus Forms
• Works in SharePoint 2007, 2010, 2013, & O365
• Stores all form fields in one object
• Can promote fields in the form to SharePoint
list fields
• Supports many field types including People
Pickers (2013 only)
• Other features
– Repeating content
– Reporting
– Form and Field encryption/password protection

23. The Basics
• Include the needed scripts
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.2/jquery.SPServices-
0.7.2.min.js"></script>
<script type="text/javascript" src="//www.stratusforms.com/scripts/stratus-
forms.09.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.2/jquery-
ui.min.js"></script>
<link type="text/css" rel="stylesheet"
href="//code.jquery.com/ui/1.11.2/themes/start/jquery-ui.css">

24. The Basics
• Create a Multi-Line Plain Text Field on your List/Library called
“StratusFormsData”
• Form Initialization (Load a form)
$("#SFForm").StratusFormsInitialize({
queryStringVar: “formID",
listName: “<list Name>"
});

25. The Basics
• Add/Update a form
$("#SFForm").StratusFormsSubmit({
listName: “<list name>",
completefunc: function(id) {
alert("Save was successful. ID =
" + id);
window.location =
window.location.pathname + "?formID=" + id;
}
});

26. The Basics
• Use regular HTML with unique ID
<input type=“text” id=“Email”>
• Make a field required using a class
<input type=“text” id=“Email” class=“required”>
• Promote a field to a SharePoint List Field (use INTERNAL field
name)
<input type=“text” id=“Email” class=“required”
listFieldName=“Title”>

27. The Basics
• Custom field validation
<input type=“text” id=“Email” class=“required” listFieldName=“Title”
validate="validEmail">
• Built in validation functions
– Number
– Email
– Phone #
– Social Security Number

28. Demo: Form Builder
http://sharepointhillbilly.com/demos/SitePages/SFBuilder.aspx

29. DEMO: Stratus Forms
InfoPath? We don’t need no stinking InfoPath!

30. Mark Rackley
mrackley@paitgroup.com
www.markrackley.net
@mrackley