SharePoint Designer 2013 Workflows and GET REST API


SharePoint Workflows have been around for a long time, and with Microsoft flow now firmly taking hold the need for SharePoint workflows might be less. However, I recently had to work with SharePoint Workflows and learnt a few things around using REST API and I wanted to share my knowledge.

Reading a list/Item using REST API.

On my SharePoint site, I have a list. The list is nothing special, it’s just an example of some data.

Title: String
Person: User field
Colour: Choice field

All I’m going to do in the workflow, is when it is run, it will grab the items in the list, and then display the results in the history list. The point of this demo is to show how to make REST API calls and grab/loop through data.

Creating the workflow

In SharePoint Designer, I have gone to my list, and created a new workflow.

  • First, we need to add a Dictionary Item. This is so we can create a header for our HTTP Call. Type in “Dictionary
    and then in the options to choose from select Build Dictionary.

    Click on “this”.

    A dialog will appear, and it is here we need to add two headers.
Name Type Value
accept String application/json;odata=verbose
content-type String application/json;odata=verbose

Click on Variable:dictionary, and create a new variable called Headers.

Because SPD is a pain, it has already created a variable called dictionary, if you click on Local Variables from the ribbon, you can delete this variable. This will ensure you keep only the variables you are using within your workflow and save confusion later. Always give your variables sensible names, just as if you were writing code.

  • Now we can call a HTTP web service. Underneath the dictionary, start typing “http” and press enter to insert Call HTTP Web Service.
    Click on “this” to open up the dialog box, and then click on the … for the string builder dialog box.

    I like to use as much dynamic values as possible so my URL in here looks like the following:

    [%Workflow Context:Current Site URL%]/_api/web/lists/getbytitle('[%Workflow Context:List Name%]')/items?$select=Title,Colour,Person/Title,Person/Name,Person/EMail&$expand=Person
    

    In the above API call I’m bringing back additional information about the Person from the person column. See at the end of this post about bringing back other information on a person column.

    After entering the URL, click the dropdown at the far right on the line in SPD and select properties. Set the RequestHeaders to the Dictionary you made in the first step. Set the ResponseContent to a new variable, and the ResponseStatusCode to a new variable. Click OK.

    The ResponseContent will be populated with the results, and the ResponseStatusCode will be populated with OK if successful, or a different value if something went wrong.

  • After the Web service call, I add an If Statement, to test that the variable responseCode equals to OK.
  • Now we want to grab the results. So now we will grab a dictionary item. Type “Get” and press enter to insert Get an Item from a Dictionary.
    Click “item by name or path” and type “d/results”
    Click “dictionary” and select “ResponseContent”
    Click “item” and create a new variable. This variable is a dictionary too that will contain the individual items. I’ve called mine DemoList.
  • We need to count the number of items in the new dictionary variable. I do this to ensure that we have returned items.
    Type “Count” and press enter to insert count items in a dictionary.

    Click “dictionary” and select variable “DemoList”.
    Can leave output Variable to count.

  • Put another If statement, and check that Count is greater than 0.
  • We now need to create a variable that will be our indexloop.
  • Add a loop with a condition. (Alternatively, we could have skipped the last step and added a “loop n times” instead).
    Set the condition to read. “The contents of this loop will run repeatedly while: Variable: indexloop is less than Variable: count

  • Now I’m going to get the values of Title, Colour, Person/Title and Person/Name from the DemoList dictionary.
    Type “Get” and press enter to insert Get an Item from a Dictionary
    Click “item by name or path” and type “([%Variable: indexloop%)/Title”

    Click “dictionary” and select “DemoList”
    Click “item” and create a new variable.

    Repeat this for all the parameters.

  • Still inside the loop underneath gathering the parameters we need to raise the index variable by one.
    Type “Calc” then press enter to insert Do Calculations
    Click first “value” and select the Variable: “indexloop”

    Click second “value” and set to 1.

    Set the output to a number variable. I called mine NewIndex

  • Now you need to set the variable NewIndex to indexloop.
  • Lastly, for demo purpose, I’m logging the results I’ve got to the history list. This logging to history lists is still within the loop.
    Type “Log” then press Enter to insert log to History List.
    Then I’m just logging out the variables I’ve captured.
  • Don’t forget to Transition to Stage “End of Workflow” at the end.

Publish your workflow.

When I run the workflow against any list item I see the following results in my History List.

Bringing back additional Person Data in REST API calls.

To bring back a person column data (or a lookup column), you need to expand it in a REST API call, you also need to include the values you want to bring back from the expanded column. A list of all possible values you can bring back for a user column can be found if you type the following in a browser (after already signing into SharePoint that is).

https://<tenant>/sites/<site>/_api/web/lists/getbytitle('<ListTitle>')/items(1)/<UserFieldInternalNameColumn>

*I’m using XV – XML Viewer chrome extension for the layout.

Hide your documents from Delve


Delve is a powerful tool to see and discover information that is likely to be interesting to you. You only see content that you have access to. The powerful search behind Delve uses the Microsoft Graph.

You can access Delve from the Waffle inside your Office 365, or by going directly to the URL https://delve.office.com and signing in with your 365 account.

Now you or someone else will only see a document if they have access to it. However, there might be a reason that you don’t want it to show up in Delve at all. To prevent a document showing up in delve you can create a HideFromDelve column of the type Yes/No in the library the document is in. The column creates a new crawled property within search schema called ows_HideFromDelve. This is automatically mapped to the HideFromDelve managed property. Set the column value to Yes for the document you do not wish to see in Delve.

Set the default value to No otherwise every document you create within the library will not show up in Delve (Unless this is the desire outcome).

SharePoint Online site keeps refreshing on Microsoft Edge


A weird thing started happening on my Microsoft SharePoint site yesterday. Every time I hit a page/site the browser continuously refreshed over and over. I had no problems if I did this in Chrome, or even Internet Explorer, only in Microsoft Edge. Originally I thought it was a problem with the site, because if I went to a different tenant I didn’t encounter the same issue.

So, I then booted up another pc that had Microsoft Edge on it, and viewed my site expecting it to refresh over and over, but it didn’t. Therefore, it seemed to be a problem with my Edge explorer.

I first tried to clear all settings. Clicking on the 3 ellipses and then select Settings > Clear browsing data. I ticked everything to be cleared, and then clicked Clear. Unfortunately, this didn’t work for me, and made my Edge explorer crash on opening.

Extreme measures were required. I needed to complete reset Microsoft Edge. Now if you are following these steps, I must warn you, you might lose your favourites, history and settings. I recommend that you create a full backup or create a system restore point. Although I didn’t bother with a system restore or backup. My favourites were still there afterwards, I’m not sure if this is a syncing thing between my devices though, as I’ve just noticed that my favourites are the same on two machines.

Fixing Microsoft Edge

  • Close all open Microsoft Edge browsers.
  • Open file explorer and navigate to the following location (You will need to show hidden files):
    • C:\users\<YourUserName>\AppData\Local\Packages
  • The folder called Microsoft.MicrosoftEdge_8wekyb3d8bbwe first right click it and select Properties, and remove the check from the Read-Only option, click Apply and then OK
  • Now try and delete the folder. If you get Access Denied prompts, just select Continue. Any files you cannot delete just skip for now.
  • Go inside the Microsoft.MicrosoftEdge_8wekyb3d8bbwe folder and try deleting any remaining folders, you might be not able to delete the AC folder.
  • Restart your computer.
  • Now we are going to obtain the Microsoft Edge package and reregister it. Open Windows PowerShell by right clicking it
    and Run as administrator
  • Type the following to get to your user cd c:\Users\<YourUserName> press enter.
  • Now type
Get-AppXPackage -AllUsers -Name Microsoft.MicrosoftEdge | Foreach {Add-AppxPackage -DisableDevelopmentMode -Register "$($_.InstallLocation)\AppXManifest.xml" -Verbose}
  • If successfully you will not see any red message in the powershell window, just a yellow one saying operation complete for C:\Windows\SystemApps\Micorosft.MirosoftEdge.8wekyb3d8bbwe\AppXManifest.xml”
  • Reboot your machine on more time. Afterwards Microsoft Edge will be restored and I found that I didn’t have a refreshing issue with my SharePoint online site anymore.

TypeScript error in Visual Studio – Cannot find module, problem with the tsconfig.json file


As much as I like to write blogs, I also like to follow and work through other people’s blogs, especially if they are step by step instructions similar to the way I think. This one particular blog was showing how to create a simple Angular Hello World app. I followed the blog to the letter and when I tried to build the app I kept getting the following error messages

  • Experimental support for decorators is a feature that is subject to change in a future release. Set the ‘experimentalDecorators’ option to remove this warning.
  • Cannot find module ‘@angular/core’
  • Cannot compile module unless the ‘—module’ flag is provided with a valid module type. Consider setting the ‘module’ compiler option in a ‘tsconfig.json’ file.

typescripterrormessage

This makes no sense, as in my tsconfig.json file I had everything setup correctly. I had set experimentalDecorators to true, so I shouldn’t have received the first error message. Couldn’t work out why it couldn’t find @angular/core as I had used the npm package manager to install it, and in my tsconfig.json file I had set the module to ‘commonjs’. I checked on other websites that I had set up my tsconfig.json file correctly.

{
compilerOptions: {
declaration: true,
emitDecoratorMetadata: true,
experimentalDecorators: true,
lib: [
"es2015",
"dom"
],
module: "commonjs",
moduleResolution: "node",
noImplicitAny: true,
removeComments: false,
sourceMap: true,
suppressImplicitAnyIndexErrors: true,
target: "es5",
typeRoots: [
"../../node_modules/@types/"
]
},
compileOnSave: true,
exclude: [
"node_modules/*",
"**/*-aot.ts"
]
}

It seems if you download TypeScript 2.0 for Visual Studio 2015 you will not be able to use a tsconfig.json file. If you are working with CommonJS module system, Visual Studio will ignore the tsconfig.json file, even though putting the tsconfig.json file within the project, Visual Studio prevents the use of the TypeScript build section of the project properties.

typescriptdisabled

 

The tsconfig.json file is required in Visual Studio Code, but it doesn’t seem to be required for Visual Studio. To fix your error messages, first, remove the tsconfig.json file from your project. This then makes the Typescript build on the properties page enabled. I switched the Module system to CommonJS and ECMAScript version to ECMAScript 6. This got rid of my bottom two errors, however I was still getting the message:

Experimental support for decorators is a feature that is subject to change in future release. Set the ‘experimentalDecorators’ option to remove this warning.

To fix this error:

  • Unload the project from your solution – right click the project and select Unload Project
  • Once you have unloaded the project, you can right click it again, and then edit the project file.
  • Add the following to both PropertyGroup where the condition is for debug or Release. (<PropertyGroup Condition=” ‘$(Configuration)|$(Platform)’ == ‘Debug|AnyCPU’ “> or  <PropertyGroup Condition=” ‘$(Configuration)|$(Platform)’ == ‘Release|AnyCPU’ “> )
        <TypeScriptExperimentalDecorators>True</TypeScriptExperimentalDecorators>
        <TypeScriptEmitDecoratorMetadata>True</TypeScriptEmitDecoratorMetadata>
    

  • Save your changes, then right click the project and Reload Project

Your errors should now be gone, and you can continue to build your project.

Reference

https://www.infopulse.com/blog/using-angular-2-in-visual-studio-2015-tutorial/ – The blog post that helped me!

Ensuring Visual Studio 2015 is using the latest NodeJS and NPM version


When Visual Studio 2015 uses NodeJS and NPM it uses the version local to itself, which as I discovered is annoying if:

  1. You didn’t know this
  2. Thought your PC was up to date after installing the latest NodeJS and NPM globally.

First lets ensure you have installed the latest nodejs and npm globally.

Install / Update NodeJS globally.

  • Using your browser, navigate to https://nodejs.org and download the current version of NodeJs.
  • Once you have downloaded NodeJs, ou can run the installer and work your way through the wizard.
  • Once installed, you can open up a command prompt. Node.js command prompt is also available.

  • Open up the node.js command prompt and type node -v to get the node version. Should match the version you downloaded from the website.

Installing / Update NPM globally.

  • Open the Node.js command prompt
  • Type the following
npm install npm@latest -g
  • Then type npm -v to get the npm version number.

Extensions for Visual Studio 2015

I recommend getting the following extensions for Visual Studio

Click download in both links and install the extensions into Visual Studio.

After you have installed the “NPM Task Runner”, you might need to make it visible in your Visual Studio. To do this, select View > Other Windows > Task Runner Explorer or press Ctrl + Alt + Bkspace



After you have installed the “Package Installer”, when you right click on your project you will see a new link under Add
called Quick Install Package…

When clicked, you can select and install a package from the following package managers


We will use these extensions in a moment.

Checking Visual Studio Version and Updating.

We are going to create a project, and add a package using the Quick Install Package, this will create us a package.json file. We add some commands to the Scripts section, and run them in the task runner.

  • Create yourself a blank web project.
  • Right click
    the project and select Quick Install Package…
  • Select NPM and type TypeScript in the next box, can leave Latest Version and click Install.

  • After you have clicked install you should see a package.json file, which doesn’t have much in it.
{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^2.1.5"
  }
}
  • Update the json file to include two scripts, getNPMVersion, getNodeVersion and updateNPMVersion.
{
  "name": "myproject",
  "version": "1.0.0",
  "devDependencies": {
    "typescript": "^2.1.5"
  },
  "scripts": {
    "getNpmVersion": "npm -v",
    "getNodeVersion": "node -v",
    "updateNPM": "npm install npm@latest"
  }
} 
  • After you have saved the json file, in the Task Runner Explorer window, click the refresh button. You should see your three scripts available to you.

  • Right click on getNpmVersion
    and click Run. The result will display in the Task Runner Explorer console window. You will note that this version is different to the version number you got at the start of this blog post through the Node.js command prompt window.
  • To Update NPM, right click on updateNPM and click Run. After it has completed, run getNpmVersion again. You should find that the version now matches the version you got earlier.
  • Right click on getNodeVersion and click Run. My version is v5.4.1
  • There doesn’t seem to be a command to update the Nodejs in visual studio. However, we can make it use the global version of Nodejs.
  • In Visual Studio click on Tools > Options. Inside Options, select Projects and Solutions > External Web Tools.
  • Add the NodeJS path. Mine is “C:\Program Files\nodejs”. Then move this to the top.

  • Go back to the Task Runner and run the command getNodeVersion you should now see the version matches the version you got earlier in the Node.js command window.

