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/header').extend({
  index: 'first',
  id: 'ad',
  draw: function (data) {
    var url = "http://upload.wikimedia.org/wikipedia/de/thumb/" + 
        "c/cb/Logo_Burger_King.svg/200px-Logo_Burger_King.svg.png"
    this.append(
      $('<div class="pull-right">')
      .css({
        backgroundImage: "url(" + url + ")",
        backgroundSize: '100px 100px',
        width: '100px', height: '100px',
        margin: '0px 0px 40px 10px',
      })
    );
  }
});

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 class="title">').css('color', '#a00').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();