SPFx Webinar Loading SharePoint data in a SPFx Webpart
Download as PPTX, PDF0 likes153 views
This document summarizes a webinar on getting started with the SharePoint Framework (SPFx). The webinar covered an introduction to SPFx, an overview of key concepts like page context and SharePoint REST APIs, and demonstrations of building web parts without and with React. The presenter discussed how to load SharePoint data using the page context, HttpClient, and REST. References and resources for learning more about SPFx were also provided.
SPFx Webinar Loading SharePoint data in a SPFx Webpart
- 1. Webinar Series: Getting Started with SharePoint Framework Getting Started with SharePoint Framework Webinar Series
- 2. Webinar Series: Getting Started with SharePoint Framework Loading SharePoint Data in a SPFx web part
- 3. Webinar Series: Getting Started with SharePoint Framework Jenkins NS Modern Workplace Solution Architect | Consultant Founder & Director @ Microsoft Teams, Power Platform and SPFx Specialist International Speaker | Blogger | Trainer SPS Bangalore Organizer aOS Ambassador @jenkinsns https://www.facebook.com/msteamsinfo in/jenkinsns [email protected] http://www.jenkinsblogs.com jenkinsns https://www.facebook.com/spfxinfo/
- 4. Webinar Series: Getting Started with SharePoint Framework Agenda Page Context Web Services Overview SharePoint REST API’s Using HttpClient Loading SharePoint data Demo - Using No JavaScript Framework - Using React
- 5. Webinar Series: Getting Started with SharePoint Framework Page Context • The page context provides standard definitions for common SharePoint objects that need to be shared between the client-side application, web parts, and other components. Typically the data is fetched via REST queries when navigating to a new page, but it can also be preloaded by the web server or filled from a custom application cache. Provides access to information about current context Greatly extended version of _spPageContextinfo Property Description aadInfo If the current page doesn't have an associated Azure Active Directory tenant, this property will be undefined cultureInfo It provides culture info for the current user of the application isInitialized Returns whether the PageContext has been initialized list Contextual information for the SharePoint list that is hosting the page. If there is no list associated to the current page, this property will be undefined listItem Contextual information for the SharePoint list item that is hosting the page. If there is no list item associated to the current page, this property will be undefined site Contextual information for the SharePoint site collection ("SPSite") that is hosting the page. user It provides contextual information for the SharePoint user that is accessing the page. This class is primarily used with the PageContext class. web Contextual information for the SharePoint site ("SPWeb") that is hosting the page.
- 6. Webinar Series: Getting Started with SharePoint Framework Page Context … Examples import { SPPermission } from '@microsoft/sp-page-context’; this.context.pageContext.web.absoluteUrl this.context.pageContext.web.permissions.hasAllPermissions(SPPermission.fullMask); hasAllPermissions : Checks if the user has all the permissions this.context.pageContext.web.permissions.hasAnyPermissions(SPPermission.manageWeb); hasAnyPermissions: Checks if the user has any permission from the collection of permissions this.context.pageContext.web.permissions.hasPermission(SPPermission.viewPages); has Permission: Checks if the user has given permission
- 7. Webinar Series: Getting Started with SharePoint Framework Web Services Overview Scenario: Customer is having existing web service which is developed into ASP.NET. Currently, we need to develop SPFx web part for SharePoint application. We want to fetch some information using this web service and need to populate into this webpart. How is authentication handled in the ASP.NET web service? Answer: By using the AadHttpClient, you can easily connect to APIs secured by using Azure AD without having to implement the OAuth flow yourself Developers building client-side solutions are responsible for implementing authorization by using the OAuth implicit flow in their application. In SharePoint Framework solutions, that's already done as part of the framework through MSGraphClient and AadHttpClient, both of which are introduced in SharePoint Framework v1.4.1. Note : If you build solutions on a version of the SharePoint Framework earlier than v1.4.1, you can still connect to resources secured with Azure AD. In this case, you need to implement the OAuth implicit flow by using ADAL JS.
- 8. Webinar Series: Getting Started with SharePoint Framework SharePoint REST API’s SharePoint includes a Representational State Transfer (REST) service that is comparable to the existing SharePoint client object models. Developers can interact remotely with SharePoint data by using any technology that supports REST web requests. This means that developers can perform Create, Read, Update, and Delete (CRUD) operations from their SharePoint Add-ins, solutions, and client applications, using REST web technologies and standard Open Data Protocol (OData) syntax. To access SharePoint resources using REST, construct a RESTful HTTP request by using the OData standard, which corresponds to the desired client object model API. https://{site_url}/_api/web https://{site_url}/_api/site Example https://jpower4dev.sharepoint.com/_api/web/lists/GetByTitle('Contactlist')/Items URL end Points – Some exaples Description web/title Retrieves the title of a list Lists Retrieves all lists on a site lists/getbytitle('listname') Retrieves a single list's metadata lists/getbytitle('listname')/items Retrieves items within a list lists/getbytitle('listname')?select=Title Retrieves a specific property of a document
- 9. Webinar Series: Getting Started with SharePoint Framework Using HttpClient HttpClient implements a basic set of features for performing REST operations against a generic service. import { HttpClient, IHttpClientOptions, HttpClientResponse } from '@microsoft/sp-http’ If you already used the HttpClient and SPHttpClient in your SharePoint Framework projects, you might have noticed that you have two types of request methods options: GET and POST. These two types of requests are the most used ones, but what if you want to use other HTTP methods like PUT, PATCH, DELETE? If you need to make calls with other HTTP methods, you can make use of the fetch which is available on both the HttpClient and SPHttpClient classes. The fetch method allows you to specify the HTTP method type per request yourself. Fetch is also used behind the scenes when you are using the GET and POST methods. 1. how you can make use of the fetch method and specifying the request method to perform: spHttpClient this.props.context.spHttpClient.fetch(restUrl, SPHttpClient.configurations.v1, { method: "PATCH", body: JSON.stringify({ "Something": "Some content to patch" }) }).then((response: SPHttpClientResponse) => { // Do your thing}); 2. with the HttpClient, but you will notice that is not that different to use: this.props.context.httpClient.fetch(restUrl, HttpClient.configurations.v1, { method: "DELETE"}) .then((response: HttpClientResponse) => { // Do your thing });zax
- 10. Webinar Series: Getting Started with SharePoint Framework Loading SharePoint data SharePoint Framework is the new development model and it is a page and Web part model which provides full support for client-side SharePoint development, easy integration with SharePoint data, and support for open-source tooling. Standard “features” of SPFx ToolchainAuthenticationSP GraphAPI and WebAPI Access CDN hosting Config experience Solution hosting Component is able to get the right application context Tenant-wide Deployment
- 11. Webinar Series: Getting Started with SharePoint Framework Demo https://github.com/jenkinsns/spfx-demo-webparts Download the code
- 12. Webinar Series: Getting Started with SharePoint Framework References… http://jenkinsblogs.com/2016/08/24/create-a-sharepoint-framework-client-webpart-retrive-list-items/ https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part https://www.youtube.com/channel/UC4JieFHDrN0elIYtZDktZSg https://www.youtube.com/channel/UC_mKdhw-V6CeCM7gTo_Iy7w
- 13. Webinar Series: Getting Started with SharePoint Framework Thank You
- 14. Webinar Series: Getting Started with SharePoint Framework Next up… SPFx with React Siddharth Vaghasia
Editor's Notes
- #8: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient