SPS Phoenix – Tory Douglas - torydouglas.com

bluntmoaningΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

130 εμφανίσεις


Tory Douglas

Principal Consultant @Neudesic

Portals and Collaboration

Email: Tory.Douglas@neudesic.com


Blog: www.torydouglas.com


»
Microsoft Certified Professional (MCP)

»
Microsoft Certified Application Developer(MCAD)

»
Microsoft Certified Solution Developer(MCSD)

»
Microsoft Certified Technical Specialist WSS 3.0 Configuration

»
Microsoft Certified Technical Specialist MOSS 2007 Configuration

»
Microsoft Certified Technical Specialist SharePoint 2010 Configuration






»
Many recent changes for Client Side and
developing
for SharePoint.
The rest
api

is a
great improvement.

»
This session will
explore
using rest
api
,
jquery

and knockout.

»
These techniques can be used on SharePoint
2010 , 2013 and SharePoint Online

»
Client Side Development

˃
Overview

˃
Example

»
SharePoint Rest API

˃
Overview

˃
Examples

»
Jquery


˃
Overview

˃
Examples

»
Knockout

˃
Overview

˃
Examples

»
Putting it all together


Requirements


Filter
manufacturers by country


Load vehicles for a manufacturer


See specific vehicle
details


Lists


Vehicles
List


Lookup to manufacturer


Manufacturers
List


Lookup to countries


Countries List


HTML

CSS

JavaScript

JSON

DOM

Async

SharePoint
CSOM

No Page
Refresh

User
Experience

We call it client side development because we are performing
much of the interaction
on
the client (web browser) in this case,
instead of relying on the server to perform the processing.



In general I believe it is combing
these ideas / technologies
together to create a better user
experience.


»
Can you think of an example of a site you use
that takes advantage of client side
development?

˃
Gmail

˃
Yahoo Mail

˃
Office Web Apps

»
An example I did for a client on SharePoint 2010

˃
http://
www.cpsaarizona.org

˃
http://
www.cpsaarizona.org/Pages/Provider
-
Manual
-
Overview.aspx





»
REST stands for

Re
presentational

S
tate

T
ransfer.

»
Simple stateless client
-
server architecture using
http protocol

»
RESTful

applications use HTTP
requests to perform
different actions based on http verbs:

˃
Get: get a list

˃
Post : create a list

˃
Delete: delete a list

˃
Put or Merge: change a list


»
Today were focusing on the most common use
case, reading data, which uses http get.


»
Gaining momentum in industry

˃
Flickr, Twitter, YouTube, SharePoint 2013

»
Simpler and Easier to Use

˃
Results can be returned in JSON and ATOM format.

˃
Easier to use than Soap
-
based web service.

»
Each query is submitted with a unique
url

˃
Can be cached by proxy servers

»
Can be used outside of
.net

since doesn’t need specific
assemblies.

»
Can be used for mobile device such as
ios

or android.

»
No CAML

!!










For more info on
OData

checkout

http
://msdn.microsoft.com/en
-
us/data/hh237663

»
SharePoint 2010

˃
In SharePoint 2010 the rest
api

is limited to
ListData.svc

accessible
from
http://contososerver/_vti_bin/ListData.svc
.

˃
This can be used to interact with List Data inside of SharePoint.

»
SharePoint 2013

˃
Urls

can go through _
api

folder

˃
You can replace

http://spsphoenixdemo.sharepoint.com/_vti_bin/client.svc/web/lists

˃
With this

http://spsphoenixdemo.sharepoint.com/_api/web/lists

˃
Additional Rest API functionality exposed in 2013 (next slide)





»
Using
BCS REST service:

˃
http://msdn.microsoft.com/en
-
us/library/jj163227.aspx

»
Using
Search REST service:

˃
http://
msdn.microsoft.com/en
-
us/library/office/dn423226.aspx

»
Using
Social Features REST service:

˃
http://msdn.microsoft.com/en
-
us/library/jj822974.aspx

»
User Profiles

˃
http://
msdn.microsoft.com/en
-
us/library/office/jj163800.aspx




