API status: In Development

Extension points:
Modifying forms


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 (across all apps)
// 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

Modify extension points

As described in Hands-on_introduction extension points can be modified in multiple aspects:

// disable the display_name field

// reenable the display_name field
// replace the display_name field by "Hallo World!"
    id: "display_name",
    draw: function () {
            $("<div>").addClass("title").text("Hello World!")
// modify the index of the display_name field to bring it on top
    index: 50
// modify the hidden status to hide the display_name field via get() as alternative way
.get('display_name', function (extension) {
    extension.hidden = true;

Extending the form validation via extension points

In addition to the default validation, another validation step can be implemented by extending the proper extension point:

// extend the validation of the display_name field
    id: 'check_for_klaus',
    validate: function (value) {
        if (value !== 'Klaus') {
            return 'The display name has to be Klaus';