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']
}

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