Difference between revisions of "AppSuite:Demo"
Line 45: | Line 45: | ||
var ext = require("io.ox/core/extensions"); | var ext = require("io.ox/core/extensions"); | ||
ext.point("io.ox/calendar/detail").enable("participants"); | ext.point("io.ox/calendar/detail").enable("participants"); | ||
+ | </pre> | ||
+ | |||
+ | ===Customize existing extension=== | ||
+ | <pre class="language-javascript"> | ||
+ | ext.point("io.ox/calendar/detail/date").extend({ | ||
+ | id: "highlight", | ||
+ | index: 'last', | ||
+ | draw: function () { | ||
+ | this.css({ | ||
+ | backgroundColor: "yellow", | ||
+ | padding: "3px", | ||
+ | border: "1px solid #fc0" | ||
+ | }); | ||
+ | } | ||
+ | }); | ||
+ | </pre> | ||
+ | |||
+ | ===Replace existing extension=== | ||
+ | <pre class="language-javascript"> | ||
+ | var ext = require("io.ox/core/extensions"); | ||
+ | ext.point("io.ox/calendar/detail").replace({ | ||
+ | id: "title", | ||
+ | draw: function (data) { | ||
+ | this.append( | ||
+ | $("<div>").addClass("title").text("Hello World! " + data.title) | ||
+ | ); | ||
+ | } | ||
+ | }); | ||
</pre> | </pre> |
Revision as of 19:02, 24 April 2013
Demo Stuff
Contents
Extension points
Add advertisement banner to mail detail view
var ext = require("io.ox/core/extensions"); ext.point('io.ox/mail/detail').extend({ index: 180, id: 'ad', draw: function (data) { this.append( $("<div>") .css({ backgroundImage: "url(http://upload.wikimedia.org/wikipedia/commons/b/b0/Qxz-ad39.png)", width: '468px', height: "60px", margin: "0px auto 20px auto" }) ); } });
Add your own extension
// calendar detail view var ext = require("io.ox/core/extensions"); ext.point("io.ox/calendar/detail").extend({ index: 10, id: "dreiChinesen", draw: function (appointment) { var psuedoChineseTitle = appointment.title.replace(/[aeiou]/g, "o"); var $titleNode = $("<h2>").text(psuedoChineseTitle); return this.append($titleNode); } });
Disable and re-enable
// Disable participants var ext = require("io.ox/core/extensions"); ext.point("io.ox/calendar/detail").disable("participants"); // Re-enable participants var ext = require("io.ox/core/extensions"); ext.point("io.ox/calendar/detail").enable("participants");
Customize existing extension
ext.point("io.ox/calendar/detail/date").extend({ id: "highlight", index: 'last', draw: function () { this.css({ backgroundColor: "yellow", padding: "3px", border: "1px solid #fc0" }); } });
Replace existing extension
var ext = require("io.ox/core/extensions"); ext.point("io.ox/calendar/detail").replace({ id: "title", draw: function (data) { this.append( $("<div>").addClass("title").text("Hello World! " + data.title) ); } });