SharePoint and jQuery Essentials

Slides:



Advertisements
Similar presentations
JQuery MessageBoard. Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will.
Advertisements

Getting Started with jQuery. 1. Introduction to jQuery 2. Selection and DOM manipulation Contents 2.
Samsung Smart TV is a web-based application running on an application engine installed on digital TVs connected to the Internet.
JavaScript and AJAX Jonathan Foss University of Warwick
CSCI 3100 Tutorial 6 Web Development Tools 1 Cuiyun GAO 1.
JQuery CS 380: Web Programming. What is jQuery? jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling,
JQuery. What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library that simplifies HTML document traversing and manipulation event handling.
Philly.NET Hands-On jQuery + Plug-ins Bill Wolff, Rob Keiser.
1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)
About me I attend the Edina chapter of TechMasters Been a programmer since age 13, sparked by playing video games Currently employed at GMAC as an independent.
JQuery CS 268. What is jQuery? From their web site:
PhpXperts What is jQuery Javascript Library Fast and concise Simplifies the interaction between HTML and JavaScript.
Jquery IS JQuery Jquery Example of mouseover event that shows a submenu when menu selected: $(‘#menu’).mouseover(function() { $(‘#submenu’).show();
By Jon Marozick.  JavaScript toolkit  Aims to change the way developers think  jQuery philosophy  Find some HTML  Do something to it.
Sascha Wener.  Definition from Microsoft Developer Network: “A theme is a unified set of design elements and color schemes that you apply to pages to.
JQuery 10/21. Today jQuery Some cool tools around the web JavaScript Libraries Drawing libraries HTML Frameworks Conventions.
A really fairly simple guide to: mobile browser-based application development (part 4, JQuery & DOM) Chris Greenhalgh G54UBI / Chris Greenhalgh.
Ku-Yaw Chang Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University.
SERVER web page repository WEB PAGE instructions stores information and instructions BROWSER retrieves web page and follows instructions Server Web Server.
JQUERY | INTRODUCTION. jQuery  Open source JavaScript library  Simplifies the interactions between  HTML document, or the Document Object Model (DOM),
Review IDIA 619 Spring 2013 Bridget M. Blodgett. HTML A basic HTML document looks like this: Sample page Sample page This is a simple sample. HTML user.
Sustainable SharePoint 2010 Customizations By Bill Keys.
1 Accelerated Web Development Course JavaScript and Client side programming Day 2 Rich Roth On The Net
Extending HTML CPSC 120 Principles of Computer Science April 9, 2012.
JQuery Performance Tips Eric Presentation files: goo.gl/i6UbB.
Animation & Effects Using JQuery. What is jQuery? jQuery is a lightweight, JavaScript library. The purpose of jQuery is to make it much easier to use.
Dynamic Web Authoring JavaScript – Array and function (2) COM311H Zheng, School of C&M, UUJ1.
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
HTML Forms. Slide 2 Forms (Introduction) The purpose of input forms Organizing forms with a and Using different element types to get user input A brief.
Forms Collecting Data CSS Class 5. Forms Create a form Add text box Add labels Add check boxes and radio buttons Build a drop-down list Group drop-down.
JavaScript Library. What is jQuery jQuery is a lightweight JavaScript library. The purpose is to make it easier to use JavaScript code on your website.
Unleash the Power of jQuery Learning & Development Team Telerik Software Academy.
JQuery JavaScript is a powerful language but it is not always easy to work with. jQuery is a JavaScript library that helps with: – HTML document traversal.
Taking Control of Visual Studio through Extensions and Extensibility Anthony Cangialosi Senior Program Manager Lead Microsoft Corporation DEV311.
HTML Overview Part 5 – JavaScript 1. Scripts 2  Scripts are used to add dynamic content to a web page.  Scripts consist of a list of commands that execute.
Unit 13 –JQuery Basics Instructor: Brent Presley.
Javascript Overview. What is Javascript? May be one of the most popular programming languages ever Runs in the browser, not on the server All modern browsers.
Web Technologies Lecture 8 JQuery. “A fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax.
UNDERSTANDING YOUR OPTIONS FOR CLIENT-SIDE DEVELOPMENT IN OFFICE 365 Mark Rackley
IE Developer Tools Jonathan Seitel Program Manager.
SHAREPOINT & JQUERY. Hi, my name and I am a product manager at lightning tools. I have been working with SharePoint for 5 years.
05 | Integrating JavaScript and MVC 4 Jon Galloway | Tech Evangelist Christopher Harrison | Head Geek.
Wes Preston DEV 202. Audience: Info Workers, Dev A deeper dive into use-cases where client-side rendering (CSR) and SharePoint’s JS Link property can.
1 Using jQuery JavaScript & jQuery the missing manual (Second Edition)
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
CSCI 3100 Tutorial 5 JavaScript & Ajax Jichuan Zeng Department of Computer Science and Engineering The Chinese University of Hong.
Shaun Geisert Matt Trice. What is jQuery?  Open source Javascript library/framework Created by John Resig  Their tagline – “The Write Less, Do More.
SharePoint & jQuery. About me Phill Duffy – Product Manager at Lightning Tools Ltd – Author of ‘Pro SharePoint with jQuery’ – MCTS Application Developer.
Getting Started with CSS
Unit M Programming Web Pages with
Tek Raj Chhetri Code for Humans not for machine.
Unit M Programming Web Pages with
Intro to JavaScript CS 1150 Spring 2017.
HTML.
Chrome Developer Tools
Using Access and the Web
Microsoft Office Illustrated
jQuery The Easy JavaScript Nikolay Chochev Technical Trainer
JQuery with ASP.NET.
Introduction to JavaScript
AngularJS and SharePoint I Chris Douglas Senior SharePoint Developer ECS Web:
..
MIS JavaScript and API Workshop (Part 2)
Training & Development
Javascript and JQuery SRM DSC.
An Introduction to JavaScript
Introduction to JavaScript
Web Client Side Technologies Raneem Qaddoura
Introduction to JavaScript
Web Programming and Design
Presentation transcript:

SharePoint and jQuery Essentials Mark Rackley – Solutions Architect / SharePoint Practice Lead / Developer Email: mrackley@gmail.com Blog: http://www.sharepointhillbilly.com Twitter: @mrackley

Workshop Outline jQuery Overview / Common methods Deployment & Development Interacting with SharePoint & the DOM Reading / Writing SharePoint List Data Using Third Party Libraries Putting it all together to build an application

jQuery Overview What / Why jQuery? JavaScript utility library supported by Microsoft Don’t have to crack open Visual Studio or deploy solutions (ideal for SharePoint online and tightly controlled environments) It’s the future

jQuery Overview What skills do you need? JavaScript CSS, XML A development background It IS code Uses development constructs If you can’t write code, your ability to do magic will be limited to what you can copy/paste CAML, CAML, CAML… Sorry… Ability to think outside the box Use all the pieces together

What you need to be careful of jQuery Overview What you need to be careful of Performance Executes on client computer Don’t send too much data over the wire Inconsistent results Different browsers Network speed Client machine differences Changes in the jQuery library

jQuery Overview – JavaScript Common Methods Description Classes / Objects var myCar = new Object(); myCar.ID = 1; myCar.make = “Jeep”; myCar.model = “Wrangler”; myCar.color = “Silver”; var vehicles = new Ojbect(); vehicles[myCar.ID] = myCar; For each loops For (car in vehicles) { var thisCar = vehicles[car]; } .split() Var numbers = “1,2,3,4,5”; Var myArray = numbers.split(“,”); myArray[0] == “1” .replace() var myString = “This string has spaces”; var newString = myString.replace(“ “,””); newString == “Thisstringhasspaces”;

jQuery Overview – Common Methods Description $(document).ready(function($){}) Where code execution begins after page is loaded $(“#ElementID”) Returns element with given id $(“Type[attrib=‘value’]”) Gets element of specific type and attribute value $(“input[Title=‘First Name’]”) .show(), .hide(), .toggle() Shows, hides, toggles .html() Gets the raw html for an element with tags .text() Contents of an element with HTML tags stripped out .each(function() {}) Iterate through all elements that are found. $(“tr”).each(function() { }) would iterate through every row on the page. .closest(selector) Get the first element that matches the selector, beginning at the currently element and progressing UP the DOM $("input[title=‘Field Name']").closest("tr").hide(); .contains() Check to see if a DOM element is within another DOM element .find() Get the child elements of current element, filtered by a selector Chaining: $("#WebPartWPDnn").find("nobr b:contains('Sum = ')").html().split(" = ")[1].replace(",","");

Deployment & Development Deployment Options Document Library File System CDN Reference Options CEWP Link to source ScriptLinks DO NOT ENTER JS DIRECTLY IN MASTERPAGE

Deployment & Development Development Tools IDE Visual Studio Notepad++ SharePoint Designer Debugging IE Developer Tools Chrome debugger Fiddler Alerts… lots and lots of alerts Avoid Console.log (or use it wisely)

Interacting with SharePoint & the DOM View the DOM to understand what elements and classes exist on the page. “View page source” (Chrome) and “View Source” (IE) displays the contests of the DOM when the page is initially loaded. The DOM is always being modified, view the active DOM in your chosen debugger to view the DOM as it currently exists.

Interacting with SharePoint & the DOM Getting/Setting SharePoint Form Fields Text Boxes $(“input[title=’My Text Field’]”).val() Selects $(“select[title=’My Choice’]”).val(mySelectValue); Checkboxes $("input[title='My Check box']").removeAttr('checked'); $("input[title='My Check box']").attr('checked','checked'); http://sharepointhillbilly.com/archive/2011/08/20/a-dummies-guide-to-sharepoint-and-jqueryndashgetting-amp-setting-sharepoint.aspx

Reading/Writing SharePoint List Data SPServices vs. Client Object Model Feature SPServices COM Allows CRUD against SharePoint List Data Yes Works in SharePoint 2007 No Works in SharePoint 2010 Works with Anonymous Access Comes with additional helper functions

Using Third Party Libraries Tips for selection and integration Look for supported / document libraries Test in target browsers before implementing Duplicate file structure Test “vanilla” in SharePoint first

Using Third Party Libraries Some of my favorites Content Slider - http://www.awkwardgroup.com/sandbox/awkward-showcase-a-jquery-plugin/ Formatted Tables - http://www.datatables.net/ Modal Window - http://www.ericmmartin.com/projects/simplemodal/ SPServices - http://spservices.codeplex.com/ Calendar - http://arshaw.com/fullcalendar/

SharePoint Training application Putting it all together SharePoint Training application