AppSuite:Modifying forms by using extension points

Summary: This articles covers how to apply different changes to forms via modifying its extensionpoints and extensions.

The edit contact form of the contacts app is constructed by a set of extensionpoints. Each extensionpoint controls a single aspect - like the the input field for first name or the user picture - of the contact.

To apply modifications the id of the point and the extension is needed.

For a quick overview of the available extensionpoints and extensions you can use the browser console.

show available extensionpoints

 
// show all available extensionpoints
require('io.ox/core/extensions').keys();

 
// you can filter down the list by using regular expression 
_(require('io.ox/core/extensions').keys()).filter(function (point) {
    if (/io.ox\/contacts\/edit/.test(point)) {
        return point;
    }
});

show available extensions of a known point

 
// show all available extensions of a known extensionpoint
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();

As described in [Link for Extending the UI] extensionpoints can be modified in multiple aspects.

some examples for modification

 
// inspect a existing extension
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').inspect('first_name');

 
// disable a existing extension
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').disable('first_name');

// enable a existing extension
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').enable('first_name');

 
// replace a existing extension
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').replace({
    id: "first_name",
    draw: function () {
        this.append(
            $("<div>").addClass("title").text("Hello World!")
        );
    }
});

 
// modify the index to reorder a existing extension
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').get('first_name', function (extension) {
    extension.index = 500;
});

 
// modify the hidden status to hide a existing extension
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').get('first_name', function (extension) {
    extension.hidden = true;
});

extend the validation via extensionpoint

In addition to the default validation another validationstep can be implemented by extending the proper extensionpoint.

 
// extend the validation 
require('io.ox/core/extensions').point('io.ox/contacts/model/validation/first_name').extend({
    id: 'check_for_klaus',
    validate: function (value) {
        if (value !== 'Klaus') {
            return 'First name can only be Klaus';
       	}
    }
});