|
|
| (38 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| '''Summary:''' This articles covers how to apply different changes to forms via modifying its extensionpoints and extensions.
| | The content on this page has moved to https://documentation.open-xchange.com/latest/ui/customize/forms.html |
|
| |
|
| The edit contact form of the contacts app is constructed by a set of extensionpoints.
| | 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. |
| 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.
| |
| | |
| ==show available extensionpoints==
| |
| | |
| <pre class="language-javascript">
| |
| // show all available extensionpoints
| |
| 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>
| |
| | |
| ==show available extensions of a known point==
| |
| | |
| <pre class="language-javascript">
| |
| // show all available extensions of a known extensionpoint
| |
| require('io.ox/core/extensions').point('io.ox/contacts/edit/personal').all();
| |
| </pre>
| |
| | |
| | |
| | |
| As described in [[ AppSuite:Extending_the_UI_(Hands-on_introduction) | Hands-on_introduction]] extensionpoints can be modified in multiple aspects.
| |
| | |
| ==some examples for modification==
| |
| | |
| | |
| <pre class="language-javascript">
| |
| // 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');
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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!")
| |
| );
| |
| }
| |
| });
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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;
| |
| });
| |
| </pre>
| |
| | |
| <pre class="language-javascript">
| |
| // 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;
| |
| });
| |
| </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:UI]]
| |