AppSuite:Creating a settings section in AppSuite settings: Difference between revisions

From Open-Xchange
(Created page with "<div class="title">Creating a settings section in AppSuite settings</div> This article explains how to add an settings section into AppSuite settings. You can also AppSuite...")
 
Line 53: Line 53:
             var content=$('div').addClass('content');
             var content=$('div').addClass('content');
             content.text('Add form elements to control your settings here');
             content.text('Add form elements to control your settings here');
    this.append(content);
            this.append(content);
         }
         }
     });
     });
});
});
</pre>
</pre>

Revision as of 11:16, 24 October 2013

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