Get WebPart Zone Information using Javascript - Sharepoint Online

Question

I'm planning to get zone information of a web part using JSOM and I couldn't find any chance of getting it.

My Code:

var ctxOBJ = SP.ClientContext.get_current();
var webOBJ = ctxOBJ.get_web();
var siteOBJ = ctxOBJ.get_site();
var pageURL = window.location.pathname;
var webPartManagerOBJ = webOBJ.getFileByServerRelativeUrl(pageURL).getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
  //get the web parts on the current page
  var collWebPart = webPartManagerOBJ.get_webParts();
  //request the web part collection and load it from the server
  ctxOBJ.load(collWebPart);
  ctxOBJ.executeQueryAsync(Function.createDelegate(this, function() {
    // Go through all webparts
    for (var x = 0; x < collWebPart.get_count(); x++) {
      debugger;
      var webPartDef = collWebPart.get_item(x);
      console.log(webPartDef.get_id().toString());
    }
  }), Function.createDelegate(this, function() {
    alert("failed to fetch shared webparts from page")
  }));

I need the zone id of each web part in that page.
Can anyone help me on this?

Answer 1

For ZoneId you'll have to use get_zoneId().

Change the load:

ctxOBJ.load(collWebPart,'Include(ZoneId)');

And the use get_zoneId():

console.log(webPartDef.get_zoneId());

If you plan to use props on the webpart itself, you'll have to load that too:

ctxOBJ.load(collWebPart,  'Include(WebPart.Title,WebPart.ZoneIndex, ZoneId)');

And then:

    console.log(webPartDef.get_zoneId());
    console.log(webPartDef.get_webPart().get_title());
    console.log(webPartDef.get_webPart().get_zoneIndex())