Difference between revisions of "AppSuite:Modifying forms by using extension points"
(→some examples for modification) |
|||
Line 53: | Line 53: | ||
</pre> | </pre> | ||
+ | ==extend the validation via extensionpoint== | ||
+ | In addition to the default validation another validationstep can be implemented by extending the proper extensionpoint. | ||
+ | |||
+ | <pre class="language-javascript"> | ||
+ | // 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'; | ||
+ | } | ||
+ | } | ||
+ | }); | ||
+ | </pre> | ||
[[Category:AppSuite]] | [[Category:AppSuite]] | ||
[[Category:UI]] | [[Category:UI]] |
Revision as of 10:52, 11 April 2013
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.
Contents
available extensionpoints
// get 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; } });
available extensions of a known point
// get all available extensions of a known extensionpoint require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();
some examples for modification
// 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').replace({ id: "first_name", index: 500 });
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'; } } });