AppSuite:Demo

Demo Stuff

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: "strange",
  draw: function (appointment) {
    var strangeTitle = appointment.title.replace(/[aeiou]/g, "o"),
        $titleNode = $("<h2>").text(strangeTitle);
    return this.append($titleNode);
  }
});

Disable extensions

 
// Disable participants
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").disable("participants");

Enable extensions

 
// 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)
    );
  }
});

Change order of existing extensions

 
// Shuffle extension order
var ext = require("io.ox/core/extensions");
ext.point("io.ox/calendar/detail").each(function (e) {
  e.index = Math.random() * 1000 >> 0;
}).sort();