1

I need to fetch some of the custom properties of my webpart from the front-end.
Currently, I'm using

var oFile = context.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath);
var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
var webPartDefinitionCollection = limitedWebPartManager.get_webParts();
context.load(webPartDefinitionCollection);
context.executeQueryAsync(function() {
    var webPartDefinitions = [];
    var webParts = [];
    for (var i = 0, il = webPartDefinitionCollection.get_count(); i < il; i++) {
        webPartDefinitions[i] = webPartDefinitionCollection.get_item(i);
        context.load(webPartDefinitions[i]);
        webParts[i] = webPartDefinitions[i].get_webPart();
        context.load(webParts[i]);
        context.load(webParts[i].get_properties());
    }
    context.executeQueryAsync(function() {
        //Store the results
    });
});

To fetch web parts and then later on I can

var getCustomProperties = function(webPart) {
    var clientObjectProperties = webPart.get_objectData().get_clientObjectProperties();
    var methodReturnObjects = clientObjectProperties.Properties.get_objectData().get_methodReturnObjects();
    var dict = methodReturnObjects.$m_dict;
    if (dict === null || dict === void 0) {
        debugger;
    }
    return dict;
}

To get custom properties. However, all of this is pretty darn hacky, but I've failed to find any documentation on what's the right way to get access to these.

The properties are defined in the webpart .cs file as follows:

[WebBrowsable(true),
WebDisplayName("Birthday list title"),
WebDescription(""),
Personalizable(PersonalizationScope.Shared),
Category("Category")]
public string BirthdaysListTitle { get; set; }

Is there a cleaner solution?

2
  • Do you have the source code of the webpart? Commented Jan 19, 2015 at 19:14
  • @AmalHashim Yes, the webpart is very simple and barebones, I've updated the question.
    – Etheryte
    Commented Jan 19, 2015 at 19:19

2 Answers 2

1

Add a Hidden field to the page.

Then on the Page_Load event of the webpart, set the value of the hidden field to the webpart property value.

Now using JavaScript, handle the document.ready event and read the hidden field value.

Reading WebPart Properties using JSOM

//pass in the web part ID as a string (guid)
function getWebPartProperties(wpId) {
    var dfd = $j.Deferred();

    var clientContext = new SP.ClientContext(_spPageContextInfo.webServerRelativeUrl);
    var oFile = clientContext.get_web().getFileByServerRelativeUrl(_spPageContextInfo.serverRequestPath);
    var limitedWebPartManager = oFile.getLimitedWebPartManager(SP.WebParts.PersonalizationScope.shared);
    var collWebPart = limitedWebPartManager.get_webParts();

    clientContext.load(collWebPart);
    clientContext.executeQueryAsync(Function.createDelegate(this, function () {
        var webPartDef = null;
        for (var x = 0; x < collWebPart.get_count() && !webPartDef; x++) {
            var temp = collWebPart.get_item(x);
            if (temp.get_id().toString() === wpId) {
                webPartDef = temp;
            }
        }
        if (!webPartDef) {
            dfd.reject("Web Part: " + wpId + " not found on page: " + _spPageContextInfo.webServerRelativeUrl);
            return;
        }

        var webPartProperties = webPartDef.get_webPart().get_properties();
        clientContext.load(webPartProperties);
        clientContext.executeQueryAsync(Function.createDelegate(this, function () {
            dfd.resolve(webPartProperties, webPartDef, clientContext);
        }), Function.createDelegate(this, function () { dfd.reject("Failed to load web part properties"); }));
    }), Function.createDelegate(this, function () { dfd.reject("Failed to load web part collection"); }));

    return dfd.promise();
}
3
  • While this is certainly a cleaner option, it's still not a pretty solution. So I take it there's no way to correctly query the webpart properties from jsom?
    – Etheryte
    Commented Jan 19, 2015 at 19:26
  • @Nit I am not sure. There might be ways to do it using JSOM, but that require a good amount of coding. The approach I suggested is a workaround to get the task done. Commented Jan 19, 2015 at 19:27
  • Thanks, reading the comments on the linked article I found a good solution: using clientContext.load(collWebPart, 'Include(WebPart.Properties)');.
    – Etheryte
    Commented Jan 20, 2015 at 11:22
0

Another alternative solution that I came across is to serialize the properties I'm interested in and insert them as a script.

protected override void OnPreRender(EventArgs e)
{
    base.OnPreRender(e);
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    string json = serializer.Serialize(properties);
    Page.ClientScript.RegisterStartupScript(this.GetType(), "", "MyPrefix = { Data: " + json + "};", true);
}

While this also doesn't answer the problem via jsom, at least the properties are available instantly in Javascript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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