Getting custom webpart property with JSOM

Question

I have a webpart with a custom property setup like so:

public static string TargetUrl;
[WebBrowsable(true),
WebDisplayName("My DisplayName"),
WebDescription("My Description."),
Personalizable(PersonalizationScope.Shared),
Category("Target List")]
public string _TargetUrl
{
    get { return TargetUrl; }
    set { TargetUrl = value; }
}

The JSOM i'm using to try and retrieve this property:

var currentCtx = SP.ClientContext.get_current();
var pageFile = currentCtx.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath);
var webPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartDefs = webPartManager.get_webParts();
currentCtx.load(webPartDefs, 'Include(WebPart)');
currentCtx.executeQueryAsync(
function () {
    if (webPartDefs.get_count()) {
        for (var i = 0; i < webPartDefs.get_count() ; i++) {
            var webPartDef = webPartDefs.getItemAtIndex(i);
            var webPart = webPartDef.get_webPart();
            if (webPart.get_title() === "My List") {
                var properties = webPart.get_properties();
                targetList = properties.get_fieldValues()["My DisplayName"]; // this comes as undefined
            }
        }
    }
    else {
        console.log("No WebParts found.");
    }
},
function (sender, args) {
    console.log(args.get_message());
});

targetList comes back as undefined in the console. The more frustrating part is that I can't even tell if I have the right web part because observing my js objects in the browser doesn't show me anything intuitive. This is how my JSOM objects are looking in the browser.

TL;DR Why is the custom property i'm trying to pull always undefined and why are all my JSOM objects unintuitive when examining them in the browser?

Answer 1

To access SP.WebParts.WebPart Properties it need to be requested explicitly. In your example you could change the expression at the line:

currentCtx.load(webPartDefs, 'Include(WebPart)');

with

currentCtx.load(webPartDefs, 'Include(WebPart.Properties)'); 

Modified example

var currentCtx = SP.ClientContext.get_current();
var pageFile = currentCtx.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath);
var webPartManager = pageFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartDefs = webPartManager.get_webParts();
currentCtx.load(webPartDefs, 'Include(WebPart.Properties)');
currentCtx.executeQueryAsync(
function () {
    if (webPartDefs.get_count()) {
        for (var i = 0; i < webPartDefs.get_count() ; i++) {
            var webPartDef = webPartDefs.getItemAtIndex(i);
            var webPart = webPartDef.get_webPart();
            var properties = webPart.get_properties();

            console.log(JSON.stringify(properties.get_fieldValues())); //print all properties
        }
    }
    else {
        console.log("No web parts found.");
    }
},
function (sender, args) {
    console.log(args.get_message());
});

Answer 2

You need to load webpart properties before you can read them. That is,

var properties = webPart.get_properties();
currentCtx.load(properties);

Then read the properties in success method.

currentCtx.executeQueryAsync(...