Using REST to create Responsive HTML 5 SharePoint intranets
About Sundown Solutions  High end SharePoint Consultancy based in the North West  Microsoft Gold Partner  Customers covering the whole of the UK, Isle of Man, USA  Operate a streamlined “core” business with a wide network of Associates, Consultants and developers across the UK  Interested in working with forward-thinking, inspirational, businesses keen to move into Next Generation information management and productivity solutions based around the best Cloud Platform the industry has to offer  Strong network of “associates” bringing complementary skills to the team
Key People / Associates Heath Groves – MCM  A current Microsoft Certified Master and Microsoft Certified Solutions Master based in the North West, UK  Spent four years on the Office 365 Escalations team for both dedicated and multitenant working exclusively at Tier 3.  Now works free-lance for large organisations that require in-depth, high-end SharePoint assistance. Chris Webb – MCM  SharePoint 2010, MCSM SharePoint, & MCT  SharePoint architect currently working as a freelance consultant out of the Dallas/Ft Worth area.  Originally from the small town of Syracuse, Indiana, he started his career as a consultant primarily working with Exchange.  He then went on to do VMware, Active Directory, and SharePoint work.  In 2011, he moved to Texas and took a position as a Tier III SharePoint Escalation Engineer with the SharePoint Online Dedicated Escalation team at Microsoft.
Key People / Associates Keith McKnight Developer Pathik Rawal Consultant Karl Diggle Developer Adam Brown Power User Giles Court Power User Alan Richards MVP - Consultant Steve Dixon Senior SQL Consultant Sam Dolan Graphics Designer
Our Clients
Content  Defining the Problem  What is REST and why use it?  Getting ready to use REST  Demo 1 – The Basics  Demo 2 – From file  Demo 3 – Implementing the HTML5 Template  Demo 4 – Add REST to the template  Demo 5 – The template showcase  Summary  End
Content  All content from this presentation can be found at: http://www.sundownsolutions.co.uk  All related articles are listed on the blog: http://www.sundownsolutions.co.uk/blog Please contact me on Heath.groves@sundownsolutions.co.uk
The Problem
The Problem  Vast amounts of time and effort spent on the cloud infrastructure  O365, SP2016, Hybrid & Azure  Not much time spent and effort spent on latest web trends  Responsiveness - office Fabric UI – released in Q4 2015… really?  On-Prem responsiveness released via PNP… really?  SharePoint uses Master Pages  Upgrade blockers
The Consequences  SharePoint is “Heavy”  Long load times  SharePoint is “Ugly”  Although the O365 and SP2016 are perfectly functional  When compared to other “web” products SharePoint looks old  Web isn’t just Public – its also intranets  Intranets deserve our love to…
Agree or disagree  SharePoint usually has two tracks  Infrastructure  Development “When we move to the cloud we won’t need our Infrastructure team anymore” “SharePoint is not as relevant now as it once was…”
Infrastructure Team  How much time was spent on fixing servers?  How much time was spent on:  Permissions  User Training  Break Fixing Apps  Does this work load disappear with the move to the cloud?  No – but the way its actioned changes:  CSOM (PowerShell/JSOM)
Environmental Factors  Company data stored in SharePoint for nearly 2 decades  The richest data repository in the company  Data – obviously  Logs  Auditing  Search  People
The Gartner Scale of Influence  The use of APIs to interact seamlessly is one of the most used aspects on the current scale of influence  Any system that houses your company data that can be used in such a way is vital to the companies future.  API access to SharePoint is more relevant now than ever before.. “SharePoint has been away for a while… but on the May the 4th – your going to see that SharePoint is back – big time!”
What is REST and why use it?
What is REST?  REST stands for Representational State Transfer. (It is sometimes spelled "ReST".) It relies on a stateless, client-server, cacheable communications protocol -- and in virtually all cases, the HTTP protocol is used.  REST is an architecture style for designing networked applications. The idea is that, rather than using complex mechanisms such as CORBA, RPC or SOAP to connect between machines, simple HTTP is used to make calls between machines.  In many ways, the World Wide Web itself, based on HTTP, can be viewed as a REST-based architecture.  RESTful applications use HTTP requests to post data (create and/or update), read data (e.g., make queries), and delete data. Thus, REST uses HTTP for all four CRUD (Create/Read/Update/Delete) operations.  For SharePoint purposes we will be using REST with Javascript/jQuery
Why use REST with Sharepoint?  Simple to use  In comparison to caml  Language agnostic  Can be used in JavaScript, C#, pearl, PHP, Ruby…  Fast!  Lightweight  Can be used anonymously  Works seamlessly between O365 and on premise
Getting ready to use REST
Questions  Everything is easy when you know how…  How many people have used REST?  How many articles or videos have you found that show you how to implement a REST pull for SharePoint from start to end?  If this material is thin on the ground, yet its so easy… why is their a knowledge gap?
Link to jQuery  Not necessary required for REST  Used for the AJAX query portion  Use CDN: https://code.jquery.com/jquery-1.12.2.min.js  Or download and place in library for local use
Require Use remote Interface  Auth provider settings  Site Level
Demo 1 – The Basics
Code Base  Scripts Web Part:  Content Web Part:
Code Base  REST Web Part
Demo 2 – From file
Code Base
Demo 3 –Implementing the HTML 5 Template
Process  Select your HTML 5 Template  Upload to document library  If friendly URLs required then upload to pages  Rename pages to ASPX using SP Designer 2013  Set home page  Use section replacer to maintain tags (optional)
Demo 4 – Add REST to the template
Process  Create your content lists (News, Blogs etc.)  Link to your JS files  Build your REST queries
Demo 5 – The template showcase
Sundown Solutions
Fircroft
Symphony Housing
ARAG Insurance
Summary