You should now be up to date.

Getting Started with TypeScript


What is TypeScript?

TypeScript works on any browser, any host, any operating system. TypeScript isn’t really a new language. It is an open source project, maintained by Microsoft, configurable to JavaScript version. (ES3, ES6, ES7). It is described as

“TypeScript is a typed superset of JavaScript that compiles to plain JavaScript” – Typescriptlang.org

It adds typing (e.g., String, Boolean, Integers) which for a developer is great because:

  • Allows tooling to autocomplete using intellisense
  • Mistakes in code can be spotted instantly
  • No worries of accidently converting a number into a string, as you might with JavaScript.
  • Supports Standard JavaScript code as well as TypeScript, so you can work with both together.
  • Allow encapsulation through classes and modules
  • Supports contructors, properties and functions
  • Defines Interfaces
  • Saves developer time, and cuts down debugging code.

Installing a compiler

The compiler for TypeScript is called TSC, it works across platforms. It converts TypeScript to JavaScript as browsers do not understand TypeScript. A way to install tsc is as a node.js package with node npm command line.

First you need to install nodejs.

  • Using your browser, navigate to https://nodejs.org and download the current version of NodeJs. (I downloaded the version recommended for most users)
  • Once you have downloaded NodeJs, you can run the installer and work your way through the wizard.
  • Once installed, you can open up a command prompt. Node.js command prompt is also available.

