Difference between revisions of "Creating a module"

Revision as of 11:06, 29 September 2008

Guidelines

Javascript: Put each component in a separate file to keep code clean and small. Files will be merged into one minified file anyway.

Start files with a capital letter and each word too (eg. CompanyDialog.js).

Put everything into it's module namespace. (eg. GO.addressbook, GO.addressbook.CompanyDialog)

Make all panels reusable if possible. Avoid multiple components that do almost the same. Make one that is configurable for all cases.

Creating a Group-Office module

Create a folder in the modules folder. Give it a name without special characters. In this example:

modules/mymodule/

Also create:

modules/mymodule/language
modules/mymodule/themes/
modules/mymodule/themes/Default
modules/mymodule/themes/Default/images/

Create the file:

modules/mymodule/themes/Default/style.css

/* This class is used to show the icon in the main tabpanel of GO */
.go-module-icon-mymodule {
	background-image: url('images/mymodule.png') !important;
}
/* This class is used to show the icon of a mymodule when it's linked to something */
.go-link-icon-10 {
	background-image: url('images/mymodule.png') !important;
	width:16px;
	height:16px;
}

for the module styles. This stylesheet is included automatically by the Group-Office framework.

Create the file:

modules/mymodule/scripts.txt:
modules/mymodule/TaskDialog.js
modules/mymodule/MainPanel.js

This file is used by Group-Office to determine this is a valid module and it will include the scripts in this file. Without this file your module will never work!

Now we will create the main panel of the module. A GO module is an extension of an Ext Panel. So it can be put in any other Ext container.

MainPanel.js:

Ext.namespace('GO.mymodule');
 
GO.mymodule.MainPanel = function(config){
	
	if(!config)
	{
		config = {};
	}
	
	GO.mymodule.MainPanel.superclass.constructor.call(this);
}

Ext.extend(GO.mymodule.MainPanel, Ext.Panel,{
	
	
});

/*
 * This will add the module to the main tabpanel filled with all the modules
 */
GO.moduleManager.addModule('mymodule', GO.mymodule.MainPanel, {
	title : 'Mymodule',
	iconCls : 'go-module-icon-mymodule'
});

/*
 * If your module has a linkable item, you should add a link handler like this. 
 * The index (no. 12 in this case) should be a unique identifier of your item.
 * See classes/base/links.class.inc for an overview.
 * 
 * Basically this function opens a task window when a user clicks on it from a 
 * panel with links. 
 */
GO.linkHandlers[12]=function(id){
	
	var taskDialog = new GO.mymodule.TaskDialog();
	 
	taskDialog.show({task_id: id});
}

Now we have a very simple module that is only an empty panel. Now it's up to you to add some usefull functionality. Everything that works in the ExtJS framework works in GO. Do study the Ext extensions we already created for GO in the documentation.

Putting custom fields in module items

Create a file called 'scripts.inc.php' in the module directory. A script with this name will automatically be included by the Group-Office framework. Put this in it:

<?php
require_once($GO_MODULES->modules['customfields']['class_path'].'customfields.class.inc.php');
$cf = new customfields();
echo $cf->get_javascript(3, 'Companies');

The link type in this case is 3. The name for these custom fields is 'Companies'. Now we can mange the fields in the Custom fields admin module. Now you can add them to a tabpanel for example: In this example variable items is an array of Ext Panels:

if(GO.customfields && GO.customfields.types["3"])
{
	for(var i=0;i<GO.customfields.types["3"].panels.length;i++)
	{			  	
		items.push(GO.customfields.types["3"].panels[i]);
	}
}

Or we can add it to an Ext Xtemplate:

if(GO.customfields)
{
	template +=GO.customfields.displayPanelTemplate;
}

Where the var template is a basic Ext Xtemplate config string.

We must supply the JSON data for the template and/or the formpanels. In json.php for the Xtemplate:

if(isset($GO_MODULES->modules['customfields']))
{
	require_once($GO_MODULES->modules['customfields']['class_path'].'customfields.class.inc.php');
	$cf = new customfields();
	$response['data']['customfields']=
		$cf->get_all_fields_with_values(
			$GO_SECURITY->user_id, 3, $company_id);			
}

In json.php for the FormPanels:

if(isset($GO_MODULES->modules['customfields']))
{
	require_once($GO_MODULES->modules['customfields']['class_path'].'customfields.class.inc.php');
	$cf = new customfields();
	$values = $cf->get_values($GO_SECURITY->user_id, 3, $company_id);				
	$response['data']=array_merge($response['data'], $values);			
}

We must save the submitted values in action.php:

if(isset($GO_MODULES->modules['customfields']))
{
	require_once($GO_MODULES->modules['customfields']['class_path'].'customfields.class.inc.php');
	$cf = new customfields();
	$cf->update_fields($GO_SECURITY->user_id, $company_id, 3, $_POST);
}

That's it. Now you have your own custom fields in a module. You module must create on table for the custom fields. In this case:

CREATE TABLE IF NOT EXISTS `cf_3` (
  `link_id` int(11) NOT NULL default '0',
  PRIMARY KEY  (`link_id`)
) ENGINE=MyISAM;

Making your items linkable