Change Webpart Properties Using Javascript Object Model

by Unknown 17:20 0 comments CSOM JavaScript JSOM O365 SP2013 SPonline

Hi there,

Working with SharePoint Online, we should be thinking on solving provisioning tasks using JSOM in combination with XML using SharePoint provisioning engine.

This post is intended to describe how to update a WebPart Property using JSOM. Specifically, I am updating JSLink property for a given webpart and page.

var listName = "NewsIdeas"
var jslinkURL = "~sitecollection/Style Library/JSLink/NewsIdeas_NewForm.js";
var pageUrl = "/Lists/" + listName + "/NewForm.aspx";
var clientContext = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
console.log(_spPageContextInfo.webServerRelativeUrl);
var oFile = clientContext.get_web().getFileByServerRelativeUrl(_spPageContextInfo.webServerRelativeUrl + pageUrl); 
var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var collWebPart = limitedWebPartManager.get_webParts();
clientContext.load(collWebPart);
clientContext.executeQueryAsync(function () 
    {
        var webPartDef = null;
        for (var x = 0; x < collWebPart.get_count() && !webPartDef; x++) {
        var temp = collWebPart.get_item(x);
            console.log(temp.get_id().toString());
        }
        webPartDef = collWebPart.get_item(0);
        if (!webPartDef) {
            console.log("Web Part: " + wpId + " not found on page: " + 

                         _spPageContextInfo.webServerRelativeUrl);
        return;
        }
        var webPartProperties = webPartDef.get_webPart().get_properties();
        clientContext.load(webPartProperties);
        clientContext.executeQueryAsync(
        function () {
        var webpartprops = webPartProperties;
                console.log(webpartprops.get_item('JSLink'));
                webpartprops.set_item("JSLink", jslinkURL);
                webPartDef.saveWebPartChanges();
                clientContext.load(webPartDef);
                clientContext.executeQueryAsync(
        function () {
                    console.log("WebPart properties saved.");
                },
        function() 
                {
                    console.log("Failed save WebPart Properties"); 
                });
            }, 
        function () 
            { 
                console.log("Failed to load web part properties"); 
            });
    }, 
        function () { 
        console.log("Failed to load web part collection"); 
    });