Add And Retrieve Property Bag Values In SharePoint Using JavaScript Object Model

Property bags in SharePoint act as a key value pair repository, where we can store the metadata values. The property bags more or less serve the same purpose of the app settings section in the Web Config file in ASP.NET, where we can store the configuration values. We can store the property bag values at different scopes in SharePoint like:

• Farm scope
• Web Application scope
• Site collection scope
• Site scope and
• List scope

The property bag values can be added using the SharePoint designer as well as programmatically. In this article, we will see how we can update and read the property bag values using the JavaScript object model.

Add Property Bag Value

• Add reference to jQuery file.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">

• Within the document, call ready function SP.SOD.executeFunc, so as to load the on demand script SP.js . Call the main starting point function, say: ModifyPropertyBag.
  

  SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ModifyPropertyBag);

• Instantiate the client context and get the Web instance. Once the Web object is retrieved, get the property bag collection.
  

  //Get Client Context and Web object.
  clientContext= new SP.ClientContext.get_current();
  varoWeb= clientContext.get_web();
  
  //Get property bag collection and set the new key value pair
  oPropBag= oWeb.get_allProperties();
  oPropBag.set_item("Updated Name", "Modified List");
  oWeb.update();

• Execute the batch which will send the request to the Server and perform the entire JavaScript object model operation as a batch. Loading of the client context is not necessary to update property bag.
  

  clientContext.executeQueryAsync(Success,Failure);

Full code

<script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<script language="javascript" type="text/javascript">
$(document)
    .ready(function()
    {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ModifyPropertyBag);
    });
varoList, oPropBag;

function ModifyPropertyBag()
{
    //Get Client Context and Web object.
    clientContext = new SP.ClientContext.get_current();
    varoWeb = clientContext.get_web();
    //Get property bag collection and set the new key value pair
    oPropBag = oWeb.get_allProperties();
    oPropBag.set_item("Updated Name", "Modified List");
    oWeb.update();
    //Execute the batch
    clientContext.executeQueryAsync(Success, Failure);
}

function Success()
{
    console.log('Property bag value created');
}

function Failure(sender, args)
{
    console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}
</script>

Read Property Bag Value

The property bags can be read using get_allPropertiesmethod. Once the property bag collection is retrieved, we can get the specific value, using the get_fieldValues method.

oPropBag= oWeb.get_allProperties();
console.log("Property Bag Value - "+oPropBag.get_fieldValues()["Updated Name"]);

We can test this in SharePoint by adding it to the Content Editor Web part, as shown below:  

• Save the code given below to a text file and save it into one of the SharePoint Libraries, say: Site Assets.
  

  <script language="javascript" type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
  <script language="javascript" type="text/javascript">
  
     $(document).ready(function() {
        SP.SOD.executeFunc('sp.js', 'SP.ClientContext', ReadPropertyBag);
     });
  
     varoList, oPropBag;
  
     function ReadPropertyBag() {
        //Get Client Context and Web object.
        clientContext= new SP.ClientContext.get_current();
        varoWeb= clientContext.get_web();
  
        //Get property bag collection
        oPropBag= oWeb.get_allProperties();
  
        //Load client context and execute the batch
        clientContext.load(oPropBag);
        clientContext.executeQueryAsync(Success,Failure);
     }
  
     function Success(){
        console.log("Property Bag Value - "+oPropBag.get_fieldValues()["Updated Name"]);
     }
  
     function Failure(sender, args) {
        console.log('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
     }
  </script>

• Go to the edit settings of the SharePoint page and click Web part from the insert tab.
  
  
  
  
• Add Content Editor Web part.
  
  
  
• Click edit Web art from Content Edit Web part. Assign the URL of the script text file and click apply.
  

Output

Click apply and check the console. It will read the property bag and display the value.



We saved the modified list as the value against the key updated name, which has been retrieved and displayed. In this article, we saw how we can save and retrieve the property bag values, using JavaScript object model.