Installing TypeScript Complier

Now you have Node.js installed you can install TypeScript through the node package manager (npm). From the Node.js command prompt, type

npm install -g typescript

Note: The -g flag means to install globally not locally to a folder so that typescript complier works everywhere.

To test that the complier has been installed and working properly, you can perform this quick test.

  • With the command prompt still open, go to a folder of your choice and then type:
    Copy con test.ts
    class myfirstTSClass{
    }
    
  • Press Ctrl + Z and the file is then saved. If you open the file called test.ts in notepad, you will see that a file has been created with the class inside.
  • To compile into JavaScript, type
    tsc test.ts
    
  • In your folder, you should now see a test.js. Open this file in notepad and you should see the following JavaScript.
    var myfirstTSClass = (function () {
        function myfirstTSClass() {
        }
    
        return myfirstTSClass;
    }());
    

Editor Choices

To work with TypeScript you have many different editors you can use for example:

I’m not going to go through how to set up all the different editors, but I will show how to set up Visual Studio and Visual Studio Code as these are the two environments that I typically find myself in when coding. If you head to the TypeScript website (https://typescriptlang.org and click Donwload, you can find information for the other editors there.

Setting Up Visual Studio for TypeScript

Visual Studio is actually really easy, as it is already built into Visual Studio 2015, however it is worth while heading to the TypeScript site and clicking Visual Studio 2015 link (as shown above) to ensure you have the latest version installed within Visual Studio. If you have Visual Studio 2013, you just need to head to the TypeScript site and click the Visual Studio 2013 link.

Install NodeJS for Visual Studio.

Although it’s not a requirement, I recommend installing NodeJS for Visual Studio here too. This will allow you to create NodeJS project within Visual Studio. When I was learning TypeScript, I didn’t always need to write JavaScript that ran in a browser, my hello world application just needed to run within a console window.

In your browser head to VisualStudio.com, on the menu bar, select Features > Application Development > Node.js. Then click the link to “Get Node.js Tools for Visual Studio”

Once downloaded, I then had new project templates available to me in Visual Studio.

Creating a TypeScript Hello World in Visual Studio 2015

  • Open up Visual Studio and create a new Project, select HTML Application with TypeScript, found under the TypeScript template. Click OK.
  • In Solution Explorer you should see a structure like mine. Before we do anything, click the Show All Files button.
  • By opening the app.ts file we can see an example TypeScript class written called Greeter, it displays the current time on the screen.
  • As soon as you hit the Save button, the TypeScript complier automatically runs and creates the corresponding JavaScript and map file. If you refresh the files showing in Solution Explorer, you can see the app.js and app.js.map file. (The JavaScript files are not automatically added to the project, which is why I said click “Show All Files” button).
  • If you open the app.js file, you can see the converted JavaScript.
  • Run the application and in the browser it will tell you the current date and time.

Visual Studio 2013

If you are using Visual Studio 2013, you can install Web Essentials (https://vswebessentials.com) which gives you a JavaScript preview window, to allow side by side TypeScript/JavaScript files.

Setting up Visual Studio Code for TypeScript

As long as you have gone through the steps of installing nodejs and the typescript complier, Visual Studio Code will be able to build TypeScript projects. Unlike Visual Studio 2015, Visual Studio Code requires a bit of configuration for a brand new project to ensure the TypeScript gets converted into JavaScript.

Creating a Hello World in Visual Studio Code

  • Using the command line create a new directory somewhere, and then type code [nameofdirectory] to load it up in VS Code.

    Alternatively using Windows Explorer, you can create the folder, and then right click the folder and select Open with code.

  • Once VS Code has opened, we will create a couple of folders. One called ts and one called js. You do this by clicking on the folder icon in the explorer view.
  • In the ts folder, create a file (pressing the New File button next to the New Folder Button in the explorer view) and call this file helloworld.ts
  • Write the following TypeScript within this file.
class HelloWorld{
      constructor(){
        let divLabel = document.getElementById("mylabel");
        divLabel.innerHTML += "Hello from Visual Studio Code";
    }
}

var helloworld = new HelloWorld();
  • Then outside any folder, create a new file called index.html and put the following HTML within the file.
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <div>
            <h1>Hello World App</h1>
            <div id="mylabel"></div>
        </div>

       <script src="js/app.js"></script>
    </body>
</html>
  • Now if we try to build the project, either calling up the command box (Ctrl + Shift + P), typing Build
    and then select Tasks:Run Build Task or just using the shortcut to the run build tasks (Ctrl + Shift + B) you will see the following message appear at the top of your VS CODE.

  • Click Configure Task Runner and select TypeScript – Watch Mode. This will create a new folder called .vscode and a pre-completed file called tasks.json

  • The tasks.json file contains a json object that configures the TypeScript complier to run. We are going to change the args so that it compiles our TS folder. Change the line from:
    //From
    "args": ["-w", "-p", "."],
    
    //To
    "args":["-w", "-p", "ts/"],
    

    This will ensure that the TSC watches (-w) the project directory (-p) TS/

  • We are now going to create one more file called tsconfig.json
    and this is also going to be created in the TS folder. The presence of this file specifies the root files and the compiler options required to compile the project. https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. In this folder put the following json information.
    {
        "compilerOptions": {
              "sourceMap": true,
                 "target": "es5",
                "outFile": "../js/app.js"
        }
    }
    

    The above ensures a sourcemap file is created so that debugging is available directly within TypeScript files instead of JavaScript files. It is also targeting the EcmaScript5 version of JavaScript, and that all files are compiled into one JavaScript file called app.js located in the JS folder.

  • Now if you run the build task (Ctrl + Shift + B) the project will compile and create two files within the js folder. (app.js and app.js.map).
  • Also note that when you make any changes to the helloworld.ts or any new ts files you might create within the ts directory, and save the file, because we created a watch build task, the app.js file is updated automatically.

Before we run this simple HelloWorldTS app, let me show you an extension that you should download and install in Visual Studio Code.

Installing “View In Browser” Extension

You only will need to do this once, not for each project you create.

  • Click the Extensions button and then type ‘view in browser’ in the search box. Once you have found the extension, click Install
  • Once installed you will need to Enable it. This will request for VS Code to be restarted. Click OK, to continue.

Running HelloWorldTS

With the View In Browser installed, any HTML page you go to in your project and press (Ctrl + F1), will open the page directly in the browser.

Debugging TS files

In this section I’m not going to go into explaining how the Visual Studio Code debugger works, however, I will show you that you can debug using the browser. As stated earlier, you can debug the actual TypeScript files because of the .map file. If you run your project within a browser like before then press F12 to open up the browsers developer tools. I’m using Microsoft Edge, if you are not able to see the .ts file, then press the Load Source map button. (Highlighted)

After you have set a break point, refresh the page, and you can see that you can step through the TS file by pressing F11.

Summary

In this blog post I have explained what TypeScript is, how you can set up TypeScript on your machine using Visual Studio 2013/2015 or Visual Studio Code. We have created 2 simple TypeScript applications, and briefly looked at debugging. This post hasn’t explained how you write TypeScript.

 

Getting Fiddler to work with SharePoint Online


Something that I’ve always struggled with is getting Fiddler to provide me with REST API results for SharePoint online. These steps should help you.

Install and configure Fiddler

  1. First download and install Fiddler if you haven’t already. You can download fiddler at the following URL : https://www.telerik.com/download/fiddler Unfortunately you have to use an email address to be able to download it now.
  2. After first install of Fiddler, you will get an AppContainer Configuration dialog appear. Just click Cancel for now.
  3. Once Fiddler has opened, from the menu click Tools > Telerik Fiddler Options
  4. On the HTTPS tab ensure that Decrypt HTTPS traffic is selected
  5. Click OK. You will get a dialog asking if you should Trust the Fiddler Root certificate. It is fine to say Yes here.
  6. Say Yes to install the certificate.
  7. They really want to make sure, you are sure. Click Yes again.
  8. Fiddler’s root certificate has now been added to the Machine Root List.
  9. Close and Restart Fiddler.

Composing a REST URL for SharePoint Online.

First we need to log in to SharePoint online.

Now this is the point when I can never get it to work. I open IE/Edge, and instantly whenever I try to hit a https web page I get the following screen.

The trick here is to open Chrome and use that instead.

  1. Using Chrome, log in to your SharePoint online.
  2. In Fiddler, you should see in the left pane, it’s been capturing all your requests. Find a 200 result for your SharePoint site.
  3. In the right hand pane, take down the following information and store it in NotePad.
    1. FedAuth Cookie
    2. rtFA Cookie
  4. Above the right hand pane in Fiddler, one of the tabs is called Composer click on this tab.
  5. In the GET section put your REST API request E.g https://<YourOnlineName>.SharePoint.com/sites/Workflow/_api/web
  6. In the section below enter the following:
    Accept: application/json;odata=verbose
    Content-Type: application/json;odata=verbose
    Cookie:
    
  7. After cookie, you will want to put the rtFa=<rtFaCode>;FedAuth=<FedAuthCode>
  8. Click the Execute button at the top right of the screen. Once you have pressed it a call will be made and show up in the left hand pane. It’s easy to spot because the icon is for JSON.
  9. Double click on this entry and the right hand bottom pane, you will have your JSON response.

Performing Post Requests

There are a few more steps to complete to perform a post request, I’m going to walk you through the steps below. I already have a list called FiddlerList in my SharePoint online site. Currently it holds one item. (My site called Workflow as I was testing something with workflow before working on this post, this has nothing to do with the demo, hopefully it won’t confuse you)

  1. In Fiddler, from your previous composed GET request, first change the GET request to list all items currently in this list. My GET request is now https:// <YourOnlineName>.sharepoint.com/sites/Workflow/_api/web/Lists/getByTitle(‘FiddlerList’)/Items
  2. The results are show below. Take note of your type in the __metadata node. Mine is SP.Data.FiddlerListListItem
    you will need this later for adding an item. The type is normally SP.Data.<ListName>ListItem
  3. Now we need to create a POST request to the URI of /_api/contextinfo and then capture the FormDigestValue

  4. Now we have all the information required to create an item. Go back to the composed tab. Change the URI back to the way we had before to get the list items. https://<YourOnlineName&gt;.sharepoint.com/sites/Workflow/_api/web/Lists/getByTitle(‘FiddlerList’)/Items
  5. Add the X-RequestDigest: put in your FormDigestValue. Your page should look similar to below.
  6. Then in the bottom pane, the Request Body, put the following (Remember to change the type to match your list type).
    {'__metadata': {'type':'SP.Data.FiddlerListListItem'},
    'Title':'Created by Fiddler REST'
    };
    
  7. Click Execute
  8. If all has worked well you should get a 201 Create Response back, and see the item created in your list.

Update API Request

To perform an update to the list item, first we need to know what the Item ID is. At the end of the 201 create JSON response I can see that the Item I created has the ID of 2.

  1. In my composer I have changed my URI to https://<YourOnlineName>.sharepoint.com/sites/workflow/_api/web/Lists/getByTitle(‘FiddlerList’)/Items(2)
  2. In the top pane, I have set the content-length back to 0 and added IF-MATCH: * and X-HTTP-Method: PATCH this indicates that the post request is actually an update.
  3. Lastly in the bottom pane, Request Body, I have changed the Title.

    Note: Screen shot shows MERGE which is backwards compatible, should use newer command PATCH.
  4. After executing, I get a 204 response, and I can see the title has changed in my list.

Delete API Request

Lastly I’m going to delete my item.

  1. Change X-HTTP-Method to say DELETE instead of PATCH
  2. Remove the Request Body text.
  3. Click Execute, you will get a 200 response back.
  4. Your item has now been removed from the List.

The above should be enough to get you going. You can now use fiddler to test out your REST API calls.