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

From Open-Xchange
mNo edit summary
Line 4: Line 4:
'''Summary:''' This articles covers how to apply different changes to the contact form 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.


==Show available extensionpoints==
==Show available extension points==


The edit contact form of the contacts app is constructed by a set of extensionpoints.
The edit form of the contacts app is constructed by a set of extension points. Each extension point controls a single aspect of the form. To apply modifications, the id of the point and the extension is needed. For a quick overview of the available points and extensions you can use the browser console:
Each extensionpoint controls a single aspect of the form.  
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.


<pre class="language-javascript">  
<pre class="language-javascript">  
// show all available extensionpoints
// show all available extension points
require('io.ox/core/extensions').keys();
require('io.ox/core/extensions').keys();
</pre>
</pre>
Line 26: Line 23:


<pre class="language-javascript">  
<pre class="language-javascript">  
// show all available extensions of a known extensionpoint
// show all available extensions of a known extension-point
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();
</pre>
</pre>

Revision as of 14:05, 11 April 2013

Modifying forms via extension points

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

Show available extension points

The edit form of the contacts app is constructed by a set of extension points. Each extension point controls a single aspect of the form. To apply modifications, the id of the point and the extension is needed. For a quick overview of the available points and extensions you can use the browser console:

 
// show all available extension points
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 all available extensions of a known extension-point
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();

Modify extensionpoints

As described in Hands-on_introduction extensionpoints can be modified in multiple aspects.

 
// disable the display_name field
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').disable('display_name');

// reenable the display_name field
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').enable('display_name');
 
// replace the display_name field by "Hallo World!"
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').replace({
    id: "display_name",
    draw: function () {
        this.append(
            $("<div>").addClass("title").text("Hello World!")
        );
    }
});
 
// modify the index of the display_name field to bring it on top
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').get('display_name', function (extension) {
    extension.index = 50;
});
 
// modify the hidden status to hide the display_name field
require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').get('display_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 of the display_name field
require('io.ox/core/extensions').point('io.ox/contacts/model/validation/display_name').extend({
    id: 'check_for_klaus',
    validate: function (value) {
        if (value !== 'Klaus') {
            return 'The display name has to be Klaus';
       	}
    }
});