Views: 10449
Last Modified: 17.11.2014
The CUSTOM parameter type gives total freedom of customization to the developer. For example, there is a system or a third party component. Depending on the template there is a need to add specific settings to the component.
It can be done as follows:
Example | Description |
JS_FILE | The file containing JS code that is responsible for displaying the custom option |
JS_EVENT | Callback function that will be called after loading JS_FILE |
JS_DATA | Additional data transmitted to JS_EVENT |
|
Example JS_DATA:
{
data:JS_DATA, //JS_DATA from .parameters.php
oCont: td, /* the container where custom control panel can be located with the parameter */
oInput: input,//input in which the parameter value will be transmitted to server during saving
popertyID:"MAP_DATA",//parameter name
propertyParams: { /*...*/ },//The object with the same contents as the parameter array in .parameters.php
fChange:function(){ /*...*/ },//callback for call during parameter change
getElements:function(){ /*...*/ }//returns the object with all parameters of the component
}
Implementation in a Standard Component
Let us consider an example of using CUSTOM parameter type in the standard component map.google.view.
We can see the following in the file .parameters.php:
$arComponentParameters = array(
//...
'MAP_DATA' => array(
'NAME' => GetMessage('MYMS_PARAM_DATA'),
'TYPE' => 'CUSTOM',
'JS_FILE' => '/bitrix/components/bitrix/map.google.view/settings/settings.js',
'JS_EVENT' => 'OnGoogleMapSettingsEdit',
'JS_DATA' => LANGUAGE_ID.'||'.GetMessage('MYMS_PARAM_DATA_SET'),
'DEFAULT' => serialize(array(
'google_lat' => GetMessage('MYMS_PARAM_DATA_DEFAULT_LAT'),
'google_lon' => GetMessage('MYMS_PARAM_DATA_DEFAULT_LON'),
'google_scale' => 13
)),
'PARENT' => 'BASE',
)
//...
);
In the file /bitrix/components/bitrix/map.google.view/settings/settings.js
:
function JCEditorOpener(arParams)
{
this.jsOptions = arParams.data.split('||');
this.arParams = arParams;
var obButton = document.createElement('BUTTON');//creating a button
this.arParams.oCont.appendChild(obButton);// adding to container
obButton.innerHTML = this.jsOptions[1];//text from JS_DATA
obButton.onclick = BX.delegate(this.btnClick, this);//specify callback functions
this.saveData = BX.delegate(this.__saveData, this);
}
Clicking the button opens the dialog generated in /bitrix/components/bitrix/map.google.view/settings/settings.php
. The current value of MAP_DTA is transmitted in the query to settings.php.
Header
obJSPopup->ShowTitlebar();
$obJSPopup->StartDescription('bx-edit-menu');
<p><b><? echo GetMessage('MYMV_SET_POPUP_WINDOW_TITLE')?></b></p>
<p class="note"><? echo GetMessage('MYMV_SET_POPUP_WINDOW_DESCRIPTION')?></p>
Content Block
$obJSPopup->StartContent();
Buttons Block
$obJSPopup->StartButtons();
Save Button
<input type="submit" value="<?echo GetMessage('MYMV_SET_SUBMIT')?/>" onclick="return jsGoogleCE.__saveChanges();"/>
$obJSPopup->ShowStandardButtons(array('cancel'));//cancel button
$obJSPopup->EndButtons();
В __saveChanges() the data are serialized in a string and written into oInput. The serialization function in js to the php format can be looked up in bitrix/components/bitrix/map.google.view/settings/settings_lod.js
. In the component the de-serialization is performed from $arParam[~MAP_DATA]
.
Localization
The language file is located in lang/en/.parameters.php
. When using the CUSTOM parameter type, do not forget to add messages to this file.