AppSuite:Creating a settings section in AppSuite settings

Creating a settings section in AppSuite settings

This article explains how to add an settings section into AppSuite settings. You can also implement your own settings using iframes.

Folder structure

Assuming you got an app or plugin in a folder like com.example/helloWorld for which you want to implement settings in AppSuite, you will need a new subfolder called settings. So com.example/helloWorld/settings will prospectively contain the files managing your settings.

File Structure

Manifest

Creating a manifest is quite easy, writing the following into com.example/helloWorld/settings/manifest.json to load your settings, once AppSuite loads it's settings

{
    namespace: ['io.ox/settings/main']
}

Defaults

com.example/helloWorld/settings/defaults.js should contain your default settings, so an example setting the variable exampleBoolean to false and exampleInteger to 15 might be

define('com.example/helloWorld/settings/defaults', [], function () {
    
    'use strict';

    // define the default values for your settings here
    var settingsDefaults = {
        exampleBoolean: false,
        exampleInteger: 15
    };

    return settingsDefaults;
});

Model

com.example/helloWorld/settings/model.js contains an example of a simple default model, which you can use for your first settings

define('plugins/mail/AdvertOxMail/settings/model',
      ['settings!plugins/mail/AdvertOxMail'], function (settings) {

    'use strict';

    // Very simple default model
    var exampleModel = Backbone.Model.extend({
        initialize: function (options) {

        },

        save: function () {
            settings.save(this.attributes);
        },

        destroy: function () {

        }
    });
    return exampleModel;
});

Register

Create a file called com.example/helloWorld/settings/register.js to extend the AppSuite settings and implement your own.

The Head should look like this:

define("com.example/helloWorld/settings/register",
        ['io.ox/core/extensions',
         'settings!com.example/helloWorld'
         ],
         function (ext, settings) {
    'use strict';

Extend the panel which stores the different setting categories:

    ext.point("io.ox/settings/pane").extend({
        id: 'com.example/helloWorld',
        title: 'Hello World Settings',
        ref: 'com.example/helloWorld',
        loadSettingPane: false,
        index: 400,
        lazySaveSettings: true
    });

And now extend the extension point which was established through reffering to com.example/helloWorld above. (ref: 'com.example/helloWorld')

    ext.point("com.example/helloWorld/settings/detail").extend({
        index: 50,
        id: 'extensions',
        draw: function () {
            var content=$('div').addClass('content');
            content.text('Add form elements to control your settings here');
            this.append(content);
        }
    });
});

Stuck somewhere?

You got stuck with a problem while developing? OXpedia might help you out with the article about debugging the UI.