Adding new tab to Settings screen

Now let's create a sample plugin which will add a new tab in account settings, so that new configuration screen is opened upon clicking that tab. The plugin is going to be called custom-settings-plugin, class is CCustomSettingsPlugin.

Primary data/plugins/custom-settings-plugin/index.php file ensures all the plugin files are included:

<?php

class_exists('CApi') or die();

class CCustomSettingsPlugin extends AApiPlugin
{
	/**
	 * @param CApiPluginManager $oPluginManager
	 */
	public function __construct(CApiPluginManager $oPluginManager)
	{
		parent::__construct('1.0', $oPluginManager);
	}

	public function Init()
	{
		parent::Init();

		$this->AddJsFile('js/customSettings.js');
		$this->AddJsFile('js/include.js');
		
		$this->AddTemplate('CustomSettings', 'templates/customSettings.html');
	}
}

return new CCustomSettingsPlugin($this);

As you can see, 3 files are included here. Plugin directory should contain 2 subdirectories called js and templates. They hold the following files:

data/plugins/custom-settings-plugin/js/customSettings.js file:

/**
 * @constructor
 */
function CCustomSettings()
{
	
}

CCustomSettings.prototype.TemplateName = 'Plugin_CustomSettings';

CCustomSettings.prototype.TabName = 'custom_settings';

CCustomSettings.prototype.TabTitle = 'Custom Settings';

data/plugins/custom-settings-plugin/js/include.js file:

AfterLogicApi.addSettingsTab(CCustomSettings);

data/plugins/custom-settings-plugin/templates/customSettings.html file:

<div class="panel_top">
	<h2 class="title">Custom Settings!!!</h2>
</div>

That's it, all you need to do now is to supply actual content in the above files.