How to add new tab in account settings area (WebMail Pro 6 PHP)

From AfterLogic Wiki

Jump to: navigation, search

Introduction

By default, user account settings area holds a number of tabs used to switch between different sections: "Common", "Email Accounts", "Calendar" and "Mobile Sync". Of course, if particular feature is disabled in product configuration, the respective tab is not shown.

You might want to need, however, to have additional tab displayed. That might be particularly useful if you'd like to add more screens under Settings tab - for instance, password change screen.

To achieve that, you'll need to make a number of modifications in JavaScript code. All the files listed here are found under js directory.

This article also describes adding a new tab for Email Accounts screen, next to "Properties", "Signature" etc.

Add new top-level tab

1. Add the following code into common/defines.js file:

var PART_OTHER_SETTINGS = 9;

right below the (line ~30):

var PART_MOBILE_SYNC = 8;

2. In settings/user-settings-screen.js file, we create new tab and work with it.

a) Add:

var SETTINGS_TAB_OTHER = 5;

below the (line 10):

var SETTINGS_TAB_MOBILE_SYNC = 4;

b) Add:

SettingsTabDescription[SETTINGS_TAB_OTHER] = { x: 8 * X_ICON_SHIFT, y: 5 * Y_ICON_SHIFT, iEntity: PART_OTHER_SETTINGS, sLangField: 'SettingsTabOther', bDefault: false };

below the (lines 22-23):

SettingsTabDescription[SETTINGS_TAB_MOBILE_SYNC] = { x: 8 * X_ICON_SHIFT, y: 5 * Y_ICON_SHIFT, iEntity: PART_MOBILE_SYNC, sLangField: 'SettingsTabMobileSync', bDefault: false };

SettingsTabOther is a name of new language constant or an existing one.

c) Add:

this._oOtherTab = null;

below the (line 48):

this._oMobileSyncTab = null;

d) Add:

this._oOtherPane = new COtherSettingsPane();

below the (line 59):

this._oMobileSyncPane = new CmobileSyncSettingsPane(this);

e) Add:

this._oOtherTab.show(true);

below the (line 182):

this._oMobileSyncTab.show(showMobileSync);

f) Add:

case SETTINGS_TAB_OTHER: this._oOtherTab.select(); newPart = this._oOtherPane; break;

below the (lines 240-243):

case SETTINGS_TAB_MOBILE_SYNC: this._oMobileSyncTab.select(); newPart = this._oMobileSyncPane; break; g) Add:

case PART_OTHER_SETTINGS: this._showTabs(SETTINGS_TAB_OTHER); break;

below the (lines 331-333):

case PART_MOBILE_SYNC: this._showTabs(SETTINGS_TAB_MOBILE_SYNC); break;

h) Add:

this._oOtherPane.hide();

below the (line 361):

this._oMobileSyncPane.hide();

i) Add:

this._oOtherTab = new CNavigationTab(this._nav, SETTINGS_TAB_OTHER);

below the (line 382):

this._oMobileSyncTab = new CNavigationTab(this._nav, SETTINGS_TAB_MOBILE_SYNC);

j) Add:

this._oOtherPane.build(td);

below the (line 10):

this._oMobileSyncPane.build(td);

3. In settings/common.js file (or some other file suitable for this), append the declaration of class which is supposed to build and process new settings screen.

function COtherSettingsPane() { this._eContainer = null; } COtherSettingsPane.prototype = { show: function () { this._eContainer.className = ''; }, hide: function () { this._eContainer.className = 'wm_hide'; }, build: function (eParent) { this._eContainer = CreateChild(eParent, 'div', [['class', 'wm_hide']]); this._eContainer.innerHTML = 'This is other settings!'; } }

Those three functions declared must be present. The HTML output required can be put into this._eContainer.innerHTML. If it should have some CSS class assigned, show function should be used for that.

Add new account settings tab

1. Add the following code into common/defines.js file:

var PART_OTHER_PROPERTIES = 9;

right below the (line 30):

var PART_MOBILE_SYNC = 8;

2. Modify settings/user-settings-screen.js file.

a) Add:

this._oOtherPropertiesPane = new COtherPropertiesPane();

below the (line 51):

this._oAccountPropertiesPane = new CAccountPropertiesPane(this);

b) Add:

case PART_OTHER_PROPERTIES: newPart = this._oOtherPropertiesPane; break;

below the (lines 215-217):

case PART_ACCOUNT_PROPERTIES: newPart = this._oAccountPropertiesPane; break;

c) Add:

case PART_OTHER_PROPERTIES:

below the (line 317):

case PART_SIGNATURE:

d) Add:

this._oOtherPropertiesPane.hide();

below the (line 356):

this._oAccountPropertiesPane.hide();

e) Add:

this._oOtherPropertiesPane.build(td);

below the (line 393):

this._oAccountPropertiesPane.build(td, obj);

3. Modify settings/account-properties.js file.

a) Add:

this._eOtherTab = null;

below the (line 13):

this._ePropertiesTab = null;

b) At the end of show function within CaccountTabsSwitcher class (line 70) add:

this._showAccountTab(this._eOtherTab, (iCurrAccountTab == PART_OTHER_PROPERTIES), PART_OTHER_PROPERTIES, 'Other');

Other is a name of new language constant or an existing one, its value is used as tab title.

c) Depending on how the following line look like, the tab will be positioned in the tabs' row. For example, let's place it right next to "Properties" tab.

Add:

this._eOtherTab = CreateChild(this._eContainer, 'div');

below the (line 109):

this._eSignatureTab = CreateChild(this._eContainer, 'div');

4. In settings/account-properties.js file (or some other file suitable for this), append the declaration of class which is supposed to build and process new settings pane.

function COtherPropertiesPane() { this._eContainer = null; } COtherPropertiesPane.prototype = { show: function () { this._eContainer.className = ''; }, hide: function () { this._eContainer.className = 'wm_hide'; }, build: function (eParent) { this._eContainer = CreateChild(eParent, 'div', [['class', 'wm_hide']]); this._eContainer.innerHTML = 'This is other properties!'; } };

Those three functions declared must be present. The HTML output required can be put into this._eContainer.innerHTML. If it should have some CSS class assigned, show function should be used for that.

Last edit: 2011/7/19

WebMail Pro PHP documentation

Installation


Configuring WebMail

Customization

Integration

Synchronization

Clustering

See Also

Retrieved from "http://www.afterlogic.com/wiki/How_to_add_new_tab_in_account_settings_area_(WebMail_Pro_6_PHP)"