AppSuite:Modifying forms by using extension points: Difference between revisions

From Open-Xchange
No edit summary
Line 1: Line 1:
'''Summary:''' This articles covers how to apply different changes to forms via modifying its extensionpoints and extensions.
'''Summary:''' This articles covers how to apply different changes to the contact form via modifying its extensionpoints and extensions.


The edit contact form of the contacts app is constructed by a set of extensionpoints.
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.
Each extensionpoint controls a single aspect of the contact.
    
    
To apply modifications the id of the point and the extension is needed.
To apply modifications the id of the point and the extension is needed.

Revision as of 12:06, 11 April 2013

Summary: This articles covers how to apply different changes to the contact form 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 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 Hands-on_introduction extensionpoints can be modified in multiple aspects.

some examples for modification

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