Difference between revisions of "AppSuite:Extending the UI (best practices)"

(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...")
 
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>
  

Revision as of 10:34, 12 August 2015

API status: In Development

Extension points:
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
       } 
   })