»
If you like to work in
ie

then you will want to turn off the feed
reader view so you can see the xml from the rest
api

calls in the
browser.



http://intranet/_vti_bin/ListData.svc

Typing the URL of the REST service returns a standard Atom service
document that describes collections of information that are available in
the SharePoint Foundation site.

http://intranet/_vti_bin/ListData.svc/Manufacturers

Typing a name after the URL of the service returns SharePoint
Foundation list data in XML format as a standard Atom feed that contains
entries for every list item and the properties of each item, in addition to
navigation properties that are represented as Atom links. Navigation
properties represent relationships to other SharePoint Foundation lists
that are formed through lookup columns.

http://intranet/_vti_bin/ListData.svc/$
metadata

The SharePoint Foundation interface returns entity data model XML that
describes the entity types for every list in the website.

http://intranet/_vti_bin/ListData.svc/Manufacturers(2)

Returns the specified list item by ID (2) as an Atom feed with one entry
that corresponds to the requested item.

http://intranet/_vti_bin/ListData.svc/Manufacturers?$orderby=Title

Sorts the Atom feed by name.

http://intranet/_vti_bin/ListData.svc/Vehicle?$select=Title&$filter=Man
ufacturerId%20eq%203

Use a filter to limit the items returned. The select call here brings back
only the selected columns in this case the Title field.

https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Manufacturers')/Items

Example

getting the items inside the Manufacturers
list

https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Countries')/Items

Example

of getting the items inside the Countries list

https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Manufacturers')/Items?$f
ilter=CountryId%20eq%201

Example

of filtering a list with a lookup column.
Countries and Manufacturers, here we are grabbing
the Manufacturers for country id = 1

https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items

Example

of getting the items inside the Vehicles list

https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items?$filter=
ManufacturerId%20eq%2049

Example of getting the vehicles

for
ManufacturerId

49
which is BMW

https://spsphoenixdemo.sharepoint.com/_api/web/lists/getbytitle('Vehicles')/Items(3)

Example of getting

a single vehicle record.

Sample 2013 calls we will be using today to get data from lists

Remember we
can swap “_
vti_bin
/
client.svc
” with “_
api
”, we are using this below

»
Jquery

is a small feature rich
javascript

library to
make your life easier

˃
HTML document
traversal and
manipulation

˃
event handling, Animation

˃
Ajax
much
simpler, wraps the browser
XMLHttpRequest

object

˃
Cross browser support


»
Jquery

ui

is another library, focused around the
user interface

˃
provides interactions, effects, widgets, and themes

˃
built
on top of the
jQuery


»
Include
jquery

on our site by either
downloading files or referencing from a CDN

»
Jquery

CDN example

»
<script type="text/
javascript
"
src
="https://cdnjs.cloudflare.com/
ajax
/libs/
jquery
/1.8.3/jquery.min.js"></script
>

»
Jquery

UI example

»
<
script type="text/
javascript
"
src
="https://cdnjs.cloudflare.com/
ajax
/libs/
jqueryui
/1.10.3/jquery
-
ui.min.js"></script>



You can add the reference in multiple ways :

»
Reference in the head section of html page

»
Reference
in <
asp:Content

ContentPlaceHolderId
="
PlaceHolderAdditionalPageHead
"
runat
="server
"> of a page
tied to a master page

»
Add script tag directly to a visual web part

<html>

<head>

<script type="text/
javascript
"
src
="https://cdnjs.cloudflare.com/
ajax
/libs/
jquery
/1.8.3/jquery.min.js"></script>

<script type="text/
javascript
"
src
="https://cdnjs.cloudflare.com/
ajax
/libs/
jqueryui
/1.10.3/jquery
-
ui.min.js"></script
>

<
script type="text/
javascript
">


$(document).ready(function() {


alert(“hello from
jquery
”);


});


</script>


</head>

<body>

</body>

</
htm
l
>



http://
jsfiddle.net/jZ3fz

<
script type="text/
javascript
">

