OX6:Gui Plugin Development
Introduction
With Open-Xchange SP4 you will be able to add you own JavaScript Code for existing events. The follwoing examples show how you can add your own About page, your own Window Title, and your own message for not activated/bought components of OX (Upsell Message).
Setup and file description
Two things have to be done to register your own JavaScript Code within the server:
1. You have to create the property file in /opt/open-xchange/etc/groupware/, for example myjscode.properties. The file should have the following value:
modules/$NAME/enabled=true
$NAME is equal to the filename of the property file, in our case it would be:
modules/myjscode/enabled=true
This will enable the JS Code located in $WEBSRV/ox6/plugins/$NAME (for example /var/www/ox6/plugins/myjscode/).
2. Next we have to create the folder that we had configured, in our example we would have to create:
mkdir /var/www/ox6/plugins/myjscode/
The server now will have a look at this directory and searches for the file register.js in this directory. All your JS enhancements should be written to that file.
3. Afterwards you have to restart the groupware server with:
/etc/init.d/open-xchange-groupware restart
Examples
Customized About page
/opt/open-xchange/etc/groupware/productinfo.properties:
# This program is free software; you can redistribute it and/or modify it # under the terms of the GNU General Public License, Version 2 as published # by the Free Software Foundation. # # Copyright (C) 2004-2007 Open-Xchange, Inc. # Mail: info@open-xchange.com # # @author: Stefan Preuss <stefan.preuss@open-xchange.com> modules/productinfo/enabled=true
/var/www/ox6/plugins/productinfo/register.js:
/** * * This program is free software; you can redistribute it and/or modify it * under the terms of the GNU General Public License, Version 2 as published * by the Free Software Foundation. * * Copyright (C) 2004-2007 Open-Xchange, Inc. * Mail: info@open-xchange.com * * @author: Stefan Preuss <stefan.preuss@open-xchange.com> * */ oxProductInfo.vendor_address = "Open-Xchange GmbH\nMartinstrasse 41\n57462 Olpe\nE-Mail: info@open-xchange.com\n<a href=\"http://www.open-xchange.com\" target=\"_blank\">www.open-xchange.com</a>"
Customized Window Title
/opt/open-xchange/etc/groupware/windowtitle.properties:
# This program is free software; you can redistribute it and/or modify it # under the terms of the GNU General Public License, Version 2 as published # by the Free Software Foundation. # # Copyright (C) 2004-2007 Open-Xchange, Inc. # Mail: info@open-xchange.com # # @author: Stefan Preuss <stefan.preuss@open-xchange.com> modules/windowtitle/enabled=true
/var/www/ox6/plugins/windowtitle/register.js:
/**
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License, Version 2 as published
* by the Free Software Foundation.
*
* Copyright (C) 2004-2007 Open-Xchange, Inc.
* Mail: info@open-xchange.com
*
* @author: Stefan Preuss <stefan.preuss@open-xchange.com>
*
*/
oxProductInfo.product_name = "This is the fabulous Open-Xchange Server";
try {
window.document.title = oxProductInfo.product_name;
} catch (e) { }
Customized Upsell Message
/opt/open-xchange/etc/groupware/upsell.properties:
# This program is free software; you can redistribute it and/or modify it # under the terms of the GNU General Public License, Version 2 as published # by the Free Software Foundation. # # Copyright (C) 2004-2007 Open-Xchange, Inc. # Mail: info@open-xchange.com # # Author: Stefan Preuss <stefan.preuss@open-xchange.com> # The following property enables the Upsell-Layer Plugin for the OX6 AJAX GUI modules/upsell/enabled=true
/var/www/ox6/plugins/upsell/register.js:
/**
*
* This program is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License, Version 2 as published
* by the Free Software Foundation.
*
* Copyright (C) 2004-2007 Open-Xchange, Inc.
* Mail: info@open-xchange.com
*
* @author: Stefan Preuss <stefan.preuss@open-xchange.com>
*
*/
/*
* Example for an Upsell-Layer
* The OX GUI triggers a special event if a user clicks on disabled features.
*/
/*
* Register to Upsell-Event
*/
register("Feature_Not_Available", showUpsellLayer);
/**
* Function to display an Upsell-Alert dialog
* @param feature String (optional) - Module description
* @param win Window (optional) - Only needed/given if we trigger the event from the new object windows
*/
function showUpsellLayer(feature, win) {
// setting corewindow to default if win is not defined
win = win || corewindow;
/*
* Build up the dialog content
* Note: You can also use myDiv.innerHTML!
*/
var myDiv = newnode("div",{ textAlign: "center", padding: "10px" }, 0, [
newnode("div", 0, { background: "url(http://www.example.com/img/header/logo.gif)" }, 0,
win.document),
newnode("span", 0, 0, [
document.createTextNode("Diese Funktion ist nur in Open-Xchange Premium verfügbar!") ],
win.document),
newnode("input", { marginTop: "10px"},
{ type: "button", onclick: function() { window.open("http://www.open-xchange.com") },
value: "Weitere Information zu Open-Xchange Premium!" }, 0,
win.document),
newnode("input", { marginTop: "10px"},
{ type: "button", onclick: function() { window.open("http://www.open-xchange.com") },
value: "Paket-Upgrade auf Open-Xchange Premium!" }, 0,
win.document)
], win.document);
// calling the newAlert function to open the dialog at the given window
win.newAlert("Hinweis " + feature, null, AlertPopup.close, myDiv);
}
/*
* Comment this out to change the grayed out module images in the upper left corner!
*/
/*
if (!document.getElementById("sp_c_portal").src.match(/mod_portal_sel.gif$/)) {
document.getElementById("sp_c_portal").src = getFullImgSrc("img/portal/mod_portal.gif");
}
document.getElementById("sp_c_calendar").src = getFullImgSrc("img/calendar/mod_calendar.gif");
document.getElementById("sp_c_tasks").src = getFullImgSrc("img/tasks/mod_tasks.gif");
document.getElementById("sp_c_infostore").src = getFullImgSrc("img/infostore/mod_infostore.gif");
*/
