|
|
| (19 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| <div class="title">Modifying forms via extension points</div>
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/customize/forms.html |
| __TOC__
| |
|
| |
|
| '''Summary:''' This articles covers how to apply different changes to the contact form via modifying its extensionpoints and extensions.
| | Note: Open-Xchange is in the process of migrating all its technical documentation to a new and improved documentation system (documentation.open-xchange.com). Please note as the migration takes place more information will be available on the new system and less on this system. Thank you for your understanding during this period of transition. |
| | |
| ==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:
| |
| | |
| <pre class="language-javascript">
| |
| // show all available extension points (across all apps)
| |
| require('io.ox/core/extensions').keys();
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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;
| |
| }
| |
| });
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // show all available extensions of a known extension point
| |
| require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();
| |
| </pre>
| |
| | |
| ==Modify extensionpoints==
| |
| | |
| As described in [[ AppSuite:Extending_the_UI_(Hands-on_introduction) | Hands-on_introduction]] extensionpoints can be modified in multiple aspects.
| |
| | |
| <pre class="language-javascript">
| |
| // 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');
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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!")
| |
| );
| |
| }
| |
| });
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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;
| |
| });
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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;
| |
| });
| |
| </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 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';
| |
| }
| |
| }
| |
| });
| |
| </pre>
| |
| | |
| [[Category:AppSuite]]
| |
| [[Category:UI]]
| |