JavaScript: Property and Property Bag

sp.property-bag.js

var iVision = iVision || {};

/**
 * Requires SP.js & SP.Runtime.js
 * 
 */
(function (window) {
	"use strict";

    /**
	 * Property Bag
	 * @param {string}		siteUrl		The web in question.
	 * 
	 */
	function PropertyBag(siteUrl) {
	    var ctx = GetWebPropertiesContext(siteUrl);
	    this.siteUrl = siteUrl;

	    this.properties = ctx.properties;
	    this.clientCtx = this.ClientContext = ctx.clientCtx;
	    this.web = ctx.web;
	};

    /**
	 *  Sets a specific property
	 *  
	 *  @see GetWebPropertiesContext
	 *  @param {string}		siteUrl		The web in question.
	 *  @param {string}		property	The web property to be set.
	 *  @returns {boolean}				Whether the property is available.
	 */
	PropertyBag.prototype.IsWebPropertyAvailable = function (property) {
	    var d = GetWebPropertiesContext(this.siteUrl);
	    return d.properties.isPropertyAvailable(property);
	};

    /**
	 *  Gets a specific property
	 *  
	 *  @see GetWebPropertiesContext
	 *  @param {string}		siteUrl		The web in question.
	 *  @param {string}		property	The web property to be set.
	 *  @param {function}	failure		Failure callback.
	 *  @param {string}					Value of a specific property.
	 */
	PropertyBag.prototype.GetWebProperty = function (property) {
	    var d = GetWebPropertiesContext(this.siteUrl);
	    return d.properties.get_item(property);
	};

    /**
	 *  Adds a specific property to a specific site/web.
	 *  
	 *  @see SetWebProperty
	 *  @param {string}		siteUrl		The web in question.
	 *  @param {string}		property	The web property to be set.
	 *  @param {string}		value		The value of the web property.
	 *  @param {function}	success		Success callback.
	 *  @param {function}	failure		Failure callback.
	 *  @param {object}		scope		Scope to set the call.
	 */
	PropertyBag.prototype.AddWebProperty = function (property, value, success, failure, scope) {
	    SetWebProperty(this.siteUrl, property, value, success, failure, scope);
	}

    /**
	 *  Removes a specific property from a specific site/web.
	 *  
	 *  @see SetWebProperty
	 *  @param {string}		siteUrl		The web in question.
	 *  @param {string}		property	The web property to be set.
	 *  @param {function}	success		Success callback.
	 *  @param {function}	failure		Failure callback.
	 *  @param {object}		scope		Scope to set the call.
	 */
	PropertyBag.prototype.RemoveWebProperty = function (property, success, failure, scope) {
	    SetWebProperty(this.siteUrl, property, null, success, failure, scope);
	}

    /**
     * PROPERTY CLASS
     * 
     * @param {} name 
     * @param {} value 
     * @param {} siteUrl 
     * @returns {} 
     */
	function Property(name, value, siteUrl) {

	    this.siteUrl = this.site = siteUrl || '';
	    this.propertyBag = new PropertyBag(siteUrl);
		this.name = name || '';
		this.value = value || '';
	    this.set(value);
		
	}

    /**
     * Gets the current Property Value.
     * @returns {mixed} Value of the Property.
     */
	Property.prototype.get = function () {
		return this.value;
	};

	/**
	 *  Sets a specific property
	 *  
	 *  @param {string}		siteUrl		The web in question.
	 *  @param {string}		property	The web property to be set.
	 *  @param {string}		value		The value of the web property.
	 *  @param {function}	success		Success callback.
	 *  @param {function}	failure		Failure callback.
	 *  @param {object}		scope		Scope to set the call.
	 */
	Property.prototype.set = function (value, success, failure, scope) {
		var t = typeof (value);

		if ('string' !== t) {
			switch (t) {
				case 'object':
					value = JSON.stringify(value);
					break;
				default:
					value = value.toString();
					break;
			}
		}

		this.propertyBag.properties.set_item(this.name, value);
		this.propertyBag.web.update();
		this.propertyBag.clientCtx.load(this.propertyBag.web);
		ExecutePropertyUpdate(this.propertyBag, success, failure, scope);
	};

    /*
     * Over-ride toString to output JSON object.
     */
    Property.prototype.toString = function() {
        return JSON.stringify(this);
    };

	
	/**
	 *  Sets a specific property
	 *  
	 *  @see IsWebPropertyAvailable
	 *  @param {string}		property	The web property to be set.
	 *  @returns {boolean}				Whether the property is available.
	 */
	Property.prototype.isAvailable = function() {
	    return this.propertyBag.IsWebPropertyAvailable(null, this.name);
	};

    /**
     * Remove property from the property bag.
     * 
	 * @param {function}	success		
	 * @param {function}	failure		Failure callback.
	 * @param {object}		scope		Scope to set the call.
     */
	Property.prototype.remove = function (success, failure, scope) {
		SetWebProperty(null, this.name, null, success, failure, scope);
	};

    /**
     * Resets the object to null
     */
	Property.prototype.destroy = function() {
		
		this.name = null;
		this.value = null;
		this.siteUrl = null;

	};

	/**
	 * PRIVATE METHODS
	 */

	/**
	 *  Gets the client context, loads the appropriate web, and the Web Property Bag (All Properties)
	 *  
	 *  @see 
	 *  @param {string}		siteUrl Site URL in question (e.g., https://domain.com)
	 *  @returns {object}			Object containing the SP client context object, SP Web object, 
	 *  							and the Web Properties.
	 */
	function GetWebPropertiesContext(siteUrl) {
		var clientContext = siteUrl ? new SP.ClientContext(siteUrl) : SP.ClientContext.get_current(),
			oWebsite = clientContext.get_web();
		clientContext.load(oWebsite);
		return {
			clientCtx: clientContext,
			web: oWebsite,
			properties: oWebsite.get_allProperties()
		};
	}

	/**
	 *  Sets a specific property
	 *  
	 *  @param {string}		siteUrl		The web in question.
	 *  @param {string}		property	The web property to be set.
	 *  @param {string}		value		The value of the web property.
	 *  @param {function}	success		Success callback.
	 *  @param {function}	failure		Failure callback.
	 *  @param {object}		scope		Scope to set the call.
	 */
	function SetWebProperty(siteUrl, property, value, success, failure, scope) {
		var d = GetWebPropertiesContext(siteUrl),
			t = typeof (value);
		if ('string' !== t) {
			switch (t) {
				case 'object':
					value = JSON.stringify(value);
					break;
				default:
					value = value.toString();
					break;
			}
		}
		d.properties.set_item(property, value);
		d.web.update();
		d.clientCtx.load(d.web);
		ExecutePropertyUpdate(d, success, failure, scope);
	}

	/**
	 *  Executes the Property Update.
	 *  Sanitizes the success and failure callbacks (ensures they are functions).
	 *  
	 *  @private
	 *  @param {object}		data		WebPropertiesContext object. See {@link GetWebPropertiesContext}
	 *  @param {function}	success		Success callback.
	 *  @param {function}	failure		Failure callback.
	 *  @param {object}		scope		Scope to set the call.
	 */
	function ExecutePropertyUpdate(data, success, failure, scope) {
		// Ensure success/failure are functions
		success = 'function' === typeof (success) ? success : function (sender, args) {
			console.log("Success");
		};
		failure = 'function' === typeof (failure) ? failure : function (sender, args) {
			console.log("Failure");
			console.log('Request failed. ' + args.get_message() +
				'\n' + args.get_stackTrace());
		};

		// Ensure a scope, default to global scope
		scope = scope ? scope : window;

		// Execute update!
		data.clientCtx.executeQueryAsync(
			Function.createDelegate(scope, success),
			Function.createDelegate(scope, failure)
		 );
	}

	window.iVision.Property = Property;
	window.iVision.PropertyBag = PropertyBag;

})(window);

sp.property-bagExample1.js

$(document).ready(function () {
    var scriptbase = _spPageContextInfo.webAbsoluteUrl + '/_layouts/15/';
    $.getScript(scriptbase + "SP.Runtime.js",
        function () {
            $.getScript(scriptbase + "SP.js", function () {
                // Create a new property Bag
                iVision.propertyBag = new iVision.PropertyBag(_spPageContextInfo.webAbsoluteUrl);
            });
        }
    );

});

sp.property-bagExample2.js

// Create a new property Bag, assuming SP.js and SP.Runtime.js are loaded
iVision.propertyBag = new iVision.PropertyBag(_spPageContextInfo.webAbsoluteUrl);