Saturday, 29 September 2012

SharePoint 2013 App Settings

SharePoint 2013 introduce the new "App" platform  for each single update the new app deployed to the target site as new website  the url of the newly created App website will be something like

your appdomain-{version Number}.YourDomain.com

The interesting issue here , I was in the middle of developing SharePoint app and I wanted to store some application related configuration ,the application configuration will vary from user to another , below the steps i followed to provide the user such functionality

  1. create new aspx Settings page
using Napa Cloud app  https://www.napacloudapp.com  go to  Pages and click add new page


after selecting add new Item from the pages sub menu a popup div will appear to ask you which type you need to add we are able to select one of three types 
  1. Javascript File
  2. Css file
  3. ASPX file





Type in your aspx page name then 

  1. Add your layout html controls to the newly created settings.aspx page
after creating the appropriate layout of the settings page we need to load the settings and store them from a persistence storage

as I elaborated before , the SharePoint 2013 app is deployed as a standalone website so we can utilize the property bag of the website to store our application related settings

adding few lines in the App.js file will do the trick

$(document).ready(function () {
    SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);
});
// This function creates a context object which is needed to use the SharePoint object model
function sharePointReady() {
 = new SP.ClientContext.get_current();
 web = context.get_web();
 getUserName();
 readApplicationSettings();
}
function readApplicationSettings()
{
 this.props = web.get_allProperties();

  context.load(this.props);
 context.executeQueryAsync(Function.createDelegate(this, gotProperty), Function.createDelegate(this, failedGettingProperty));
}
function gotProperty() {
 
 //read the value and display it into the input text field txtSetting
 $("#txtSetting").val(this.props.get_item("AppSettingKey"));


}
function failedGettingProperty() {
 displayMessage('error','unable to retrieve applicaiton Settings',true);
}





to save the application setting we need to update the web site with the value we read from the text input field in the setting page

function saveSettings()
{
var context = new SP.ClientContext.get_current();
var web = context.get_web();
this.props=web.get_allProperties();

this.props.set_item("AppSettingKey", $("#txtSetting").val());

web.update();

context.executeQueryAsync(Function.createDelegate(this, onSettingsSaveSuccess), Function.createDelegate(this, onSettingsSaveFailure));

}
function onSettingsSaveSuccess()
{
alert("Application Setting Saved");
window.location="default.aspx";
}
function onSettingsSaveFailure()
{
alert("Error Saving the settings..!");
}




after saving the application setting value we redirect the user to the main application page (default.aspx)