AppSuite:Modifying forms by using extension points - Revision history

Khgras at 09:30, 22 May 2017

2017-05-22T09:30:26Z

← Older revision		Revision as of 09:30, 22 May 2017
Line 1:		Line 1:
	~~<!-- !!! -->~~		The content on this page has moved to https://documentation.open-xchange.com/latest/ui/customize/forms.html
	~~<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION~~: ~~wd/frontend~~/~~web~~/documentation -->
	~~<!-- !!! -->~~

	~~{{Stability~~-~~experimental}}~~		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.

	~~<div class="title">Extension points:<br>Modifying forms</div>~~

	~~'''Abstract'''~~

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


	~~__TOC__~~
	~~==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 extension points==~~

	~~As described in [[ AppSuite:Extending_the_UI_(Hands-on_introduction) \| Hands-on_introduction]] extension points 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')~~
	~~.replace({~~
	~~id:"display_name",~~
	~~index: 50~~
	~~});~~
	~~</pre>~~

	~~<pre class="language-javascript">~~
	~~// modify the hidden status to hide the display_name field via get() as alternative way~~
	~~require('io.ox/core/extensions').point('io.ox/contacts/edit/personal')~~
	~~.get('display_name', function (extension) {~~
	~~extension.hidden = true;~~
	~~});~~
	~~</pre>~~

	~~==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:~~

	~~<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]]~~
	~~[[Category:Extension points]]~~

Frank.paczynski at 12:46, 10 February 2016

2016-02-10T12:46:47Z

← Older revision		Revision as of 12:46, 10 February 2016
Line 1:		Line 1:
			<!-- !!! -->
			<!-- PLEASE APPLY CHANGES ONLY TO THE NEW TECHNICAL DOCUMENTATION: wd/frontend/web/documentation -->
			<!-- !!! -->

	{{Stability-experimental}}		{{Stability-experimental}}

Tierlieb: /* Extending the form validation via extension points */

2013-05-08T10:05:22Z

Extending the form validation via extension points

← Older revision		Revision as of 10:05, 8 May 2013
Line 94:		Line 94:
	[[Category:AppSuite]]		[[Category:AppSuite]]
	[[Category:UI]]		[[Category:UI]]
	[[Category:Extension ~~point~~]]		[[Category:Extension points]]

Tierlieb: /* Extending the form validation via extension points */

2013-05-08T10:04:04Z

Extending the form validation via extension points

← Older revision		Revision as of 10:04, 8 May 2013
Line 94:		Line 94:
	[[Category:AppSuite]]		[[Category:AppSuite]]
	[[Category:UI]]		[[Category:UI]]
			[[Category:Extension point]]

Tierlieb at 14:31, 25 April 2013

2013-04-25T14:31:30Z

← Older revision		Revision as of 14:31, 25 April 2013
Line 1:		Line 1:
			{{Stability-experimental}}

	<div class="title">Extension points:<br>Modifying forms</div>		<div class="title">Extension points:<br>Modifying forms</div>
	~~{{Status-Draft}}~~

	'''Abstract'''		'''Abstract'''

Tierlieb: added draft warning...

2013-04-22T14:15:59Z

added draft warning...

← Older revision		Revision as of 14:15, 22 April 2013
Line 1:		Line 1:
	<div class="title">Extension points:<br>Modifying forms</div>		<div class="title">Extension points:<br>Modifying forms</div>
			{{Status-Draft}}

	'''Abstract'''		'''Abstract'''

Frank.paczynski at 11:54, 18 April 2013

2013-04-18T11:54:19Z

← Older revision		Revision as of 11:54, 18 April 2013
Line 1:		Line 1:
	<div class="title">Extension points: Modifying forms</div>		<div class="title">Extension points:<br>Modifying forms</div>

	'''Abstract'''		'''Abstract'''

Frank.paczynski at 11:52, 18 April 2013

2013-04-18T11:52:54Z

← Older revision		Revision as of 11:52, 18 April 2013
Line 1:		Line 1:
	<div class="title">Modifying forms ~~by using extension points~~</div>		<div class="title">Extension points: Modifying forms</div>

	'''Abstract'''		'''Abstract'''

Christoph.kopp at 12:46, 12 April 2013

2013-04-12T12:46:16Z

← Older revision		Revision as of 12:46, 12 April 2013
Line 7:		Line 7:

	__TOC__		__TOC__

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

Christoph.kopp at 12:46, 12 April 2013

2013-04-12T12:46:04Z

← Older revision		Revision as of 12:46, 12 April 2013
Line 7:		Line 7:

	__TOC__		__TOC__


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