Show property bag values (web properties) in content editor webpart - SharePoint 2010

Introduction

Showing the property bag values of a site  in a content editor Web Part using JavaScript. 

Background  

The property bag values can be called as web/site properties for a particular site.

We can see the property bag values from the SharePoint designer or you can use power shell command to see it.

In SharePoint designer , the property bag values can be seen in the site options, like the below.

Using the code 

Using JavaScript, fetching the properties and putting the scripts in a content editor webpart. 

Use the below JavaScript code.

Here i am showing my custom property bag called 'mycustomproperty'. 

<script language='javascript' type='text/javascript'>

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

var webProperties;

function getvalue(value)
{
 return webProperties.get_item((value));

}

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() {

var allProps = webProperties.get_fieldValues();


document.getElementById('lblName').innerHTML= webProperties.get_item('mycustomproperty');

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;
 }
 
}

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

</script>

<label style="font-weight:bold" id="lblName"></label> <br/>

Add this javascript code (including the label) in the content editor webpart's html source.