Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Contact
  • Books and ink
A cup of dev

How to update field values in SharePoint using Microsoft Graph

By Eli H. Schei on Friday, 3 December 2021, 11:05Wednesday, 13 November 2024, 10:46

I recently wrote a post about uploading files to SharePoint using Microsoft Graph and Microsoft Authentication Library. As an extention of that blogpost I decied to also write a blogpost on how to update field values in SharePoint using Microsoft Graph.

Prerequesites: You should know basic programming, and have an understanding of working against an API. To be able to run the complete demo-code you need to register a SPA in Azure, and obtain the site-id for your SharePoint site. How to do these things are described in my blogpost about uploading files to SharePoint

TL;DR

If you just want to see the complete function for updating fields you can jump straight to the last section of this blogpost, or go take a look at the full source code on github.

Introduction

Different types of fields

A field (column) in SharePoint can contain different types of data. It might be a date, a single line of text, a number or a select (a “choice” column in SharePoint terms). Some of these types must have a specific format for Graph to be able to perform the update.

In this blogpost I cover the formats needed to update a date field, a single line of text field, and two different types of ‘choice’ fields – one where you need to select one value, and one where you can select multiple values.

List vs drive vs document library

Since you are here, reading a blogpost about updating fields in SharePoint I gather that you are somewhat familiar with just that – SharePoint. But I thought it could be useful to clearify some terms either way.

In SharePoint there are two types of “containers” for contents, litst and drives, and you might be a bit confused about the difference between them. Another therm that you often come across in SharePoint are “document library”, so where does that fit in with lists and drives?

  • Lists – a structured way to save and display different types of data. This can be a to do list. A list of recent product orders. Or a list of people.
  • Document library – a structured way to save and display documents (or other files).
  • Drive – the technical term for a document library. Thypically the GET request “.../site/drive” returns the Document Library of the given SharePoint site.
    Drive can also meen OneDrive.

How to update field values in SharePoint using Microsoft Graph

Source code: You can find the full source code for this example on github.

Ok, lets take a look at the code, and how you actually go about updating the fields.

There are 3 steps you need to complete to update the fields:

  1. Compose the request URL – this must contain the id of the drive/list item that should be updated
  2. Create an object that contains the field names and the new values.
  3. Make the request to Graph with the new values

In the following section we will look at each of these steps.

1. Building the request URL

To build the request url to you need your site id, the id of the item you would like to update, and in some cases the list/drive id.

In my example code I use the drive-item-id that is returned when a file is uploaded. And I also use a generic /drive/items/ path to geth the item I want. But you migth need to use /lists/<list_id>/items/<item_id> depending on where your item(s) are located.

In the snippet below you can see an example of both of these urls

//The upload URL used in my sample code 
const updateURL =
    "https://graph.microsoft.com/v1.0/sites/" +
    site_id +
    "/drive/items/" +
    driveItemId +
    "/ListItem/fields";

//how the URL should look if you are going against a list other than the SharePoint sites drive.
const updateURL =
    "https://graph.microsoft.com/v1.0" +
    "/sites/" +
    site_id +
    "/lists/" +
    list_id +
    "/items/" +
    item_id +
    "/fields";

2. Creating an object that contains the new field values

To update the field values we need to pass in an object that contains the field-name and the new value.

Static Field Names
You need to use the static name of the SharePoint fields. The easiest way to find these names is to make a GET request on an item and see the field names in the response. You can use Graph explorer to make the request and obtain the static field names.

//Linebreaks have been added for readability - get request to see field names
GET https://graph.microsoft.com/v1.0/sites/
<YOUR_SITE_ID>/lists/<LIST_ID>/
items/<ITEM_ID>/fields

The static field names are the one displayed here.

An image that shows how the static field names are returned in Graph explorer. You need the static field names to be able to update field values in SharePoint using Microsoft Graph

If your field names contains spaces or other characters the static name might look more like this Area_x0020__x002F__x0020_terrain.

Creating the object
When you have the static field names you need to create an object that will contain the new field values. If you are doing the request directly to the item url the object will look like this

const updatedFieldValues = {
     fields: {
        field1_static_name: "New value",
        ...
     }
}

But in my democode I have added “/fields” to the request uri and then you just need to pass in the field names and values like this

const updatedFieldValues = {
        field1_static_name: "New value",
        ...
}

Different types of data

Single line of text and Choice (single) – Both “Single line of text” and “Choice” (single select) columns accept a string as input for the update.

const fieldUpdateValues = { 
    CustomTextField: "This clumn accepts a string as its new value".
    CustomChoice: "This column accepts a string that matches one of the choice values specified in SharePoint"
}

Date field – The date needs to be passed in as an isostring "2011-10-05T14:48:00.000Z". In javascript you can use the .toIsoString() function on a Date object to get a string in this format.

