6

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')
7

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:

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());
  });
  • Ok. The getById works exactly the way i want it to. But now i am facing another problem. I looked at the DOM and i can see a DIV that looks like <div id="WebPartctl00_ctl35_g_a70dc106_4ee6_4a5d_9d85_95a2aabcffb1" webpartid2="a70dc106-4ee6-4a5d-9d85-95a2aabcffb1" webpartid="5f8931ff-a930-4942-be06-0fe948ad8c4c">. How do i know my web part id before hand? Also, There are 2 parameters here webpartid2 and webpartid. Though webpartid works, i would like to know what webpartid2 is. – Tanmay Feb 12 '15 at 3:46
  • This is a different question and i suggest you to post a separate question for that. – Vadim Gremyachev Feb 12 '15 at 7:10
  • Sure thanks for thanks for the help. Follow up question is here – Tanmay Feb 13 '15 at 10:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.