Transcript Beginning SharePoint Development with JavaScript

Thanks to our Sponsors!
 Platinum:
 Gold:
 Silver:
 Raffle:
More Fun Stuff
Raffle: Please join us in the Atrium at 5:15 PM for the raffle. We are
raffling some exciting prizes including Fitbits, HP tablets, and who
knows, maybe a Surface 3 (need to be present to win)!!!
SharePint will be held at Mad Mex (370 Atwood St, Pittsburgh, PA
15213). While it starts at 5:30 PM, there’s no end time!!!! 
Pittsburgh Area SharePoint User Group
Meets at the Microsoft office on the North Shore
More Info: https://www.linkedin.com/groups/Pittsburgh-Area-SharePointUser-Group-3769745/about
We do Request that…
You fill out the Session Evals. These will also be your Raffle tickets.
Print your name clearly if you intend to participate in the Raffle and
drop the forms at the registration desk after the last session.
You visit the sponsors. The event is possible due to their generous
support and we request that you visit them and inquire about their
products & services.
Cell phones be kept on silent as a courtesy to other attendees and
speakers



www.ctspug.org

www.jaredmatfess.com
[email protected]

@SlalomHartford































http://channel9.msdn.com/Blogs/Office-365-Dev/JavaScript-injection-in-SharePoint-Online-Office-365-Developer-Patterns-and-Practices












 SharePoint Designer!
 Hardcore-Developer might scoff but SharePoint Designer is an awesome tool when you’re first
getting started
Option #1
Embed in Script Editor Web Part (SP2013)
• Please don’t
Option #2
Document Library – Reference via Content Editor Web Part!
• Enable Versioning (just in case)
Option #3
Drop it in the hive (on premise only)?
• Only if you want to dance with danger
Option #4
Bundle with a SharePoint App (2013 only)















































1.
2.
3.
4.






https://ctsharepointusergroup.sharepoint.com/bootstrap/_api/Web/Lists/GetByTitle('CustomNews')
Not helpful




Please work…
2
3
4
5
6
1
1
• Add empty <div> to page with unique ID
• HTML will be dynamically be written to
<div> later using JavaScript
2
• Add custom CSS references
• Add jQuery reference (local or CDN)
3
• Use jQuery’s $( document ).ready() to wait until
the Document Object Model (DOM) for the page
is ready for JavaScript code to execute
• The ‘use script’ directive (introduced in
ECMAScript 5) enforces rules / safeguards such as
requiring variables to be declared before use
4
• jQuery $.ajax call asynchronously executes
REST call to get List data
• Requested data format is JSON
• Success or Error function is executed on
completion
5
• Success function initialized empty array to hold HTML
that will be written to page
• For loop iterates through all items and builds HTML
• HTML is written to empty <div> on page
6
• Error function will execute if an error is
returned by the AJAX call
• Displaying a JavaScript alert that says
“error” is not a best practice 






http://www.momentjs.com


http://www.jqueryui.com

http://www.datatables.net

http://www.pluralsight.com/courses/developing-sharepoint-2013-javascript

http://www.pluralsight.com/courses/sharepoint-2013-client-object-model-rest