AppSuite:Extending the UI (best practices): Difference between revisions
From Open-Xchange
(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...") |
No edit summary |
||
Line 5: | Line 5: | ||
'''Abstract''' | '''Abstract''' | ||
''The | ''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__ | ||
=== 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 | // force hide (or force show by using 'return true') | ||
return false; | return false; | ||
} | } | ||
Line 46: | Line 45: | ||
''' | '''unfavorable variants''' | ||
'' | ''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> | ||
Revision as of 10:34, 12 August 2015
API status: In Development
Extension points:
Best practices
Best practices
Abstract
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.
scenario: hide/show action
simply register a fresh new extension with an index less than the original action extension.
// 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 by using 'return true')
return false;
}
}
});
unfavorable variants
using 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 documentation for .replace
// please do not use replace to overwrite 'requires'
ext.point('io.ox/mail/actions/compose').replace({
id: 'compose',
requires: function () {
// my custom logic
}
})