$(
document).ready(function()
{


$.
ajax
({



url:
"/_
api
/web/lists/
getbytitle
(‘
listname
’)/
items"
,



method: "GET",



headers: { "Accept": "application/
json
;
odata
=verbose" },



success: function (data) {




// Returns JSON collection of the
results




$.each(
data.d.results,function
(
key,val
){



var

title =
val.Title
; //reference list column off of the
val

object here we get the Title column




alert(title);



});



},



error: function (data) {



alert('an error has occurred');



}



});


});


</
script
>

»
The documentation is pretty good

˃
http://api.jquery.com
/

»
Ajax specific information, pertains to what we
are trying to do today.

˃
http://api.jquery.com/jQuery.ajax/

»
Let’s jump to some examples I have prepared

˃
http://
jsfiddle.net/Lqb22/

˃
http://
jsfiddle.net/Lqb22/1/

˃
http://
jsfiddle.net/Lqb22/2/

˃
http://jsfiddle.net/Lqb22/3
/

˃
http://
jsfiddle.net/Lqb22/4/

˃
http://
jsfiddle.net/Lqb22/6/



»
Knockout is a
Javascript

Library

»
Has the concept of an underlying data model, uses
Model
-
View
-
View
-
Model (MVVM) pattern

»
Makes it easier to maintain your application when
things get more complicated

»
Can be used to create rich dynamic User Interfaces




»
www.knockoutjs.com

˃
Download the
js

file

˃
Or use the
cdn

+
http://
cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout
-
min.js


»
Reference the
js

on your page


»
<script type="text/
javascript
"
src
="https://cdnjs.cloudflare.com/
ajax
/libs/knockout/2.3.0/knockout
-
min.js"></script>

»
Model
-
View
-
View Model (MVVM)

is a
design pattern for building user
interfaces
.

»

It
allows you to split your UI
into three
parts to help keep it simple:

˃
A Model

˃
A View Model

˃
A View

»
Your
application’s stored data.

»
Data
represents objects and operations in your
business domain

»
Independent
of any
ui

»
Usually
use
ajax

to read a write this data


Sample view model (it’s a
javascript

object)


var

myViewModel

= {


personName
: 'Bob',


personAge
: 123

};


»
pure
-
code
representation of the data and
operations on a UI.

»
For what we build today our view model will hold
the following types of information :

˃
Manufacturers property array

˃
Countries property array

˃
Vehicles property array

˃
SelectedVehicle

object

˃
Methods to help add or set items to this data above


»
Note that this is not the UI itself:

˃
no
concept of buttons or display
styles

˃
holds
the unsaved data the user is working with.



»
The user interface, what you see.

»
Displays information from the
view
model.

»
Can send
commands to the view model (e.g.,
when the user clicks buttons
)

»
Updates when
the state of the view model
changes.

»
When using KO, your view is simply your HTML
document


<html>

<head>

<script type="text/
javascript
"
src
="https://cdnjs.cloudflare.com/
ajax
/libs/knockout/2.3.0/knockout
-
min.js"></script>

</head>

<body>

My name is <span data
-
bind="text:
personName
"></span> and
i

am <span data
-
bind="text:
personAge
"></span> years old.

</body>

<script>

var

myViewModel

= {
personName
: 'Bob',
personAge
: 123};

ko.applyBindings
(
myViewModel
);

</script>

</html>


˃
Examples

+
View bound to data model


http
://jsfiddle.net/crk7Y
/

+
2 way binding


http://jsfiddle.net/7CQd3
/

+
Computed Property


http://jsfiddle.net/7CQd3/1/


To keep our examples simple today we assumed we are writing code
in the context of an authenticated user. This could be
javascript

in a
web part or on a SharePoint page.


For additional information on app authentication and authorization
(
Oauth
) you can visit:
http://
msdn.microsoft.com/en
-
us/library/fp142384.aspx


For additional information on SharePoint 2013 Cross Domain Library

http://msdn.microsoft.com/en
-
us/library/fp179927.aspx

Thank you for attending.


I hope you enjoyed it or at least learned a thing or two!!