Accessing the web property bag with JavaScript

A useful, but largely unknown, feature in SharePoint is the Property Bag. The Property bag is place where site-wide settings can be kept. It is implemented as a collection of name/value pairs. The reason it is largely unknown is that it is not visible from the user interface, nor can it be seen using SharePoint Designer. It can only be accessed by developers, or by administrators using a tool like SharePoint Manager.

In SharePoint 2007, using the Property Bag in an application meant writing C# code, deployed to the server. SharePoint 2010 gives us a couple of options to access the property bag without managed code on the server. These are sandbox solutions and the Client Object Model.

Accessing the Property Bag using the JavaScript Client Object Model is a straightforward process, as the API has this ability built in:

 //wait until client object model dependencies are loaded before executing our code
ExecuteOrDelayUntilScriptLoaded(getWebProperties, "sp.js");

var webProperties;

function getWebProperties() {
    var clientContext = new SP.ClientContext.get_current();
    webProperties = clientContext.get_web().get_allProperties();
    clientContext.load(webProperties);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.getWebPropertiesSucceeded), Function.createDelegate(this, this.onQueryFailed));
}

function getWebPropertiesSucceeded() {

          //debugger; //use this to force a break here
	//returns an object with all properties.  
          //Use the quick watch to expand this out to see all of them.
	var allProps = webProperties.get_fieldValues();

	var customProp = "";

         //make sure the property is there before using it.
	if(webProperties.get_fieldValues().CustomSite_Version != undefined)
	{
		var customProp = webProperties.get_fieldValues().CustomSite_Version;
	}
	alert(customProp);
}

function onQueryFailed(args, sender)
{
     //handle errors here
}

I have not discovered a way to iterate through the web properties like you can with a .Net object, but you can view all of the web properties using the debugger by opening a watch on the webProperties.get_fieldValues() expression:

Here we can see all the site’s properties, including a custom web property I have added: CustomSite_Version.

To fetch a particular property in code, first ensure it is not undefined, then call it much like a .Net-style property:

var customProp = webProperties.get_fieldValues().CustomSite_Version;
Advertisements

9 thoughts on “Accessing the web property bag with JavaScript

  1. Hi, you can iterate through the web properties with an loop: β€œfor (property in allProperties){…}” At my website you can get a script where i use it for example. Btw. nice blog!

    Like

    • No, I never found a way to delete, add or modify web properties, just read them. But I didn’t have that requirement so I didn’t look that hard. I suspect it isn’t possible, but I would check out the OOB web services if I had to do that. Good luck!

      Like

      • I just discovered you can manipulate web properties through SharePoint Designer. If you Fiddle it you’ll see it makes a call to _vti_aut/author.dll. If you can figure out how to make that call from javascript, you’ll be able to do add/modify/delete web properties.

        Like

  2. Pingback: Accessing and Manipulating Property Bags via the ECMAScript Client Object Model | Second Life of a Hungarian SharePoint Geek

    • Thanks Peter,

      I’m a big fan of your blog by the way!

      For SharePoint 2013 and O365 I would now use the REST API. It’s much simpler, and you can view properties directly in the browser which is a huge advantage. I would update this post to reflect that, but, well, you know how that goes… πŸ™‚

      Like

  3. To delete a Web-Property simply set it to null and update the web-object.
    var clientContext = SP.ClientContext.get_current();
    var web = clientContext.get_site().get_rootWeb();
    clientContext.load(web);
    webProperties = web.get_allProperties();
    webProperties.set_item(‘YourKey’,null);
    web.update();

    clientContext.load(webProperties);

    clientContext.executeQueryAsync(
    function () {
    alert(‘done’);
    },
    function (sender, args) {
    alert(“Request to delete web property failed. ” + ‘\n’ + args.get_message() + ‘\n’ + args.get_stackTrace());
    });

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s