How to update field values in SharePoint using Microsoft Graph

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.

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

---

Did you find this article usefull? Follow me on twitter to be notified when I publish something new!

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!

/Eli