European Sharepoint 2013 Hosting Blog
Articles about European Sharepoint Hosting Service
Uplo SharePoint 2013 Hosting – HostForLIFE.eu :: Upload Large File As Chunks In SharePoint Online Using Angular
Mar 20th
This article will help you upload the large files in the SharePoint online library into smaller chunks. This article is based on the article, Programmatically Uploading Large Files In SharePoint Online, with some enhancement.
It will walk through step-by-step how to upload the file in SharePoint Online.
Step 1
Create a library in Sharepoint online, eg. Name it Test_ABC.
Step 2
Install Node.js from here
Step 3
Create an Angular project(LargeFileUpload) using AngularCLI
Step 4
Create a proxy setting for Angular with Sharepoint online using my blog Proxy With Angular 6+ And SharePoint Environment.
Step 5
Create a FileUpload Component using the below Command
|
1 |
ng g c FileUpload |
Step 6
Create a FileUpload and GlobalServices services using the following commandL
Once the template for file upload is created, then update the file-upload.component.html
- File Upload: <input placeholder=“Upload File” type=“file” (change)=“largeFileUpload($event)”>
Then file-upload.component.ts as:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
import { Component, OnInit } from '@angular/core'; import { FileUploadService } from '../services/file-upload.service'; @Component({ selector: 'app-file-upload', templateUrl: './file-upload.component.html', styleUrls: ['./file-upload.component.css'] }) export class FileUploadComponent implements OnInit { constructor( private fileUploadService: FileUploadService ) { } ngOnInit() { } largeFileUpload(event: any) { let fileList: FileList = event.target.files; if (fileList.length != 0) { this.fileUploadService.fileUpload(fileList[0], "Test_ABC", fileList[0].name).then(addFileToFolder => { console.log("Large File Uploaded Successfully"); }).catch(error => { console.log("Error while uploading" + error); }); } } } |
file-upload.services.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
import { Injectable } from '@angular/core'; import { GlobalServiceService } from './global-service.service'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; declare const $: any; @Injectable({ providedIn: 'root' }) export class FileUploadService { constructor( private globalService: GlobalServiceService, private httpClient: HttpClient ) { } public siteUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl; public siteRelativeUrl: string = this.globalService.sharePointPageObject.webAbsoluteUrl != "/" ? this.globalService.sharePointPageObject.webAbsoluteUrl : ""; public fileUpload(file: any, documentLibrary: string, fileName: string) { return new Promise((resolve, reject) => { this.createDummyFile(fileName, documentLibrary).then(result => { let fr = new FileReader(); let offset = 0; // the total file size in bytes... let total = file.size; // 1MB Chunks as represented in bytes (if the file is less than a MB, seperate it into two chunks of 80% and 20% the size)... let length = 1000000 > total ? Math.round(total * 0.8) : 1000000 let chunks = []; //reads in the file using the fileReader HTML5 API (as an ArrayBuffer) - readAsBinaryString is not available in IE! fr.readAsArrayBuffer(file); fr.onload = (evt: any) => { while (offset < total) { //if we are dealing with the final chunk, we need to know... if (offset + length > total) { length = total - offset; } //work out the chunks that need to be processed and the associated REST method (start, continue or finish) chunks.push({ offset, length, method: this.getUploadMethod(offset, length, total) }); offset += length; } //each chunk is worth a percentage of the total size of the file... const chunkPercentage = (total / chunks.length) / total * 100; console.log("Chunk Percentage: "+chunkPercentage); if (chunks.length > 0) { //the unique guid identifier to be used throughout the upload session const id = this.generateGUID(); //Start the upload - send the data to S this.uploadFile(evt.target.result, id, documentLibrary, fileName, chunks, 0, 0, chunkPercentage, resolve, reject); } }; }) }); } createDummyFile(fileName, libraryName) { return new Promise((resolve, reject) => { // Construct the endpoint - The GetList method is available for SharePoint Online only. var serverRelativeUrlToFolder = "decodedurl='" + this.siteRelativeUrl + "/" + libraryName + "'"; var endpoint = this.siteUrl + "/_api/Web/GetFolderByServerRelativePath(" + serverRelativeUrlToFolder + ")/files" + "/add(overwrite=true, url='" + fileName + "')" const headers = { "accept": "application/json;odata=verbose" }; this.executePost(endpoint, this.convertDataBinaryString(2), headers).then(file => resolve(true)).catch(err => reject(err)); }); } // Base64 - this method converts the blob arrayBuffer into a binary string to send in the REST request convertDataBinaryString(data) { let fileData = ''; let byteArray = new Uint8Array(data); for (var i = 0; i < byteArray.byteLength; i++) { fileData += String.fromCharCode(byteArray[i]); } return fileData; } //this method sets up the REST request and then sends the chunk of file along with the unique indentifier (uploadId) uploadFileChunk(id, libraryPath, fileName, chunk, data, byteOffset) { return new Promise((resolve, reject) => { let offset = chunk.offset === 0 ? '' : ',fileOffset=' + chunk.offset; //parameterising the components of this endpoint avoids the max url length problem in SP (Querystring parameters are not included in this length) let endpoint = this.siteUrl + "/_api/web/getfilebyserverrelativeurl('" + this.siteRelativeUrl + "/" + libraryPath + "/" + fileName + "')/" + chunk.method + "(uploadId=guid'" + id + "'" + offset + ")"; const headers = { "Accept": "application/json; odata=verbose", "Content-Type": "application/octet-stream" }; this.executePost(endpoint, data, headers).then(offset => resolve(offset)).catch(err => reject(err)); }); } //the primary method that resursively calls to get the chunks and upload them to the library (to make the complete file) uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject) { //we slice the file blob into the chunk we need to send in this request (byteOffset tells us the start position) const data = this.convertFileToBlobChunks(result, chunks[index]); //upload the chunk to the server using REST, using the unique upload guid as the identifier this.uploadFileChunk(id, libraryPath, fileName, chunks[index], data, byteOffset).then(value => { const isFinished = index === chunks.length - 1; index += 1; const percentageComplete = isFinished ? 100 : Math.round((index * chunkPercentage)); console.log("Percentage Completed:" +percentageComplete) //More chunks to process before the file is finished, continue if (index < chunks.length) { this.uploadFile(result, id, libraryPath, fileName, chunks, index, byteOffset, chunkPercentage, resolve, reject); } else { resolve(value); } }).catch(err => { console.log('Error in uploadFileChunk! ' + err); reject(err); }); } //Helper method - depending on what chunk of data we are dealing with, we need to use the correct REST method... getUploadMethod(offset, length, total) { if (offset + length + 1 > total) { return 'finishupload'; } else if (offset === 0) { return 'startupload'; } else if (offset < total) { return 'continueupload'; } return null; } //this method slices the blob array buffer to the appropriate chunk and then calls off to get the BinaryString of that chunk convertFileToBlobChunks(result, chunkInfo) { return result.slice(chunkInfo.offset, chunkInfo.offset + chunkInfo.length); } generateGUID() { function s4() { return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1); } return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4(); } async executePost(url, data, requestHeaders) { const res = await this.httpClient.post(url, data, requestHeaders).toPromise().catch((err: HttpErrorResponse) => { const error = err.error; return error; }); return this.parseRetSingle(res); } parseRetSingle(res) { if (res) { if (res.hasOwnProperty('d')) { return res.d; } else if (res.hasOwnProperty('error')) { const obj: any = res.error; obj.hasError = true; return obj; } else { return { hasError: true, comments: res }; } } else { return { hasError: true, comments: 'Check the response in network trace' }; } } } |
Finally, run the code using the command:
|
1 |
npm run start |
Now, your requests will be served at http://localhost:4200/.
SharePoint 2013 Hosting – HostForLIFE.eu :: Read Large Lists in SharePoint Framework
Mar 6th
Reading large lists always has been a challenge for SharePoint developers. This is one of those instances where the on-premises environment is appreciated by SharePoint developers, as SharePoint administrators can come to their rescue by adjusting the query threshold limit in Central Administration. The other commonly used approaches from the developer are to limit the items in view, index the columns, etc. This workaround reduces the pain to a certain extent but not fully. Unfortunately, we do not have much administration liberty in SharePoint Online to play around with threshold limits. In this article, we will revise the threshold concept and various approaches to read the large lists programmatically in SharePoint Framework.
Threshold
Let’s quickly revise the term Threshold. To build information architecture for SharePoint, it is important to understand the SharePoint online limitations and boundaries. Which says, the list items limit is 30 Million. That’s very very huge.
Every time you access a list or document library, a search query happens behind the scenes that return all the results. For example, if you have 50,000 items in a list, when you try to show them in a single view or programmatically retrieve those in a single query, you won’t be able to get more than 5,000 items. We can say the list/library is facing the 5,000 item limit threshold. The threshold limit with SharePoint Online is still 5,000.
Do not confuse the threshold of 5,000 items with the list capacity which is 30 Million.
Get around with Threshold
PnP JS is the popular library amongst SPFx developers for SharePoint operations. It provides some cool methods to get around the threshold issues.
Example# 1: Basic usage
Example# 2: Set page size
Example# 3: Use select and top. top will set page size and override the any value passed to getAll
|
1 2 3 4 |
pnp.sp.web.lists.getByTitle("BigList").items.select("Title").top(4000).getAll().then((allItems: any[]) => { // how many did we get console.log(allItems.length); }); |
Example# 4: Use filter as a supported odata operation
But, this will likely fail on large lists.
Custom Implementation
Here is another approach to get read the large list with paging implementation.
Consider we have a SharePoint list named “LargeList” with below schema:
| Field Name | Type |
| Title | Single line of text |
| Description | Multiple lines of text |
| Category | Single line of text |
| Quantity | Number |
The model to represent above list will be as below:
|
1 2 3 4 5 6 |
export interface ILargeListItem { Title: string; Description: string; Category: string; Quantity: number; } |
Let us define our approach to handle large list:
- We will define the page size as 5000 for example (maximum threshold limit). Please note, SharePoint internally fetches the items in the batch of 100 items.
- The number of requests we will have to read entire large list will be: Number of list items / page size.
- We will make asynchronous requests to read the list items in batch.
- Wait for all asynchronous requests to finish
Implement a genetic method getPageListItems which returns items with paging, starting with index passed as an argument.
|
1 |
skiptoken=Paged=TRUE%26p_ID=` + (index * Constants.Page_Size + 1) |
The getPageListItems method implementation will look as follows:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
private getPageListItems(listTitle: string, index: number): Promise<ILargeListItem[]> { return new Promise<ILargeListItem[]>((resolve, reject): void => { let requestUrl = this.context.pageContext.web.absoluteUrl + `/_api/web/Lists/GetByTitle('` + listTitle + `')/items` + `?$skiptoken=Paged=TRUE%26p_ID=` + (index * Constants.Page_Size + 1) + `&$top=` + Constants.Page_Size + `&$select=ID,Title,Description,Category,Quantity`; this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1) .then((response: SPHttpClientResponse) => { response.json().then((responseJSON: any) => { resolve(responseJSON.value); }); }); }); } |
Implement a method to get the latest item id. This will be our maximum limit to read the items.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
public getLatestItemId(listTitle: string): Promise<number> { return new Promise<number>((resolve: (itemId: number) => void, reject: (error: any) => void): void => { sp.web.lists.getByTitle(listTitle) .items.orderBy('Id', false).top(1).select('Id').get() .then((items: { Id: number }[]): void => { if (items.length === 0) { resolve(-1); } else { resolve(items[0].Id); } }, (error: any): void => { reject(error); }); }); } |
The next step is to implement method the main method to make asynchronous requests to read the list items in batch.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
public async getLargeListItems(listTitle: string): Promise<ILargeListItem[]> { var largeListItems: ILargeListItem[] = []; return new Promise<ILargeListItem[]>(async (resolve, reject) => { // Array to hold async calls const asyncFunctions = []; this.getLatestItemId(listTitle).then(async (itemCount: number) => { for (let i = 0; i < Math.ceil(itemCount / Constants.Page_Size); i++) { // Make multiple async calls let resolvePagedListItems = () => { return new Promise(async (resolve) => { let pagedItems:ILargeListItem[] = await this.getPageListItems(listTitle, i); resolve(pagedItems); }) }; asyncFunctions.push(resolvePagedListItems()); } // Wait for all async calls to finish const results: any = await Promise.all(asyncFunctions); for (let i = 0; i < results.length; i++) { largeListItems = largeListItems.concat(results[i]); } resolve(largeListItems); }); }); } |
Summary
Reading large lists always has been a challenge for SharePoint developers. There are various approaches to read the large lists programmatically in SharePoint Framework. We explored the options to read large lists with PnP JS as well a custom implementation with paging approach.
SharePoint 2013 Hosting – HostForLIFE.eu :: How To Get Current Context From SharePoint Modern Site Page?
Feb 27th
Today we will see how to get the current context information from Modern Pages. In Classical Pages and anything other than modern site pages, we can get the current web and user context information using the _spPageContextInfo variable.
But when we try to access the same variable in modern site pages, we will get an undefined error. If we change the page to view source mode, we will see this _spPageContextInfo JavaScript variable is commented. Due to that we won’t access the current context information.
There is a workaround available and that too has come from SharePoint. We must use the full Modern Page URL to send the request along with “as=json” as a query string.
Format of the Request URL,
- http://domaoin.sharepoint.com/sites/name/sitepages/modernpage.aspx
- http://domaoin.sharepoint.com/sites/name – If the modern page is the home page of the site
To test this, navigate to the modern site page. Then open the browser console and paste the below code snippet,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
//Reference URL https://gist.github.com/ktskumar/ab378261b9f7d349254043dc935c08d9#file-getmodernpagecontext-js //getRequest method reference - https://gist.github.com/ktskumar/a9e9df497673e9fd26ead8532b9ff425 function getRequest(url) { var request = new XMLHttpRequest(); return new Promise(function(resolve, reject) { request.onreadystatechange = function() { if (request.readyState !== 4) return; if (request.status >= 200 && request.status < 300) { resolve(request); } else { reject({ status: request.status, statusText: request.statusText }); } }; request.open('GET', url, true); request.setRequestHeader("Content-Type", "application/json;charset=utf-8"); request.setRequestHeader("ACCEPT", "application/json; odata.metadata=minimal"); request.setRequestHeader("ODATA-VERSION", "4.0"); request.send(); }); } //Get the Request location from the browser URL var path = location.href.replace(location.search, "") + "?as=json"; //Returns the current user, item, page and context information getRequest(path).then(function(response) { console.log(JSON.parse(response.response)); }); |
And it returns the context information of current user, current page properties, current item properties and current web properties.
SharePoint 2013 Hosting – HostForLIFE.eu :: React Toast Notifications In SPFX
Feb 20th
The react-toast-notifications is a plugin written in React.js to generate toast notifications in React doms. Since this plugin is written in a React hooks concept, we are not able to use this in class component. Rather, we can use this in functional component.
Open a command prompt. Create a directory for the SPFx solution.|
1 |
md spfx-ToastNotication |
Navigate to the above-created directory.
|
1 |
cd spfx-ToastNotication |
Run the Yeoman SharePoint Generator to create the solution.
|
1 |
yo @microsoft/sharepoint |
Solution Name
Hit Enter to have the default name (spfx-ToastNotication in this case) or type in any other name for your solution.
Selected choice – Hit Enter
Target for the component
Here, we can select the target environment where we are planning to deploy the client web part; i.e., SharePoint Online or SharePoint OnPremise (SharePoint 2016 onwards).
Selected choice – SharePoint Online only (latest).
Place of files
We may choose to use the same folder or create a subfolder for our solution.
Selected choice – same folder.
Deployment option
Selecting Y will allow the app to be deployed instantly to all sites and be accessible everywhere.
Selected choice – N (install on each site explicitly).
Permissions to access web APIs
Choose if the components in the solution require permission to access web APIs that are unique and not shared with other components in the tenant.
Selected choice – N (solution contains unique permissions)
Type of client-side component to create
We can choose to create a client-side web part or an extension. Choose the web part option.
Selected choice – WebPart
Web part name
Hit Enter to select the default name or type in any other name.
Selected choice – SpfxToast
Web part description
Hit Enter to select the default description or type in any other value.
Framework to use
Select any JavaScript framework to develop the component. Available choices are – No JavaScript Framework, React, and Knockout.
Selected choice – React
The Yeoman generator will perform a scaffolding process to generate the solution. The scaffolding process will take a significant amount of time.
Once the scaffolding process is completed, lock down the version of project dependencies by running the below command,
|
1 |
npm shrinkwrap |
In the command prompt, type the below command to open the solution in the code editor of your choice.
NPM Packages Used,
On the command prompt, run the below commands
|
1 |
npm i react-toast-notifications |
Necessary imports for Toast Notification plugin,
|
1 |
import { ToastProvider, useToasts } from 'react-toast-notifications' ; |
Wrap your ToastComponent in the ToastProvider, which provides context for the Toast descendants.
e.g)
To intialize the toast notification,
|
1 2 3 4 5 |
const { addToast } = useToasts(); addToast(mycontent, { appearance: 'success', autoDismiss: false, } |
Available apearance paramters are success, error, warning and info in default autodismiss is false.
You can set autodismiss by providing milliseconds.
|
1 2 3 4 |
<ToastProvider autoDismiss autoDismissTimeout={6000} placement="bottom-center"> |
Available placements are ‘bottom-left’ | ‘bottom-center’ | ‘bottom-right’ | ‘top-left’ | ‘top-center’ | ‘top-right’
The useToasts hook contains following signatures,
|
1 |
const { addToast, removeToast, removeAllToasts, updateToast, toastStack } = useToasts(); |
in SpfxToast.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import * as React from 'react'; import { ISpfxToastProps } from './ISpfxToastProps'; import { MyReactToast }from './Reacttoast'; export default class SpfxToast extends React.Component<ISpfxToastProps, {}> { public render(): React.ReactElement<ISpfxToastProps> { return ( <div> <MyReactToast mycontent={"Hello it's Peter"}/> </div> ); } } |
in Reacttoast.tsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
import * as React from 'react'; import { ToastProvider,useToasts } from 'react-toast-notifications'; const ToastDemo = ({mycontent}) =>{ const { addToast } = useToasts(); return ( <> <button onClick={() => addToast(mycontent, { appearance: 'success', autoDismiss: false, PlacementType :'bottom-left', })}> success Toast </button> <button onClick={() => addToast(mycontent, { appearance: 'error', autoDismiss: false, })}> error Toast </button> <button onClick={() => addToast(mycontent, { appearance: 'warning', autoDismiss: false, })}> warning Toast </button> <button onClick={() => addToast(mycontent, { appearance: 'info', autoDismiss: false, })}> Info Toast </button></> ); }; export const MyReactToast = ({mycontent}) => ( <ToastProvider> <ToastDemo mycontent={mycontent} /> </ToastProvider> ); |
SharePoint 2013 Hosting – HostForLIFE.eu :: How to Retrieve Lists from SharePoint using Webservice?
Feb 13th
Today, I will tell you about how to Retrieve Lists from SharePoint using Webservice. This following code will give you all the list from SharePoint with the details of particular list. You can change BaseType to get different types of list from SharePoint.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 |
using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Xml; using System.Xml.Linq; using System.Windows.Forms; using System.Resources; using System.Web; //To add below namespace you should add below reference library. //1.)Microsoft.SharePoint.Client.dll //2.)Microsoft.SharePoint.Client.Runtime.dll using Microsoft.SharePoint; //add this namespace to access SharePoint Web Service. using Microsoft.SharePoint.Client; //add this namespace to access SharePoint Web Service. using Microsoft.SharePoint.Utilities; //add this namespace to access SharePoint Web Service. namespace WindowsFormsApplication1 { public partial class COM : System.Windows.Forms.Form { string url = string.Empty; string listName = string.Empty; string listGUid = string.Empty; string rowLimit = ""; System.Net.NetworkCredential creadential = new System.Net.NetworkCredential("username", "password", "domain"); public COM() { InitializeComponent(); } private void btngetlist_Click(object sender, EventArgs e) { string listname = string.Empty; if (txturl.Text == string.Empty) { MessageBox.Show("Please Insert Valid Site URL!", "URL Needed!", MessageBoxButtons.OK, MessageBoxIcon.Information); } else { url = txturl.Text; List<string> lst = getlist(url); } } public List<string> getlist(string url) { string listname = string.Empty; ListWebService.Lists lst = new ListWebService.Lists(); List<string> listnames = new List<string>(); lst.Url = url + "/_vti_bin/Lists.asmx"; lst.Credentials = creadential; try { XmlNode xnode = lst.GetListCollection(); XmlNodeList node = xnode.SelectNodes("*[@BaseType=1]"); //change BaseType to retrieve Different list. foreach (XmlNode list in node) { //if(Convert.ToInt32(list.Attributes["BaseType"]) == 0) listname = list.Attributes["Title"].Value.ToString(); combolist.Items.Add(listname); } } catch (Exception ex) { MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error); } return listnames; } public void combolist_SelectedIndexChanged(object sender, EventArgs e) { ListWebService.Lists lst = new ListWebService.Lists(); url = txturl.Text; lst.Credentials = creadential; try { listName = combolist.SelectedItem.ToString(); XmlNode xnode = lst.GetListCollection(); XmlNode list = lst.GetList(listName); XmlNodeList visibleColumns= list.SelectNodes("Fields/Field[not(@Hidden) or @Hidden='FALSE']"); System.Xml.XmlNode nodlistview = lst.GetListAndView(listName, string.Empty); XmlDocument xmldoc = new XmlDocument(); xmldoc.LoadXml(nodlistview.OuterXml); XmlNodeList xmllist = xmldoc.GetElementsByTagName("ViewFields"); xmldoc = new System.Xml.XmlDocument(); System.Xml.XmlElement query = xmldoc.CreateElement("Query"); System.Xml.XmlElement viewfield = xmldoc.CreateElement("ViewFields"); xnode = xmllist.Item(0); string queryinnerxml = string.Empty; for (int i = 0; i < xnode.ChildNodes.Count; i++) { if (xnode.ChildNodes[i].Attributes["Name"].Value != "Edit") { queryinnerxml = queryinnerxml + "<FieldRef Name=\"" + xnode.ChildNodes[i].Attributes["Name"].Value + "\" />"; } } viewfield.InnerXml = queryinnerxml.Trim(); System.Xml.XmlElement queryoption = xmldoc.CreateElement("QueryOptions"); queryoption.InnerXml = "<IncludeMandatoryColumns>TRUE</IncludeMandatoryColumns>"; System.Xml.XmlNode nodelistitem = lst.GetListItems(listName, string.Empty, query, viewfield, rowLimit, queryoption, null); System.IO.StringReader xmlsr = new System.IO.StringReader(nodelistitem.InnerXml); DataSet ds = new DataSet(); ds.ReadXml(xmlsr); listgrid.DataSource = ds.Tables[1]; } catch (Exception ex) { MessageBox.Show(ex.Message, "Error", MessageBoxButtons.OK, MessageBoxIcon.Error); } } } } |
SharePoint 2013 Hosting Recommendation
HostForLIFE.eu’s SharePoint 2013 Hosting solution offers a comprehensive feature set that is easy-to-use for new users, yet powerful enough for the most demanding web developer expert. Hosted SharePoint Foundation 2013 is the premiere web-based collaboration and productivity enhancement tool on the market today. With SharePoint 2013 Foundation, you can quickly access and manage documents and information anytime, anywhere though a Web browser in a secure and user friendly way. SharePoint hosting services start at only at €9.99/mo, allowing you to take advantage of the robust feature set for a small business price. HostForLIFE.eu offers a variety of hosted SharePoint Foundation 2013 plans as well as dedicated SharePoint 2013 Foundation options.
SharePoint 2013 Hosting UK – HostForLIFE.eu :: Useful CSOM Snippets
Feb 6th
In this article, we will learn about some important Csom codes used for SharePoint operations
Nuget Package Required:
|
1 |
SharePointPnPCoreOnline |
Required imports are:
Authenticating with Sharepoint:
|
1 2 3 4 5 |
string siteUrl = "Your Site Collection Url"; string userName = "UserName of Account"; string password = "Password"; OfficeDevPnP.Core.AuthenticationManager authManager = new OfficeDevPnP.Core.AuthenticationManager(); using (var clientContext= authManager.GetSharePointOnlineAuthenticatedContextTenant(siteUrl, userName, password)) |
The above code creates authentication with Sharepoint with a valid username and password. It returns a clientcontext object. With the clientcontext object, we will do our required operations in Sharepoint.
Getting Listitems from sharepoint
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
string listName = "mynewlist"; List list = clientContext.Web.Lists.GetByTitle(listName); clientContext.Load(List); if (list != null) { CamlQuery query = CamlQuery.CreateAllItemsQuery(100); ListItemCollection items = list.GetItems(query); clientContext.Load(items); clientContext.ExecuteQuery(); foreach (ListItem listItem in items) { Console.WriteLine(listItem.FieldValues["ID"]); } } else { Console.WriteLine("List is not available on the site"); } |
The above code returns items from the sharepoint list, depending upon the caml query provided.
Creating new items in the SharePoint list
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
string listName = "mynewlist"; List list = clientContext.Web.Lists.GetByTitle(listName); clientContext.Load(List); if (list != null) { ListItemCreationInformation newItem = new ListItemCreationInformation(); ListItem listItem = list.AddItem(newItem); listItem["Title"] = "Madhan"; listItem.Update(); clientContext.ExecuteQuery(); } else { Console.WriteLine("List is not available on the site"); } |
The above code will insert a new item in the SharePoint list (i.e. create a new id and Title value as Madhan)
Updating Listitem in sharepoint
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
string listName = "mynewlist"; List list = clientContext.Web.Lists.GetByTitle(listName); clientContext.Load(List); if (list != null) { ListItem oListItem = list.GetItemById(5); clientContext.Load(oListItem); clientContext.ExecuteQuery(); // clientContext.ExecuteQuery(); if (oListItem.FieldValues.Count >0) { oListItem["Title"] = "My Updated Title."; oListItem.Update(); clientContext.ExecuteQueryRetry(); } } else { Console.WriteLine("List is not available on the site"); } |
Basically updating and deleting are processed based on ID, the above code will update the value of Title field to “My Updated Title” for Id “5” in the SharePoint list mynewlist
Deleting a ListItem in Sharepoint
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
string listName = "mynewlist"; List list = clientContext.Web.Lists.GetByTitle(listName); clientContext.Load(List); ListItem oListItem = list.GetItemById(5); clientContext.Load(oListItem); clientContext.ExecuteQuery(); if (oListItem.FieldValues.Count > 0) { oListItem.DeleteObject(); clientContext.ExecuteQuery(); } } else { Console.WriteLine("List is not available on the site"); } |
As I said earlier, deleting an item is based on ID. The above code will delete the listitem corresponding to the ID “5”
Creating a New List
|
1 |
clientContext.Web.CreateList(ListTemplateType.DocumentLibrary, "WithPnpDOC",false); |
The above code will create a new document library in the Sharepoint site. We want to provide a valid listtemplatetype for creating various lists. The types are:
| GenericList | 100 | 0 | A basic list which can be adapted for multiple purposes. |
| DocumentLibrary | 101 | 1 | Contains a list of documents and other files. |
| Survey | 102 | 4 | Fields on a survey list represent questions that are asked of survey participants. Items in a list represent a set of responses to a particular survey. |
| Links | 103 | 0 | Contains a list of hyperlinks and their descriptions. |
| Announcements | 104 | 0 | Contains a set of simple announcements. |
| Contacts | 105 | 0 | Contains a list of contacts used for tracking people in a site. |
| Events | 106 | 0 | Contains a list of single and recurring events. An events list typically has special views for displaying events on a calendar. |
| Tasks | 107 | 0 | Contains a list of items that represent completed and pending work items. |
| DiscussionBoard | 108 | 0 | Contains discussions topics and their replies. |
| PictureLibrary | 109 | 1 | Contains a library adapted for storing and viewing digital pictures. |
| DataSources | 110 | 1 | Contains data connection description files. |
| XmlForm | 115 | 1 | Contains XML documents. An XML form library can also contain templates for displaying and editing XML files via forms, as well as rules for specifying how XML data is converted to and from list items. |
| NoCodeWorkflows | 117 | 1 | Contains additional workflow definitions that describe new processes that can be used within lists. These workflow definitions do not contain advanced code-based extensions. |
| WorkflowProcess | 118 | 0 | Contains a list used to support execution of custom workflow process actions. |
| WebPageLibrary | 119 | 1 | Contains a set of editable Web pages. |
| CustomGrid | 120 | 0 | Contains a set of list items with a grid-editing view. |
| WorkflowHistory | 140 | 0 | Contains a set of history items for instances of workflows. |
| GanttTasks | 150 | 0 | Contains a list of tasks with specialized Gantt views of task data. |
| IssuesTracking | 1100 | 5 | Contains a list of items used to track issues. |
Checking if the folder exists. If not, then creating a new folder:
As the heading describes, it checks the library with the foldername “WithPnpDOC1”. If it does not exist, it will create a new folder.
Creating a new Folder without checking existing
Simply creates the new folder in the Sharepoint document library
Creating Contenttype
|
1 |
clientContext.Web.CreateContentType("Contenttype name", "description", "Guid ", "Group"); |
The above code will create new contenttype in Sharepoint where the name and guid are unique. In the Guid, starting characters represents the parent content type. The available types are:
- System 0x
- Item 0x01
- Document 0x0101
- Event 0x0102
- Issue 0x0103
- Announcement 0x0104
- Link 0x0105
- Contact 0x0106
- Message 0x0107
- Task 0x0108
- Workflow History 0x0109
- Post 0x0110
- Comment 0x0111
- Folder x0120
e.g.
- clientContext.Web.CreateContentType(“PNP doc3”, “My Desc”, “0x010100C2D5F149518B119D801AC6C18942554A”, “PNP grp CT”);
Adding fields to Content Type
|
1 2 3 4 5 6 7 8 |
string fieldIdStr = "5b0a8635-49a5-469f-8d42-1b92e8d4e17b"; string contentTypeName = "PNP Ct"; bool isRequired = false; bool isHidden = false; // Field As Guid Guid fieldId = new Guid(fieldIdStr); // Adds Field to Content Type using Name clientContext.Web.AddFieldToContentTypeByName(contentTypeName, fieldId, isRequired, isHidden); |
The above code will add sitecolumns field to content type PNP ct where guid is the valid site column guid.
Setting default Content type to list
|
1 |
clientContext.Web.SetDefaultContentTypeToList("mynewlist", "0x0100A33D9AD9805788419BDAAC2CCB37509F"); |
The above code will sets the default contenttype to the list ,where the first parameter is listname, the next one is contenttype Guid
Creating Fields and SiteColumn
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
string displayName = "TestColumn2"; string internalName = "TestColumn2"; string groupName = "TestPnPGroup"; string fieldId = "4FDD339E-6B98-4A11-B1AC-9C6B8C37AE2E"; FieldType fieldType = FieldType.DateTime; OfficeDevPnP.Core.Entities.FieldCreationInformation newFieldInfo = new OfficeDevPnP.Core.Entities.FieldCreationInformation(fieldType) { DisplayName = displayName, InternalName = internalName, Id = new Guid(fieldId), Group = groupName }; // Creates new Field Field newField = mycleint.Web.CreateField(newFieldInfo); |
The above code creates a new datetime site column in your Sharepoint site with the name TestColumn2
|
1 2 3 4 5 6 7 8 9 10 11 |
string listName = "mynewlist"; List list = clientContext.Web.Lists.GetByTitle(listName); clientContext.Load(List); OfficeDevPnP.Core.Entities.FieldCreationInformation fldEmpID = new OfficeDevPnP.Core.Entities.FieldCreationInformation(FieldType.Number); fldEmpID.DisplayName = "Employee IDd"; fldEmpID.InternalName = "EmpIDd"; fldEmpID.AddToDefaultView = true; fldEmpID.Id = Guid.NewGuid(); list.CreateField(fldEmpID); list.Update(); mycleint.ExecuteQueryRetry(); |
The above code creates new number field with name Employee IDd in the list “mynewlist” the available types are:
- Invalid = 0,
- Integer = 1,
- Text = 2,
- Note = 3,
- DateTime = 4,
- Counter = 5,
- Choice = 6,
- Lookup = 7,
- Boolean = 8,
- Number = 9,
- Currency = 10,
- URL = 11,
- Computed = 12,
- Threading = 13,
- Guid = 14,
- MultiChoice = 15,
- GridChoice = 16,
- Calculated = 17,
- File = 18,
- Attachments = 19,
- User = 20,
- Recurrence = 21,
- CrossProjectLink = 22,
- ModStat = 23,
- Error = 24,
- ContentTypeId = 25,
- PageSeparator = 26,
- ThreadIndex = 27,
- WorkflowStatus = 28,
- AllDayEvent = 29,
- WorkflowEventType = 30,
- Geolocation = 31,
- OutcomeChoice = 32,
- Location = 33,
- Thumbnail = 34,
- MaxItems = 35
Conclusion
We have learned some crucial operations in SharePoint using PnpCore CSOM. Hope this helps somone. Happy Coding! 🙂
