I have the following method that creates a "hyperlinkOrPicture" column as it is referred to by the Graph API, which is essentially just a URL. The Sharepoint API refers to the column type by the FieldTypeKind value.
async function createHyperlinkOrImage(sharePointAPIaccessToken, listId, columnName, isImage) {
const sharePointApiUrl = `${process.env.SITE_URL}/_api/web/lists(guid'${listId}')/fields`;
// FieldTypeKind = 11 => URL type
// DisplayFormat = 0 => Hyperlink, 1 => Image
const sharePointPayload = {
"__metadata": { "type": "SP.FieldUrl" },
"Title": columnName,
"FieldTypeKind": 11,
"DisplayFormat": isImage ? 1 : 0,
};
try {
const response = await fetch(sharePointApiUrl, {
method: "POST",
headers: {
Authorization: `Bearer ${sharePointAPIaccessToken}`,
Accept: "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose",
},
body: JSON.stringify(sharePointPayload),
});
// error handling
}
}
The columns are created properly. It handles when the column is purely a hyperlink (with isImage set as 0), the problem is with Image columns (isImage set as 1): uploading an image, it is not rendered in the cell, which does happen when creating a column manually: "Add Column" -> "Image". I’ve included a side by side comparison of the two below:
To the left, is the column generated via the REST API, and to the right is through the UI.
One big difference, which I believe is the reason for why this is happening is when viewing the properties of the columns, we see that the REST API generated images column does not specify the ‘type’.
When opening Column Settings I see the following:
And for the manually set column:
Lastly, I noticed that I am unable to add the images directly when on the Add new item page:
I cannot tell what Sharepoint is recognizing the column as, clearly from the image icon next to the column name it should be rendered as an Image Column. However, it is behaving as a hyperlink column.
Thank you!
2
Answers
The following is from the results of a GET request for the list I have created above to the following endpoint:
${SITE_URL}/_api/web/lists(guid'${listId}')/fieldsComparing a working Hyperlink Column with our "Image Column"
Firstly, comparing a regular hyperlink column to the image column (not working). I will refer to these as A and B respectively from now.
The
SchemaXMLfield for column A:The
SchemaXMLfor column B (The Image Column not rendering properly):Key differences:
A:
SchemaXML.Formatappears as HyperlinkB:
SchemaXML.Formatappears as ImageOther relevant differences:
Comparing Column B to Column C (Manually Added Image Column). I will provide the entire payload for each column...
Column B
Column C
Note: The
EntityPropertyNameis the original name of the column when it was created, thus you will see 'ManualImageColumn' in a few places. I've changed the name to 'Another Image Column' to match my initial post.Key Differences:
__metadataat the very top we see that for column B the type is: "SP.FieldUrl" whereas for column C the type is: "SP.MultiLineText". This obviously does not make any sense to me.SchemaXMLshows very clearly that these two are completely different in how they are being rendered. Column C has aSchemaXML.Formatvalue of "Thumbnail" and it's.Typeproperty is also "Thumbnail".I really wish the Microsoft team cleans up the documentation for the API because it is very difficult to navigate all of these different field types and differences with Graph API and the Sharepoint REST API.
I guess my next step would be to figure out if its possible to create a column with the field type as Thumbnail. Otherwise I am not sure how to proceed with any fix.
The following payload works!