Reading web part properties using JavaScript Object Model in SharePoint 2013

Question

I am using the below code to read the properties of a web-part using JSOM. While i can read the properties of the web-parts that are there on the current web part page, I would like to know of a way that would allow me to do this without looping through all the web-parts on that page. The looping happens in the code section starting with

while (webParts1.moveNext()){...}

function init() {
  var ctx = new SP.ClientContext();
  var pageFile = ctx.get_web().getFileByServerRelativeUrl('/SitePages/TestWebProp.aspx');
  var limitedwpMangager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared)
  var webParts = limitedwpMangager.get_webParts();
  ctx.load(webParts);
  ctx.executeQueryAsync(function () {
    var webParts1 = webParts.getEnumerator();
    while (webParts1.moveNext()) {
      var webpart = webParts1.get_current();
      var prop = webpart.get_webPart().get_properties();
      ctx.load(prop);
      ctx.executeQueryAsync(function () {
        console.log(prop.get_item('Title'));
      },CommonError)
    }
  },CommonError)
}
function CommonError(){
    console.log("Something went wrong");
}
ExecuteOrDelayUntilScriptLoaded(init, 'sp.js')

Answer 1

I would recommend the following example for loading web parts using JSOM:

var ctx = new SP.ClientContext();
var pageFile = ctx.get_web().getFileByServerRelativeUrl(pageName);
var webPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartDefs = webPartManager.get_webParts();
ctx.load(webPartDefs,'Include(WebPart)');
ctx.executeQueryAsync(
  function () {
    for(var i = 0;i < webPartDefs.get_count();i++) {
       var webPartDef = webPartDefs.getItemAtIndex(i);
       var webPart = webPartDef.get_webPart();
       console.log(webPart.get_title());
    }
  },
  function(sender,args){
     console.log(args.get_message());
  });

Key points:

• only a single request is submitted to the server to retrieve Web Parts ( see line ctx.load(webPartDefs,'Include(WebPart)');)
• instead of getting Web part Title via properties, it is retrieved via SP.WebParts.WebPart.title property

In order to retrieve a specific web part on page you could consider the following methods:

• SP.WebParts.WebPartDefinitionCollection.getById Method - returns the Web Part definition object in the collection with a Web Part identifier equal to the id parameter
• SP.WebParts.WebPartDefinitionCollection.getByControlId - returns the Web Part definition object in the collection with a Web Part identifier equal to the controlId parameter

Example

The following example demonstrates how to retrieve web part with properties by its Id:

Note: to load SP.WebParts.WebPart.properties property it has to be specified explicitly

var ctx = new SP.ClientContext();
var pageFile = ctx.get_web().getFileByServerRelativeUrl(pageName);
var webPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartDef = webPartManager.get_webParts().getById(webPartid);
var webPart = webPartDef.get_webPart();
ctx.load(webPart,'Properties');
ctx.executeQueryAsync(
  function () {
    var properties = webPart.get_properties();
    console.log(properties.get_fieldValues()['Title']);
  },
  function(sender,args){
     console.log(args.get_message());
  });