const fieldUpdateValues = { 
    CustomDate: new Date( "2021-12-03" ).toISOString(); // "2021-12-03T11:15:00.000Z"
};

Choice fields (multiple values) – For a multiple choice field the selected values need to be passed in as an array. And you also need to add the odata.type or the request will fail.

const fieldUpdateValues = { 
    Tags: ["Tag 1", "Tag 4"],
    "Tags@odata.type": "Collection(Edm.String)"
};

Making the PATCH request

To update the field(s) we make a PATCH request to the updateUrl that we specified previously. In the header it is important to set "Content-Type": "application/json", and use JSON.stringify() on the fieldUpdateValues that are sent as the request body.

window
    .fetch(updateURL, {
      method: "PATCH",
      headers: {
        Authorization: await getMsalToken(),
        "Content-Type": "application/json",
      },
      body: JSON.stringify(fieldUpdateValues),
    })
    .then((response) => response.json())
    .then((data) => {
      console.log("Update success");
    })
    .catch((error) => {
      console.error("ERROR");
      console.error(error);
    });

A look at the complete update function

Below you can see the complete function from my democode. This funciton gets the drive item id and an object with the new field values as parameters.

export async function updateFieldValues(driveItemId, fieldValues) {
  //Creating URL for updating the related ListItem field Values
  const site_id = "YOUR_SITE_ID";
  const updateURL =
    "https://graph.microsoft.com/v1.0/sites/" +
    site_id +
    "/drive/items/" +
    driveItemId +
    "/ListItem/fields";

  const fieldUpdateValues = {
    //Date values need to be a iso string
    CustomDate: new Date(fieldValues.fileCustomDate).toISOString(),
    ChoiceTest: fieldValues.fileCustomType,
  };

  //Checks if fileTags contain any info and adds them to metadata (Object.assign will ignore null values)
  const fileTags =
    fieldValues.fileTags.length > 0 ? { Tags: fieldValues.fileTags } : null;
  if (fileTags) {
    Object.assign(fieldUpdateValues, fileTags);
    //For multiple choice values we also need to set odata.type or the request will fail
    Object.assign(fieldUpdateValues, {
      "Tags@odata.type": "Collection(Edm.String)",
    });
  }

  window
    .fetch(updateURL, {
      method: "PATCH",
      headers: {
        Authorization: await getMsalToken(),
        "Content-Type": "application/json",
      },
      body: JSON.stringify(fieldUpdateValues),
    })
    .then((response) => response.json())
    .then((data) => {
      console.log("Update success");
    })
    .catch((error) => {
      console.error("ERROR");
      console.error(error);
    });
}

Resources

  • Microsoft Graph JavaScript Client Library – npm site
  • Make API calls using the Microsoft Graph SDK – Microsoft docs
  • Microsoft Graph Github page
  • Microsoft Graph Documentation – Microsoft docs
  • Microsoft Graph REST API – Microsoft docs
  • Graph explorer

If you are interested in Microsoft 365 Development you might also like my other blogposts in this category.

Also, if you have any feedback or questions, please let me know in the comments below. šŸ™‚

Thank you for reading, and happy coding!

If you want to support my content you can

/Eli

Share this:

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X

Post navigation

Upload files to SharePoint with JavaScript using Microsoft Graph and Microsoft Authentication Library.
My top 5 most read blogposts in 2021

2 thoughts on “How to update field values in SharePoint using Microsoft Graph”

  1. Anders says:
    Sunday, 4 September 2022, 16:21 at 4:21 pm

    Hey Eli – I just wanted to say this was a very well written article. Thank you! I am searching for an answer to a question. I have a list with a hidden column. As in it shows for the user, but they are unable to edit it. I am finding that graph isn’t seeing the field either and I am unsure how to return hidden fields.

    Loading...
    Reply
    1. Eli H. Schei says:
      Monday, 19 September 2022, 6:44 at 6:44 am

      Hi! Thanks, I’m glad you like it! šŸ™‚
      I have no experience with retrieving hidden fields so I’m not sure what might be the issue. The only thing I can think of that might be of help is the expand keyword in graph, if you havn’t tried it? Like this “https://graph.microsoft.com/v1.0/sites/{site-id}/lists/{list-id}/items?$expand=fields” maybe that will return more details?

      Loading...
      Reply

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • How to Get Site-ID with Graph Explorer (and other SharePoint info)
  • How to use Azure CLI to deploy Azure Functions: Step-by-Step Guide
  • Give your app granular permissions to a specific site or list in SharePoint
  • Microsoft Graph Magic: Simplifying User Removal from teams in Microsoft Teams
  • How to leverage teams-js in your Teams app; Working with user context and SharePoint site context

Categories

  • Azure
    • Azure CLI
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2025 A cup of dev | WordPress Theme by SuperbThemes.com
%d