PhoneGapAnd_jQueryMobileFor   SharePointvar MobileWebInSharePoint = {    Author: ‘Kiril Iliev’,    Tags: [‘SharePointAPI’,...
Summary    What is PhoneGap?    PhoneGap.ProjectStructure    Short DEMO and Tips    SharePoint.Communication    DEMO ...
What is PhoneGap?PhoneGap is a collection of tools, and librariesthat allow you to build native mobileapplications for mul...
What is PhoneGap? Re-usability
PhoneGap.ProjectStrucutre    The www folder    App Init – index.js and index.html    Enable debug information    Loadi...
DEMOPhoneGap Project Structure
SharePoint.Communication• Using ASMX Services and SOAP Messages• Using SVC services• Using the API – SharePoint 2013 _api
SharePoint.Communication = {    asmxService: true};object = {     spSite: $("#spSite").val() + "_vti_bin/authentication.as...
SharePoint.Communication = {    svcServices: true};$.getJSON($("#spSite").val() + "/_vti_bin/listdata.svc/Birthdays", func...
SharePoint.Communication = {    sp2013API: true};GetListItems: function (params, onSuccessFunc, onErrorFunc) {            ...
SharePoint.Communication = {    sp2013API.Extend: true};• _api alias for _api_bin/client.svc• All new functionalities in _...
SharePoint.Communication = {    sp2013API.ServiceEndPoints: […]};Area                                  Access pointSite   ...
DEMOService End Points
SharePoint.Communication = {    CRUD.Read: {…}};• GET request• Accept Header   •   application/json;odata=verbose //or    ...
DEMOSharePoint.ReadData
SharePoint.Communication = {    CRUD.Create: {…}};• Sending the FormDigest Header   •   X-RequestDigest header inside the ...
DEMOSharePoint.CreateData
SharePoint.Communication = {    CRUD.Delete: {…}};• If-Match header• RequestType: ‘DELETE’• ItemIdentification(ID)• …and d...
DEMOSharePoint.DeleteData
SharePoint.Communication = {    CRUD.Update: {…}};•If-Match header – etag identification•RequestType: ‘PUT’ or ‘MERGE’•Do ...
DEMOSharePoint.UpdateData
Thanks to our Sponsors:Diamond Sponsor:Platinum Sponsors:Gold Sponsors:Swag Sponsors:Media Partners:
Expect very soon: SharePoint Saturday!  Saturday, June 8, 2013  Same familiar format – 1 day filled with sessions focused ...
jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013
Upcoming SlideShare
Loading in...5
×

jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013

1,120

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,120
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

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)
  • jsSaturday - PhoneGap and jQuery Mobile for SharePoint 2013

    1. 1. PhoneGapAnd_jQueryMobileFor SharePointvar MobileWebInSharePoint = { Author: ‘Kiril Iliev’, Tags: [‘SharePointAPI’, ‘MobileWeb’]};
    2. 2. Summary What is PhoneGap? PhoneGap.ProjectStructure Short DEMO and Tips SharePoint.Communication DEMO – CRUD with SharePoint 2013 REST Services
    3. 3. What is PhoneGap?PhoneGap is a collection of tools, and librariesthat allow you to build native mobileapplications for multiple devices.* * PhoneGap Site
    4. 4. What is PhoneGap? Re-usability
    5. 5. PhoneGap.ProjectStrucutre The www folder App Init – index.js and index.html Enable debug information Loading plugins App information
    6. 6. DEMOPhoneGap Project Structure
    7. 7. SharePoint.Communication• Using ASMX Services and SOAP Messages• Using SVC services• Using the API – SharePoint 2013 _api
    8. 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. 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. 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. 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. 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. 13. DEMOService End Points
    14. 14. SharePoint.Communication = { CRUD.Read: {…}};• GET request• Accept Header • application/json;odata=verbose //or application/atom+xml
    15. 15. DEMOSharePoint.ReadData
    16. 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. 17. DEMOSharePoint.CreateData
    18. 18. SharePoint.Communication = { CRUD.Delete: {…}};• If-Match header• RequestType: ‘DELETE’• ItemIdentification(ID)• …and do not forget the FormDigest, of course
    19. 19. DEMOSharePoint.DeleteData
    20. 20. SharePoint.Communication = { CRUD.Update: {…}};•If-Match header – etag identification•RequestType: ‘PUT’ or ‘MERGE’•Do I need to mention the FormDigest?
    21. 21. DEMOSharePoint.UpdateData
    22. 22. Thanks to our Sponsors:Diamond Sponsor:Platinum Sponsors:Gold Sponsors:Swag Sponsors:Media Partners:
    23. 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

    ×