SharePoint 2013 App Settings
On
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
- 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
- Javascript File
- Css file
- ASPX file
Type in your aspx page name then
- 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
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
$(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);
}
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)
