• Save
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013

  • 1,350 views
Uploaded on

 

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,350
On Slideshare
1,350
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Question for the public: Which design pattern do you see in the index.html and js files?
  • Explain: www folder, content type for new files Explain the interaction between HTML and JS file – creates custom events AFTER device ready Show debugging information – App.cs file Show Config.xml file – the app manifest, explain about plugins
  • Open the feeds in the browser: http://93.152.184.204:2013/_api/contextinfo http://93.152.184.204:2013/_api/web/lists/ http://93.152.184.204:2013/_api/web/lists/getbytitle('Birthdays')/items http://93.152.184.204:2013/_api/web/lists/getbytitle('Birthdays')/items(1)

Transcript

  • 1. PhoneGapAnd_jQueryMobileFor SharePointvar MobileWebInSharePoint = { Author: ‘Kiril Iliev’, Tags: [‘SharePointAPI’, ‘MobileWeb’]};
  • 2. Summary What is PhoneGap? PhoneGap.ProjectStructure Short DEMO and Tips SharePoint.Communication DEMO – CRUD with SharePoint 2013 REST Services
  • 3. What is PhoneGap?PhoneGap is a collection of tools, and librariesthat allow you to build native mobileapplications for multiple devices.* * PhoneGap Site
  • 4. What is PhoneGap? Re-usability
  • 5. PhoneGap.ProjectStrucutre The www folder App Init – index.js and index.html Enable debug information Loading plugins App information
  • 6. DEMOPhoneGap Project Structure
  • 7. SharePoint.Communication• Using ASMX Services and SOAP Messages• Using SVC services• Using the API – SharePoint 2013 _api
  • 8. SharePoint.Communication = { asmxService: true};object = { spSite: $("#spSite").val() + "_vti_bin/authentication.asmx", spSoap:  "<?xml version=1.0 encoding=utf-8; ?>" + "<soap:Envelope xmlns:xsi=http://www.w3.org/2001/XMLSchema- instance xmlns:xsd=http://www.w3.org/2001/XMLSchema xmlns:soap=http://schemas.xmlsoap.org/soap/envelope/ >" + "<soap:Body>" + "<Login xmlns=http://schemas.microsoft.com/sharepoint/soap/>" + "<username>" + window.localStorage.getItem("username") + "</username>" + "<password>" + window.localStorage.getItem("username") + "<password>" + "</Login>" + "</soap:Body>" + "</soap:Envelope>"} 
  • 9. SharePoint.Communication = { svcServices: true};$.getJSON($("#spSite").val() + "/_vti_bin/listdata.svc/Birthdays", function (data) {      $.each(data.d.results, function (i, item) {          var output = "<li><a href=# data-theme=b data-icon=gear >" + $(this).attr("ows_Title") + "</a></li>";          $("#spListView").append(output);      }); $("#spListView").listview("refresh");});
  • 10. SharePoint.Communication = { sp2013API: true};GetListItems: function (params, onSuccessFunc, onErrorFunc) {          var xhr = $.ajax({              headers: {                  "Authorization": spListViewModel.cryptBasicAuth(window.localStorage.getItem("username"),       window.localStorage.getItem("password")),                  "ACCEPT": "application/json;odata=verbose", //or application/atom+xml                      "X-RequestDigest": params.formDigest              },              url: params.spSite,              type: "POST",              dataType: "json",              contentType: "application/json;odata=verbose",              success: onSuccessFunc,              error: onErrorFunc         });}
  • 11. SharePoint.Communication = { sp2013API.Extend: true};• _api alias for _api_bin/client.svc• All new functionalities in _api are presented in the _api_bin/client.svc as well• Querying is similar to the Managed Client Object Model
  • 12. SharePoint.Communication = { sp2013API.ServiceEndPoints: […]};Area Access pointSite http://sitecollection/_api/siteWeb http://sitecollection/_api/web http://User Profile sitecollection/_api/SP.UserProfiles.Peo pleManagerSearch http://sitecollection/_api/searchPublishing http://sitecollection/_api/publishing
  • 13. DEMOService End Points
  • 14. SharePoint.Communication = { CRUD.Read: {…}};• GET request• Accept Header • application/json;odata=verbose //or application/atom+xml
  • 15. DEMOSharePoint.ReadData
  • 16. SharePoint.Communication = { CRUD.Create: {…}};• Sending the FormDigest Header • X-RequestDigest header inside the SharePoint context • X-RequestDigest header outside the SharePoint context• __metadata ‘type’ property required • List name dependent • Conflicts with different lists
  • 17. DEMOSharePoint.CreateData
  • 18. SharePoint.Communication = { CRUD.Delete: {…}};• If-Match header• RequestType: ‘DELETE’• ItemIdentification(ID)• …and do not forget the FormDigest, of course
  • 19. DEMOSharePoint.DeleteData
  • 20. SharePoint.Communication = { CRUD.Update: {…}};•If-Match header – etag identification•RequestType: ‘PUT’ or ‘MERGE’•Do I need to mention the FormDigest?
  • 21. DEMOSharePoint.UpdateData
  • 22. Thanks to our Sponsors:Diamond Sponsor:Platinum Sponsors:Gold Sponsors:Swag Sponsors:Media Partners:
  • 23. Expect very soon: SharePoint Saturday! Saturday, June 8, 2013 Same familiar format – 1 day filled with sessions focused on SharePoint technologies Best SharePoint professionals in the region Registrations will be open next week (15th)! www.SharePointSaturday.eu