Using rest to create responsive html 5 share point intranets

  • 1.
    Using REST tocreate Responsive HTML 5 SharePoint intranets
  • 2.
    About Sundown Solutions High end SharePoint Consultancy based in the North West  Microsoft Gold Partner  Customers covering the whole of the UK, Isle of Man, USA  Operate a streamlined “core” business with a wide network of Associates, Consultants and developers across the UK  Interested in working with forward-thinking, inspirational, businesses keen to move into Next Generation information management and productivity solutions based around the best Cloud Platform the industry has to offer  Strong network of “associates” bringing complementary skills to the team
  • 3.
    Key People /Associates Heath Groves – MCM  A current Microsoft Certified Master and Microsoft Certified Solutions Master based in the North West, UK  Spent four years on the Office 365 Escalations team for both dedicated and multitenant working exclusively at Tier 3.  Now works free-lance for large organisations that require in-depth, high-end SharePoint assistance. Chris Webb – MCM  SharePoint 2010, MCSM SharePoint, & MCT  SharePoint architect currently working as a freelance consultant out of the Dallas/Ft Worth area.  Originally from the small town of Syracuse, Indiana, he started his career as a consultant primarily working with Exchange.  He then went on to do VMware, Active Directory, and SharePoint work.  In 2011, he moved to Texas and took a position as a Tier III SharePoint Escalation Engineer with the SharePoint Online Dedicated Escalation team at Microsoft.
  • 4.
    Key People /Associates Keith McKnight Developer Pathik Rawal Consultant Karl Diggle Developer Adam Brown Power User Giles Court Power User Alan Richards MVP - Consultant Steve Dixon Senior SQL Consultant Sam Dolan Graphics Designer
  • 5.
  • 6.
    Content  Defining theProblem  What is REST and why use it?  Getting ready to use REST  Demo 1 – The Basics  Demo 2 – From file  Demo 3 – Implementing the HTML5 Template  Demo 4 – Add REST to the template  Demo 5 – The template showcase  Summary  End
  • 7.
    Content  All contentfrom this presentation can be found at: http://www.sundownsolutions.co.uk  All related articles are listed on the blog: http://www.sundownsolutions.co.uk/blog Please contact me on Heath.groves@sundownsolutions.co.uk
  • 8.
  • 9.
    The Problem  Vastamounts of time and effort spent on the cloud infrastructure  O365, SP2016, Hybrid & Azure  Not much time spent and effort spent on latest web trends  Responsiveness - office Fabric UI – released in Q4 2015… really?  On-Prem responsiveness released via PNP… really?  SharePoint uses Master Pages  Upgrade blockers
  • 10.
    The Consequences  SharePointis “Heavy”  Long load times  SharePoint is “Ugly”  Although the O365 and SP2016 are perfectly functional  When compared to other “web” products SharePoint looks old  Web isn’t just Public – its also intranets  Intranets deserve our love to…
  • 11.
    Agree or disagree SharePoint usually has two tracks  Infrastructure  Development “When we move to the cloud we won’t need our Infrastructure team anymore” “SharePoint is not as relevant now as it once was…”
  • 12.
    Infrastructure Team  Howmuch time was spent on fixing servers?  How much time was spent on:  Permissions  User Training  Break Fixing Apps  Does this work load disappear with the move to the cloud?  No – but the way its actioned changes:  CSOM (PowerShell/JSOM)
  • 13.
    Environmental Factors  Companydata stored in SharePoint for nearly 2 decades  The richest data repository in the company  Data – obviously  Logs  Auditing  Search  People
  • 14.
    The Gartner Scaleof Influence  The use of APIs to interact seamlessly is one of the most used aspects on the current scale of influence  Any system that houses your company data that can be used in such a way is vital to the companies future.  API access to SharePoint is more relevant now than ever before.. “SharePoint has been away for a while… but on the May the 4th – your going to see that SharePoint is back – big time!”
  • 15.
    What is RESTand why use it?
  • 16.
    What is REST? REST stands for Representational State Transfer. (It is sometimes spelled "ReST".) It relies on a stateless, client-server, cacheable communications protocol -- and in virtually all cases, the HTTP protocol is used.  REST is an architecture style for designing networked applications. The idea is that, rather than using complex mechanisms such as CORBA, RPC or SOAP to connect between machines, simple HTTP is used to make calls between machines.  In many ways, the World Wide Web itself, based on HTTP, can be viewed as a REST-based architecture.  RESTful applications use HTTP requests to post data (create and/or update), read data (e.g., make queries), and delete data. Thus, REST uses HTTP for all four CRUD (Create/Read/Update/Delete) operations.  For SharePoint purposes we will be using REST with Javascript/jQuery
  • 17.
    Why use RESTwith Sharepoint?  Simple to use  In comparison to caml  Language agnostic  Can be used in JavaScript, C#, pearl, PHP, Ruby…  Fast!  Lightweight  Can be used anonymously  Works seamlessly between O365 and on premise
  • 18.
  • 19.
    Questions  Everything iseasy when you know how…  How many people have used REST?  How many articles or videos have you found that show you how to implement a REST pull for SharePoint from start to end?  If this material is thin on the ground, yet its so easy… why is their a knowledge gap?
  • 20.
    Link to jQuery Not necessary required for REST  Used for the AJAX query portion  Use CDN: https://code.jquery.com/jquery-1.12.2.min.js  Or download and place in library for local use
  • 21.
    Require Use remoteInterface  Auth provider settings  Site Level
  • 22.
    Demo 1 –The Basics
  • 23.
    Code Base  ScriptsWeb Part:  Content Web Part:
  • 24.
  • 25.
    Demo 2 –From file
  • 26.
  • 27.
  • 28.
    Process  Select yourHTML 5 Template  Upload to document library  If friendly URLs required then upload to pages  Rename pages to ASPX using SP Designer 2013  Set home page  Use section replacer to maintain tags (optional)
  • 29.
    Demo 4 –Add REST to the template
  • 30.
    Process  Create yourcontent lists (News, Blogs etc.)  Link to your JS files  Build your REST queries
  • 31.
    Demo 5 –The template showcase
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.