Add / Import Sharepoint 2013 WebPart via REST API

Question

I'm trying to figure out if I can import a web part via the REST API.

I've seen various CSOM examples of doing this, e.g. How to add a Web Part into a SitePages/Home.aspx using CSOM

I've exported a ListView web part, so I have an XML webpart definition file.

I can successfully call https://mysite.sharepoint.com/subsite/_api/web/getfilebyserverrelativeurl('/subsite/Pages/Info.aspx')/getlimitedwebpartmanager(scope=0)

The end point for importWebPart appears to exist, e.g. https://mysite.sharepoint.com/subsite/_api/web/getfilebyserverrelativeurl('/subsite/Pages/Info.aspx')/getlimitedwebpartmanager(scope=0)/importWebPart

But I can't figure out what/how to post to it, the webpart definition is XML, but if I POST that then the API unsurprisingly says "Not well formatted JSON stream".

Any ideas?

Answer 1

This error most likely occurs since the parameters property is provided in invalid format, the below example demonstrates how to invoke ImportWebPart method:

Endpoint /_api/web/getfilebyserverrelativeurl('<pageurl>')/getlimitedwebpartmanager(1)/ImportWebPart

Parameters { webPartXml : <webpartxml> }

HTTP method POST

Note: despite ImportWebPart method is supported via REST API, it seems AddWebPart method on the contrary is not supported at the moment making the operation for adding web part on the page not applicable

---

Example

var webPartXml = '<?xml version="1.0" encoding="utf-8"?>' +
'<WebPart xmlns="http://schemas.microsoft.com/WebPart/v2">' +
    '<Assembly>Microsoft.SharePoint, Version=16.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c</Assembly>' + 
    '<TypeName>Microsoft.SharePoint.WebPartPages.ContentEditorWebPart</TypeName>' + 
    '<Title>$Resources:core,ContentEditorWebPartTitle;</Title>' +
    '<Description>$Resources:core,ContentEditorWebPartDescription;</Description>' +
    '<PartImageLarge>/_layouts/15/images/mscontl.gif</PartImageLarge>' +
'</WebPart>';
var zoneId = "TopColumnZone";
var zoneIndex = 0;
var pageUrl = _spPageContextInfo.webServerRelativeUrl + "/Pages/default.aspx"; 

importWebPart(_spPageContextInfo.webAbsoluteUrl, pageUrl ,webPartXml,zoneId,zoneIndex)
.done(function(result)
{
    console.log('Web part has been imported successfully');
})
.fail(function(error){
    console.log(JSON.stringify(error));
});

where

function importWebPart(webUrl, pageUrl,webPartXml,zoneId,zoneIndex){
    var url = webUrl + "/_api/web/getfilebyserverrelativeurl('" + pageUrl + "')/getlimitedwebpartmanager(1)/ImportWebPart";
    var properties = {"webPartXml": webPartXml};
    return executeJson({
        "url" :url,
        "method": 'POST',
        "payload": properties})
}

function executeJson(options) 
{
    var headers = options.headers || {};
    var method = options.method || "GET";
    headers["Accept"] = "application/json;odata=verbose";
    if(options.method == "POST") {
        headers["X-RequestDigest"] = $("#__REQUESTDIGEST").val();
    }   

    var ajaxOptions = 
    {       
       url: options.url,   
       type: method,  
       contentType: "application/json;odata=verbose",
       headers: headers
    };
    if("payload" in options) {
      ajaxOptions.data = JSON.stringify(options.payload);
    }  

    return $.ajax(ajaxOptions);
}