AppSuite:Extending the UI (best practices) - Revision history

Khgras at 09:48, 22 May 2017

2017-05-22T09:48:18Z

Khgras at 09:43, 22 May 2017

2017-05-22T09:43:40Z

← Older revision		Revision as of 09:43, 22 May 2017
Line 82:		Line 82:
	* original requires function is replaced and can not be accessed anymore		* original requires function is replaced and can not be accessed anymore
	* also copy and paste it contents does not help cause future changes are not carried over automatically		* also copy and paste it contents does not help cause future changes are not carried over automatically
	* see [~~[AppSuite~~:~~Extending_the_UI#replace_extension \|~~ documentation for .replace ]]		* see [https://documentation.open-xchange.com/latest/ui/extension-points/02-points.html documentation for .replace ]
	<code>		<code>
	// please do not use replace to overwrite 'requires'		// please do not use replace to overwrite 'requires'

Frank.paczynski at 11:54, 10 February 2016

2016-02-10T11:54:21Z

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

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

Frank.paczynski at 06:48, 25 August 2015

2015-08-25T06:48:02Z

← Older revision		Revision as of 06:48, 25 August 2015
Line 56:		Line 56:
	// must be a different id than used in original extension		// must be a different id than used in original extension
	id: 'compose_preprocess',		id: 'compose_preprocess',
	// important: must be smaller than the one used in original extension		// important: must be smaller than the one used in original extension that is usually 'default'
	index: 50,		index: 50,
	requires: function (e) {		requires: function (e) {
	// is your condition meet?		// is your condition meet?
	if (myCondition = true) {		if (myCondition === true) {
	// stop propagation to suppress execution of		// stop propagation to suppress execution of
	// requires-handlers of extensions with a higher index		// requires-handlers of extensions with a higher index
Line 82:		Line 82:
	// please do not use replace to overwrite 'requires'		// please do not use replace to overwrite 'requires'
	ext.point('io.ox/mail/actions/compose').replace({		ext.point('io.ox/mail/actions/compose').replace({
	~~id: 'compose',~~
	requires: function () {		requires: function () {
	// my custom logic		// my custom logic
Line 89:		Line 88:
	</code>		</code>

			=== scenario: stop propagation of action ===

			''simply register a fresh new extension with an index less than the original action extension.''

			<code>
			// original extension
			new Action('io.ox/mail/actions/compose', {
			index: 100,
			requires: function () {
			return true;
			},
			...
			});

			// your extension to hide it
			ext.point('io.ox/mail/actions/compose').extend({
			// must be a different id than used in original extension that is usually 'default'
			id: 'compose_preprocess',
			// important: must be smaller than the one used in original extension
			index: 50,
			action: function (baton) {
			// be robust when clicked again and conditions may have changed
			baton.enable('default');
			if (myCondition === true) {
			baton.disable('default');
			}
			}
			});
			</code>

			'''hint'''
			In case the condition for a single action target (f.e. a mail item) do not change you can use 'baton.preventDefault()' alternatively when you condition is met.

	[[Category:AppSuite]]		[[Category:AppSuite]]
	[[Category:UI]]		[[Category:UI]]
	[[Category:Extension points]]		[[Category:Extension points]]

Frank.paczynski at 11:24, 12 August 2015

2015-08-12T11:24:38Z

← Older revision		Revision as of 11:24, 12 August 2015
Line 9:		Line 9:

	__TOC__		__TOC__

			=== scenario: writing extension in general ===

			''separate extension declaration and logic for reusability''

			* example: io.ox/mail/common-extensions.js and io.ox/mail/detail/view.js

			<code>
			var fnProcess = function (baton) { ... };
			// use function within some extension
			ext.point('io.ox/mail/detail/content').extend({
			id: 'links',
			index: 100,
			process: fnProcess
			});
			// use function within another extension
			ext.point('io.ox/mail/detail/content').extend({
			id: 'images',
			index: 100,
			process: fnProcess
			});

			</code>





	=== scenario: hide/show action ===		=== scenario: hide/show action ===

Frank.paczynski at 10:34, 12 August 2015

2015-08-12T10:34:03Z

← Older revision		Revision as of 10:34, 12 August 2015
Line 5:		Line 5:
	'''Abstract'''		'''Abstract'''

	''The ~~flexibility of the~~ extension points system ~~usually~~ allows ~~more than one strategy~~ to realize the desired ~~logic~~. This is a list of solutions for common scenarios ~~showing advantages or~~ disadvantages ''		''The extension points system allows different strategies to realize the desired behavior. This is a list of solutions for common scenarios pointing out also some disadvantages of different solutions.''


	__TOC__		__TOC__
	~~==Scenarios==~~

	=== hide/show action ===		=== scenario: hide/show action ===

	''simply register a fresh new extension with an index less than the original action extension.''		''simply register a fresh new extension with an index less than the original action extension.''
Line 38:		Line 37:
	// requires-handlers of extensions with a higher index		// requires-handlers of extensions with a higher index
	e.stopPropagation();		e.stopPropagation();
	// force hide (or force show ~~with~~ 'return true')		// force hide (or force show by using 'return true')
	return false;		return false;
	}		}
Line 46:		Line 45:


	'''~~common pitfalls~~'''		'''unfavorable variants'''

	''~~use~~ ext.point(...).replace''		''using ext.point(...).replace''

	* original requires function is replaced and can not be accessed anymore		* original requires function is replaced and can not be accessed anymore
Line 54:		Line 53:
	* see [[AppSuite:Extending_the_UI#replace_extension \| documentation for .replace ]]		* see [[AppSuite:Extending_the_UI#replace_extension \| documentation for .replace ]]
	<code>		<code>
			// please do not use replace to overwrite 'requires'
	ext.point('io.ox/mail/actions/compose').replace({		ext.point('io.ox/mail/actions/compose').replace({
	id: 'compose',		id: 'compose',
Line 59:		Line 59:
	// my custom logic		// my custom logic
	}		}
	})		})

	</code>		</code>

Frank.paczynski: Created page with "{{Stability-experimental}}
Extension points:
Best practices
'''Abstract''' ''The flexibility of the extension points system usually allows more..."

2015-08-12T10:19:03Z

Created page with "{{Stability-experimental}} <div class="title">Extension points:<br> Best practices</div> '''Abstract''' ''The flexibility of the extension points system usually allows more..."

New page

{{Stability-experimental}}

<div class="title">Extension points:<br> Best practices</div>

'''Abstract'''

''The flexibility of the extension points system usually allows more than one strategy to realize the desired logic. This is a list of solutions for common scenarios showing advantages or disadvantages ''

__TOC__
==Scenarios==

=== hide/show action ===

''simply register a fresh new extension with an index less than the original action extension.''

<code>
// original extension
new Action('io.ox/mail/actions/compose', {
id: 'compose',
index: 100,
requires: function () {
return true;
},
...
});

// your extension to hide it
ext.point('io.ox/mail/actions/compose').extend({
// must be a different id than used in original extension
id: 'compose_preprocess',
// important: must be smaller than the one used in original extension
index: 50,
requires: function (e) {
// is your condition meet?
if (myCondition = true) {
// stop propagation to suppress execution of
// requires-handlers of extensions with a higher index
e.stopPropagation();
// force hide (or force show with 'return true')
return false;
}
}
});
</code>

'''common pitfalls'''

''use ext.point(...).replace''

* original requires function is replaced and can not be accessed anymore
* also copy and paste it contents does not help cause future changes are not carried over automatically
* see [[AppSuite:Extending_the_UI#replace_extension | documentation for .replace ]]
<code>
ext.point('io.ox/mail/actions/compose').replace({
id: 'compose',
requires: function () {
// my custom logic
}
})

</code>

[[Category:AppSuite]]
[[Category:UI]]
[[Category:Extension points]]