SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

34
© 2003-2014 PAIT Group Utilizing jQuery in SharePoint Get More Done Faster Mark Rackley [email protected] SPTechCon Boston

Transcript of SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Page 1: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

© 2003-2014 PAIT Group

Utilizing jQuery in SharePointGet More Done Faster

Mark [email protected] Boston

Page 2: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

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

@mrackleywww.SharePointHillbilly.comwww.PaitGroup.com www.SharePointaLooza.orgwww.StratusForms.com

Page 3: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Agenda

• What is jQuery? • Why SharePoint & jQuery?• Deploying / Maintaining • Development Basics• Third Party Libraries• jQuery UI Demo

The SharePoint & jQuery Guidehttp://bit.ly/jQueryAndSP

Page 4: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

What is jQuery?

• JavaScript Utility Library • jQuery() or $()

• Allows interaction and manipulation of the DOM after page is rendered

• Can interact with other systems using Web Services

• Supported by Microsoft• Part of “Client Side” Development

Page 5: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Why SharePoint & jQuery?

Page 6: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Why SharePoint & jQuery?

Turn This…

Page 7: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Why SharePoint & jQuery?

Into This…

http://www.markrackley.net/2014/11/25/sharepoint-tabbed-web-partshillbillytabs2-0/

Page 8: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Why SharePoint & jQuery?

And This…

Page 9: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Why SharePoint & jQuery?

Into This…

http://www.markrackley.net/2013/08/29/easy-custom-layouts-for-default-sharepoint-forms/

Page 10: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Why SharePoint & jQuery?

• Let SharePoint do the heavy lifting!• Page Modifications

– Remove Clutter– Improve Flow – Add business logic to forms

• Call Web Services – Basic Workflow

• Create/update/delete items based on user choices– Pull data in from other lists and sites

• Create dashboards – TONS of free 3rd party libraries– Graphs, charts, dialogs, animations, etc

Page 11: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery & SharePoint Basics

The development process:• Create a Script• Add script to a page in SharePoint• Viola!

Why?• Works in SharePoint 2007,2010,2013, &

O365• Great stepping stone to SharePoint

Hosted whatever-they’re-called-today• No Visual Studio• No Add-in model• No Oauth (yay!)

Page 12: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery & SharePoint Basics

• Scripts execute with same privileges as current user

• Permissions cannot be elevated• Interact with SharePoint List data using

JavaScript Client Side Object Model (JSOM), REST, or SPServices

• Deployment options• Add-In Model• Sandbox Solutions• Manual

Page 13: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Methods Commonly Used in SharePoint

• Learn how SharePoint builds a page and how to traverse the DOM– Show / Hide information– Get / Set field values– Bind to events on elements

Page 14: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<script type="text/javascript">

$(document).ready(function($){//this script executes after the page is loaded//if you need to interact with the DOM put script here

})

//Script placed here would execute before the page is finished loading.

</script>

Page 15: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

Page 16: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

//Retrieve the element by ID:$(“#myID”);

Page 17: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

//Retrieve the element by attribute:$(“div[attribute=‘myAttribute’]”);

Page 18: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

//Retrieve every div on the page$(“div”).each(function() {

//”this” is the current element in each loop$(this).method();

});//Hide all divs on the page$(“div”).hide();

Page 19: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

//Retrieve every div of a specific class$(“div.myClass”).each(function() {

//”this” is the current element in each loop$(this).method();

});//Hide all divs of a specific class on the page$(“div.myClass”).hide();//Hide all elements of a specific class on the page$(“.myClass”).hide();

Page 20: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>

//Retrieve the div that contains content “World”$(“div:contains(‘World’)”).each(function() {

//”this” is the current element in each loop$(this).method();

});

Page 21: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQuery Basics

<div id=“myID” attribute=“myAttribute” class=“myClass” ><b>Hello World</b></div>• `

//Retrieve the formatted HTML for an element$(“#myID”).html(); //returns <b>Hello World</b>//Set the formatted HTML for an element$(“#myID”).html(“<b>Hello Nurse</b>”);//Retrieve the text with HTML formatting stripped out$(“#myID”).text(); //returns Hello World//Set the unformatted text of an element$(“#myID”).text(“Hello Nurse”);

Page 22: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

MORE jQuery basics

• //get input / select values• $(“#id”).val();• //set input / select values• $(“#id”).val(“value”);• //uncheck a check box• $(“#id").removeAttr('checked');• //check a check box• $(“#id").attr('checked','checked'); • //is a check box checked?• if ($(“#id”).is(':checked'))

Page 23: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

MORE jQuery basics

<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>

Page 24: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

MORE jQuery basics

<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>

• //get the row that contains the div “myElement”• $(“#myElement”).closest(“tr”);• //get the cell that contains the div “myElement”• $(“#myElement”).closest(“td”);• Or• $(“#myElement”).parent();

Page 25: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

MORE jQuery basics

<tr id=‘myRow’><td><div id=‘myElement’></div><div id=‘myOtherElement’></div></td></tr>

• //get the div AFTER myElement• $(“#myElement”).next(“div”);• Or• $(“#myElement”).next();• //get the div BEFORE myOtherelement• $(“#myOtherElement”).prev(“div”);• Or• $(“#myOtherElement”).prev();

Page 26: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Chaining

• //find the input element that has the “title” attribute equal to “Name”• //then find it’s parent cell’s previous cell. Then find the “h3” element and

replace the HTML• $("input[title='Name']").closest("td").prev("td").find("h3").html("File Name

<font color='red'>*</font>");• //In English: Find the label for the field “Name” and change it to “File

Name” and add a red astrisk

• //find the input element that has the “title” attribute equal to “City”• //then hide the entire row that contains the input• $(“input[title=‘City’]”).closest(“tr”).hide();• //In English: Hide the SharePoint Form Field and label for the field with the

Display• //name “City”

Page 27: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

How About Some Best Practices?

• Use the Element’s ID when possible• Reduce DOM searches • Re-use code / Good coding practices• Minimize files• Use animations to hide slow performance• Delay loading of Selects until you need

the data

Page 28: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Using Third Party Libraries

• Tips for selection and integration• Look for supported / documented libraries• Test in target browsers before

implementing• Duplicate file structure• Test “vanilla” in SharePoint first

Page 29: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Using Third Party Libraries

• Some of my favorites• Content Slider - http://unslider.com • Formatted Tables - http://www.datatables.net/• Modal Window -

http://www.ericmmartin.com/projects/simplemodal/• SPServices - http://spservices.codeplex.com/• Calendar - http://arshaw.com/fullcalendar/• Stratus Forms – http://www.stratusforms.com

Page 30: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Let’s DO some stuff!!!

I know!! It’s about time? Right?

Page 31: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

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.

Page 32: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

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>

Page 33: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

jQueryUI demo

Page 34: SPTechCon Boston 2015 - Utilizing jQuery in SharePoint

Mark [email protected]@mrackley