Reading web part properties using JavaScript Object Model in SharePoint 2013
-
01-10-2020 - |
質問
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')
解決
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());
});