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

From Open-Xchange
No edit summary
 
(2 intermediate revisions by 2 users not shown)
Line 11: Line 11:
== File Structure ==
== File Structure ==
=== Manifest ===
=== Manifest ===
Creating a [[AppSuite:UI_manifests_explained | manifest]] is quite easy, writing the following into <code>com.example/helloWorld/settings/manifest.json</code> to load your settings, once AppSuite loads it's settings
Creating a [https://documentation.open-xchange.com/latest/ui/customize/manifests.html manifest] is quite easy, writing the following into <code>com.example/helloWorld/settings/manifest.json</code> to load your settings, once AppSuite loads it's settings


<pre class="language-javascript">
<pre class="language-javascript">
Line 80: Line 80:
     ext.point("io.ox/settings/pane").extend({
     ext.point("io.ox/settings/pane").extend({
         id: 'com.example/helloWorld',
         id: 'com.example/helloWorld',
         title: 'Hello World Settings,
         title: 'Hello World Settings',
         ref: 'com.example/helloWorld',
         ref: 'com.example/helloWorld',
         loadSettingPane: false,
         loadSettingPane: false,
Line 104: Line 104:


== Stuck somewhere? ==
== Stuck somewhere? ==
You got stuck with a problem while developing? OXpedia might help you out with the article about [[AppSuite:Debugging_the_UI | debugging the UI]].
You got stuck with a problem while developing? OXpedia might help you out with the article about [https://documentation.open-xchange.com/latest/ui/miscellaneous/debugging.html debugging the UI].

Latest revision as of 10:00, 22 May 2017

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.