Данный класс был создан с основной целью - получить инструменты для быстрого создания различных полей, форм и компонентов при разработке модулей, которые будут работать в полной совместимости с системой EGO CRM.

Класс «ui::» содержит два блока методов разной направленности:

Полная документация представлена по ссылке ниже:

В представленных примерах значения полей, кроме полей с файлами, сохраняются с помощью класса «storage::» (используется параметр «value_storage»). Сохранённые значения видны только Вам.

Файлы, которые Вы загружаете на данной странице примеров, видны только Вам.

Во всех примерах с файлами мы используем параметр «auto_delete» со значением «1». Это означает, что все файлы, загруженные Вами, будут удалены через 1 сутки.

Методы используются для отрисовки полей различных типов и включают множество параметров.
Обратите внимание, что некоторые поля имеют расширенные версии (описаны в разделе «Одиночные формы»).
Используйте конструктор при создании необходимого набора параметров, который представлен в каждом методе в документации класса «ui::».
Мы приводим ссылки на конструктор в каждом примере, чтобы Вы могли посмотреть значения используемых в примерах параметров.

1. ui::btn()

Кнопки и ссылки.

Youtube
$args = array();
$args['in_div'] = true;
$args['size'] = '';
$args['handler_click'] = 'my_handler_forms_1';
$args['theme'] = 'primary';
$args['text'] = 'Button text';
$args['icon'] = array('user', 'far', '');
$str .= ui::btn($args);

//===
$args = array();
$args['in_div'] = true;
$args['size'] = 'sm';
$args['btn_open_img'] = media_link('c1c3ad469424684ae939');
$args['theme'] = 'warning';
$args['text'] = 'Open image';
$args['icon'] = array('image', 'far', '');
$str .= ui::btn($args);

//===
$args = array();
$args['in_div'] = true;
$args['as_a_href'] = 'https://www.youtube.com/';
$args['as_a_target'] = '_blank';
$args['btn_style'] = 'link';
$args['text'] = 'Youtube';
$args['icon'] = array('video', 'far', 'text-primary');
$str .= ui::btn($args);

2. ui::btn_onoff()

Кнопки типа Включить / Отключить

Метод имеет расширенный вариант «ui::btn_onoff_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

$args = array();
$args['in_div'] = true;
$args['size'] = '';
$str .= ui::btn_onoff($args);

//===
$args = array();
$args['in_div'] = true;
$args['size'] = 'sm';
$args['onoff_text_start'] = 'Text before button'; 
$str .= ui::btn_onoff($args);

3. ui::input()

Поля типа «input»

Метод имеет расширенный вариант «ui::input_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

Выполните двойной клик для очищения поляMy help message
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input';
$args['value'] = '';
$args['placeholder'] = 'Placeholder text';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$str .= ui::input($args);

4. ui::input_file()

Поля типа «input type=file» для загрузки файлов.

Метод имеет расширенный вариант «ui::input_file_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

(Без подписи)
Файл(ы) не загружен
$args = array();
$args['name'] = 'my_input_file';
$args['in_div'] = true;
$args['size'] = '';
$args['help'] = '';
$args['with_result'] = true;
$args['with_result_detail'] = true;
$args['with_preview'] = true;
$args['with_delete'] = true;
$args['with_caption'] = true;
$str .= ui::input_file($args);

5. ui::textarea()

Текстовые области.

Метод имеет расширенный вариант «ui::textarea_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

Выполните двойной клик для очищения поляMy help message
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_textarea';
$args['value'] = '';
$args['placeholder'] = 'Placeholder text';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['rows'] = 3;
$str .= ui::textarea($args);

6. ui::select()

Поля типа «select».

Метод имеет расширенный вариант «ui::select_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

My help message
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	, 'opt_2_value'=>'Option 2'
	, 'opt_3_value'=>'Option 3'
);
$args['include_opt_not_set'] = true;
$str .= ui::select($args);

7. ui::checkbox()

Поле или множество полей типа «checkbox».

Метод имеет расширенный вариант «ui::checkbox_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

My help message
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	, 'opt_2_value'=>'Option 2'
	, 'opt_3_value'=>'Option 3'
	, 'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
	, 'opt_6_value'=>'Option 6'
	, 'opt_7_value'=>'Option 7'
	, 'opt_8_value'=>'Option 8'
);
$args['include_opt_not_set'] = true;
$str .= ui::checkbox($args);

8. ui::radio()

Поле или множество полей типа «radio».

Метод имеет расширенный вариант «ui::radio_with_save()», который представлен в разделе «Одиночные формы», где показано, как обрабатывать данное одиночное поле для сохранения его значений.

My help message
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_radios';
$args['value'] = '';
$args['label'] = 'My label text';
$args['help'] = 'My help message';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	, 'opt_2_value'=>'Option 2'
	, 'opt_3_value'=>'Option 3'
	, 'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
	, 'opt_6_value'=>'Option 6'
	, 'opt_7_value'=>'Option 7'
	, 'opt_8_value'=>'Option 8'
);
$args['include_opt_not_set'] = true;
$str .= ui::radio($args);

Под одиночными формами подразумеваются одиночные поля, которые требуется сохранить.
Для подобных сценариев используются перечисленные ниже методы, которые автоматически создадут необходимую форму, а также кнопку сохранения внутри формы, если это соответствует логике.

Вам даже не требуется указывать в методе обработчик, просто создайте на Вашем сервере обработчик по схеме:
save_+field_name, т.е. префикс «save_», далее атрибут «name» поля.

Наконец, Вам даже не потребуется создавать на Вашем сервере обработчик, если Вы передаёте параметр «_auto_handler», система всё сделает самостоятельно, это удобно, если Вам не требуется никаких дополнительных обработок, а только сохранить значение поля.

В Вашем обработчике на сервере используйте метод «ui::get_post_VAL()». Данный метод возвратит введённое пользователем значение.

В методе «ui::get_post_VAL()» значение, введённое пользователем, также будет автоматически отфильтровано в зависимости от типа поля. Вы также можете установить тип фильтрации с помощью параметра «post_filter». Читайте об особенностях фильтрации данных:

После выполнения фильтрации система автоматически возвращает в поле отфильтрованное значение для контроля пользователем того, что он сохраняет.
Если необходимо изменить возвращаемое значение, используйте хэлпер «oj_ret()» с первым аргументом «ret_val», вторым аргументом передайте значение, которое должно вернуться в поле.

1. ui::btn_onoff_with_save()

Рассмотрим пример сохранения одиночной кнопки включения - отключения.

Наше поле имеет атрибут «name» со значением «my_onoff_short_form», поэтому на сервере создаём обработчик «save_my_onoff_short_form».
В обработчике используем метод «ui::get_post_VAL()», который вернёт значение кнопки «Y» или «N».

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_onoff_short_form';
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::btn_onoff_with_save($args);
public function save_my_onoff_short_form() { 
	$now_val = ui::get_post_VAL();
	if($now_val === 'Y') {
		// YOUR code
	}
	else {
		// YOUR code
	}
	storage::auto();
	//---
	$msg = e_p(mlang('s_status__success', 1).'!');
	$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
	ojsucc($msg, 3000);
}

2. ui::input_with_save()

Сохраняем поле «input».

Создаём на сервере обработчик с идентификатором в виде «save_+имя_поля». Наше поле имеет атрибут «name» со значением «my_input_short_form», значит идентификатор обработчика будет «save_my_input_short_form».

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Выполните двойной клик для очищения поляНажмите ENTER для сохранения
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_short_form';
$args['value'] = '';
$args['label'] = 'Type in the word:';
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::input_with_save($args);
public function save_my_input_short_form() { 
	$now_val = (string) ui::get_post_VAL();
	if($now_val !== '') {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val);
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

3. ui::input_file_with_save()

Сохранить файл (файлы), загруженные пользователем.

Данный метод может работать полностью автоматически, Вам не нужно даже создавать обработчик, система всё сделает сама.

Подробно о работе с «input type=file» читайте по ссылке ниже.

Пример:CLASS «ui::» | Class «upload::» | Примеры работы с «input type=file»

(Без подписи)
Файл(ы) не загруженТолько файлы: png, jpg, jpeg, gif, ico
$args = array();
$args['name'] = 'my_ui_file_input';
$args['in_div'] = true;
$args['inp_file_only_imgs'] = true;
$args['with_caption'] = true;
$args['multiple'] = true;
$args['auto_delete'] = 1;
$str .= ui::input_file_with_save($args);

4. ui::textarea_with_save()

Сохранить поле «textarea».

Создаём на сервере обработчик с идентификатором в виде «save_+имя_поля». Наше поле имеет атрибут «name» со значением «my_textarea_short_form», значит идентификатор обработчика будет «save_my_textarea_short_form».

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Выполните двойной клик для очищения поляНажмите ENTER для сохраненияНажмите SHIFT+ENTER для переноса строки
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_textarea_short_form';
$args['value'] = '';
$args['label'] = 'Type in the words:';
$args['rows'] = 3;
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::textarea_with_save($args);
public function save_my_textarea_short_form() { 
	$now_val = (string) ui::get_post_VAL();
	if($now_val !== '') {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$msg .= e_p('<strong>VALUE:</strong> <br>'.nl2br($now_val));
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

5. ui::select_with_save()

Сохранить поле «select».

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Для данного примера мы не будем создавать обработчик на сервере, поскольку используем параметр «_auto_handler», который запустит системный автоматический обработчик.

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select_short_form';
$args['value'] = '';
$args['label'] = 'Select option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::select_with_save($args);

6. ui::select_with_save()

Сохранить поле «select» с параметром «multiple» в значении «TRUE».

Создаём на сервере обработчик с идентификатором в виде «save_+имя_поля». Наше поле имеет атрибут «name» со значением «my_select_multiple_short_form», значит идентификатор обработчика будет «save_my_select_multiple_short_form».
Обратите внимание, что в обработчике метод «ui::get_post_VAL()» вернёт массив выбранных пользователем значений, а не одно значение, как в предыдущем примере.

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Выберите несколько значений, удерживая Ctrl(Command).
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select_multiple_short_form';
$args['value'] = '';
$args['label'] = 'Select option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['include_opt_not_set'] = true;
$args['multiple'] = true;
$args['value_storage'] = array('api_docs_examples', 'access');
$str .= ui::select_with_save($args);
public function save_my_select_multiple_short_form() { 
	$now_val = ui::get_post_VAL();
	if(!empty($now_val)) {
		// YOUR code
		storage::auto();
		//---
		$msg = e_p(mlang('s_status__success', 1).'!');
		$now_val_format = "<pre>\n";
			$now_val_format .= print_r($now_val, true);
		$now_val_format .= "</pre>";
		$msg .= e_p('<strong>VALUE:</strong> <br>'.$now_val_format);
		ojsucc($msg, 3000);
	}
	else {
		ojerr(mlang('s_form__fill', 1).'!');
	}
}

7. ui::checkbox_with_save()

Сохранить поле или множество полей «checkbox».

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Для данного примера мы не будем создавать обработчик на сервере, поскольку используем параметр «_auto_handler», который запустит системный автоматический обработчик.

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes_short_form';
$args['value'] = '';
$args['label'] = 'Check options:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::checkbox_with_save($args);

8. ui::radio_with_save()

Сохранить поле или множество полей «radio».

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Для данного примера мы не будем создавать обработчик на сервере, поскольку используем параметр «_auto_handler», который запустит системный автоматический обработчик.

$args = array();
$args['in_div'] = true;
$args['name'] = 'my_radios_short_form';
$args['value'] = '';
$args['label'] = 'Select radio:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
	,	'opt_5_value'=>'Option 5'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples', 'access');
$args['_auto_handler'] = true;
$str .= ui::radio_with_save($args);

Под комплексными формами подразумеваются формы, в которых находятся несколько полей, которые требуется сохранить.

  • Построение комплексных форм должно начинаться с метода «ui::form_start()» с соответствующими параметрами.

  • Далее следуют методы, создающие поля необходимых типов.

  • И наконец, комплексная форма должна заканчиваться методом «ui::form_end()» с соответствующими параметрами.

Обязательной составляющей любой формы, которую требуется сохранить, является кнопка сохранения формы.
В зависимости от параметров, переданных методу «ui::form_end()» кнопка может быть отрисована системой автоматически.
Изучите описание к конструктору метода «ui::form_end()».

Фильтрация входных данных формы в обработчике осуществляется с помощью метода «ui::get_post_VALS()», который выполняет фильтрацию автоматически в зависимости от типа поля. Метод вернёт массив отфильтрованных значений каждого поля. Также Вы можете самостоятельно перебрать массив $_POST['val'] (не рекомендуется).

Вы также можете установить тип фильтрации для любого поля, если необходимо, с помощью параметра «post_filter». Читайте об особенностях фильтрации данных:

1.

Пример работы с обычной комплексной формой.
Указываем обработчик формы «saves_form_example_1» в методе «ui::form_end()».

Создаём на сервере обработчик с идентификатором «saves_form_example_1».
Обратите внимание, префикс «saves_» в идентификаторе обработчика обязателен!

В нашей форме присутствует поле типа «file». Система полностью автоматически загрузит файл, никаких обработок в обработчике не используем. О том, как работать с полями типа «file» смотрите в отдельном примере к документации.

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Мин. 0Макс. 1000
Выполните двойной клик для очищения поля

(Без подписи)
Файл(ы) не загружен
$str .= ui::form_start();
//--- INPUT number
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_number';
$args['label'] = 'Type in the number:';
$args['type'] = 'number';
$args['inp_type_number_min'] = 0;
$args['inp_type_number_max'] = 1000;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::input($args);
//--- SELECT
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'Select the option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
);
$args['include_opt_not_set'] = true;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::select($args);
//--- CHECKBOXES
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'Check the checkboxes:';
$args['opts'] = array(
		'check_1_value'=>'Option 1'
	,	'check_2_value'=>'Option 2'
	,	'check_3_value'=>'Option 3'
	,	'check_4_value'=>'Option 4'
);
$args['max_opts_in_block'] = 2;
$args['value_storage'] = array('api_docs_examples_complex', 'access');
$str .= ui::checkbox($args);
//--- INPUT TYPE FILE
$args = array();
$args['name'] = 'my_form_file_example_1_';
$args['in_div'] = true;
$args['multiple'] = true;
$args['with_caption'] = true;
$args['auto_delete'] = 1;
$str .= ui::input_file($args);
//=== form end
$str .= ui::form_end('saves_form_example_1');
public function saves_form_example_1() { 
	$now_vals = ui::get_post_VALS();
	//if(...) {
		// YOUR code
	// }
	storage::auto();
	//---
	$msg = e_p(mlang('s_status__success', 1).'!');
	$now_vals_format = "<pre>\n";
		$now_vals_format .= print_r($now_vals, true);
	$now_vals_format .= "</pre>";
	$msg .= e_p('<strong>VALUES:</strong> <br>'.$now_vals_format);
	//---
	$now_uploaded = upload::get_uploaded();
	$now_uploaded_format = "<pre>\n";
		$now_uploaded_format .= print_r($now_uploaded, true);
	$now_uploaded_format .= "</pre>";
	$msg .= e_p('<strong>UPLOADED:</strong> <br>'.$now_uploaded_format);
	ojsucc($msg, false);
}

2.

Повторим предыдущий пример, добавив «required» полям.

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Также обратите внимание, что в данном примере используется полностью автоматическая обработка.
Для этого мы передали методу «ui::form_end()» дополнительный префикс «auto:».
В этом случае не требуется создавать обработчик на сервере, система всё сделает автоматически.

* заполните поле
Мин. 0Макс. 1000
Выполните двойной клик для очищения поля
* заполните поле

* выберите хотя бы одно значение
(Без подписи)
* заполните поле
Файл(ы) не загружен
$str .= ui::form_start();
//--- INPUT number
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_input_number';
$args['label'] = 'Type in the number:';
$args['type'] = 'number';
$args['inp_type_number_min'] = 0;
$args['inp_type_number_max'] = 1000;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::input($args);
//--- SELECT
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_select';
$args['value'] = '';
$args['label'] = 'Select the option:';
$args['opts'] = array(
		'opt_1_value'=>'Option 1'
	,	'opt_2_value'=>'Option 2'
	,	'opt_3_value'=>'Option 3'
	,	'opt_4_value'=>'Option 4'
);
$args['include_opt_not_set'] = true;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::select($args);
//--- CHECKBOXES
$args = array();
$args['in_div'] = true;
$args['name'] = 'my_checkboxes';
$args['value'] = '';
$args['label'] = 'Check the checkboxes:';
$args['opts'] = array(
		'check_1_value'=>'Option 1'
	,	'check_2_value'=>'Option 2'
	,	'check_3_value'=>'Option 3'
	,	'check_4_value'=>'Option 4'
);
$args['max_opts_in_block'] = 2;
$args['required'] = true;
$args['value_storage'] = array('api_docs_examples_complex_auto', 'access');
$str .= ui::checkbox($args);
//--- INPUT TYPE FILE
$args = array();
$args['name'] = 'my_form_file_example_2_';
$args['in_div'] = true;
$args['multiple'] = true;
$args['with_caption'] = true;
$args['auto_delete'] = 1;
$args['required'] = true;
$str .= ui::input_file($args);
//=== form end
$str .= ui::form_end('auto:saves_form_example_2');
public function saves_form_example_1() { 
	$now_vals = ui::get_post_VALS();
	//if(...) {
		// YOUR code
	// }
	storage::auto();
	//---
	$msg = e_p(mlang('s_status__success', 1).'!');
	$now_vals_format = "<pre>\n";
		$now_vals_format .= print_r($now_vals, true);
	$now_vals_format .= "</pre>";
	$msg .= e_p('<strong>VALUES:</strong> <br>'.$now_vals_format);
	//---
	$now_uploaded = upload::get_uploaded();
	$now_uploaded_format = "<pre>\n";
		$now_uploaded_format .= print_r($now_uploaded, true);
	$now_uploaded_format .= "</pre>";
	$msg .= e_p('<strong>UPLOADED:</strong> <br>'.$now_uploaded_format);
	ojsucc($msg, false);
}

В данном блоке примеров мы отдельно рассмотрим использование расширенных схем обработки. Под расширенными схемами понимается участие Ваших кастомных кодов JS, которые могут использоваться ДО отправки данных формы по ajax, так и ПОСЛЕ получения ответа по ajax.

Обязательно изучите схемы обработки по ссылке ниже (Конструктор схемы обработки). Используйте эту документацию для понимания представленных ниже примеров:

1.

Добавим в этом примере JS-обработку перед отправкой формы в ajax.
Наше поле имеет атрибут «name» со значением «input_extend_js_1», значит идентификатор обработчика на сервере будет «save_input_extend_js_1». Такой же идентификатор обработчика используем в JS-коде. Создаём объект «$$.save_input_extend_js_1 = {};». Далее добавляем объекту свойство «start» в виде функции, которая будет содержать наш код обработки.

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Выполните двойной клик для очищения поляНажмите ENTER для сохранения
$args = array();
$args['in_div'] = true;
$args['name'] = 'input_extend_js_1';
$args['label'] = 'Type in the word:';
$args['value_storage'] = array('api_docs_examples_js', 'access');
$str .= ui::input_with_save($args);
$$.save_input_extend_js_1 = {};
$$.save_input_extend_js_1.start = function(data, element, event) {
	console.log('data', data);
  var confirm_text = $$.mlang('forms_example__extend_js_confirm_example');
  confirm_text += ' '+data.val.length;
  confirm_text +='?';
  if(!confirm(confirm_text)) return false;
  data.my_par_1 = 'my_value_1';
}

2.

В следующем примере выполним обработку ПОСЛЕ получения успешного ответа по ajax. Для этого в JS-обработчике по аналогии с предыдущим примером создаём свойство «cb» в виде функции.

В нашем примере после получения ответа по ajax JS-код перекрасит поле и добавит «disabled».

$args = array();
$args['in_div'] = true;
$args['name'] = 'select_extend_js_2';
$args['label'] = 'Select option:';
$args['opts'] = array(
    'opt_1_value'=>'opt_1_label'
  , 'opt_2_value'=>'opt_2_label'
  , 'opt_3_value'=>'opt_3_label'
  , 'opt_4_value'=>'opt_4_label'
);
$str .= ui::select_with_save($args);
$$.save_select_extend_js_2 = {};
$$.save_select_extend_js_2.cb = function(json, element, event) {
  console.log('json', json);
  var field =	element.closest('form').find('select');
  field.prop('disabled', true).css({'background-color': '#d4f0ff'});
}

3.

Наконец, рассмотрим более сложный пример. Используем комплексную форму. В JS-коде прописываем обработчики как ПЕРЕД отправкой в ajax, так и ПОСЛЕ получения ответа по ajax.

В нашем примере мы используем идентификатор обработчика «saves_complex_extend_js», который указан в методе «ui::form_end()». Значит, в нашем JS-коде создаём объект с названием «saves_complex_extend_js» и добавляем необходимые свойства-функции.

Обратите внимание, что мы также добавили обработчик первому полю select.

В примере используется параметр «value_storage», который выполнит автоматическое сохранение значения поля в базе данных.

Также обратите внимание, что в данном примере используется полностью автоматическая обработка.
Для этого мы передали методу «ui::form_end()» дополнительный префикс «auto:».
В этом случае не требуется создавать обработчик на сервере, система всё сделает автоматически.

Выполните двойной клик для очищения поля
$str .= ui::form_start();
	$args = array();
	$args['in_div'] = true;
	$args['name'] = 'select_complex_js';
	$args['label'] = 'Select option:';
	$args['handler_change'] = 'select_interaction';
	$args['opts'] = array(
			'opt_1_value'=>'opt_1_label'
		, 'opt_2_value'=>'opt_2_label'
		, 'opt_3_value'=>'opt_3_label'
		, 'opt_4_value'=>'opt_4_label'
	);
	$args['include_opt_not_set'] = true;
	$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
	$str .= ui::select($args);
	
	$str .= '<div class="js-by_select_interaction" style="display: none;">';
		$args = array();
		$args['in_div'] = true;
		$args['name'] = 'checkbox_complex_js';
		$args['label'] = 'Check options:';
		$args['opts'] = array(
				'opt_1_value'=>'opt_1_label'
			, 'opt_2_value'=>'opt_2_label'
			, 'opt_3_value'=>'opt_3_label'
			, 'opt_4_value'=>'opt_4_label'
		);
		$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
		$str .= ui::checkbox($args);
	$str .= '</div>';
	
	$args = array();
	$args['in_div'] = true;
	$args['name'] = 'textarea_complex_js';
	$args['label'] = 'Type in the words:';
	$args['value_storage'] = array('api_docs_examples_js_complex', 'access');
	$str .= ui::textarea($args);

$str .= ui::form_end('auto:saves_complex_extend_js');
$$.select_interaction = function(data, element, event) {
  var div_by_select_interaction = element.closest('form').find('.js-by_select_interaction');
  if(data.val!=='') div_by_select_interaction.slideDown();
  else div_by_select_interaction.slideUp();
  return true;
}

$$.saves_complex_extend_js = {};
$$.saves_complex_extend_js.start = function(data, element, event) {
  console.log('data', data);
  var form = element.closest('form');
  form.css({'transform': 'rotate(-5deg)'});
}
$$.saves_complex_extend_js.cb = function(json, element, event) {
  console.log('json', json);
  var form = element.closest('form');
  form.css({'transform': 'rotate(0deg)'});
}

Иногда требуется добавить обработчик DOM-элементу. Вы можете это сделать обычными методами JS (JQUERY). Однако для работы обработчиков в системе EGO CRM с учётом всех её возможностей, элементу требуется назначить специальные атрибуты и классы.
Используя метод ui::dom_element() при построении HTML-тега элемента, Вы вводите данный элемент в стандартную работу системы, как это происходит с полями форм.

В дальнейшем по отношению к элементу Вы можете использовать любую схему обработки, изучите раздел «Конструктор схемы обработки» по ссылке ниже:

1.

Выполним только JS-обработку по клику на элементе DIV.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.
$args = array();
$args['handler_click'] = 'color_my_box';
$args['id'] = set_id('my_coloring_div');
$args['addclass'] = 'p-3 border';
$args['attrs'] = array(
	  'data-color_1'=>'red'
	, 'data-color_2'=>'blue'
	, 'data-color_3'=>'green'
	, 'data-color_4'=>'orange'
	, 'style'=>'background: orange; color: white;'
);
$args['cursor'] = 'pointer';
$str .= '<div '.ui::dom_element($args).' >';
  $str .= 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.';
$str .= '</div>';
$$._now_color = 1;
$$.color_my_box = function(data, element, event){
	element.css({'background': element.data('color_'+$$._now_color)});
	$$._now_color++;
	if($$._now_color>4) $$._now_color = 1;
	return true;
}

2.

Усложним предыдущий пример, обработкой по ajax.

Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.
$args = array();
$args['handler_click'] = 'color_my_box_with_ajax';
$args['id'] = set_id('my_coloring_div_with_ajax');
$args['addclass'] = 'p-3 border';
$args['attrs'] = array(
	  'data-color_1'=>'orange'
	, 'data-color_2'=>'red'
	, 'data-color_3'=>'blue'
	, 'data-color_4'=>'green'
	, 'style'=>'background: green; color: white;'
);
$args['cursor'] = 'pointer';
$str .= '<div '.ui::dom_element($args).' >';
  $str .= 'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца.';
$str .= '</div>';
$$._number_color = 1;
$$.color_my_box_with_ajax = {};
$$.color_my_box_with_ajax.start = function(data, element, event){
	element.css({'background': element.data('color_'+$$._number_color)});
	data._number_color = $$._number_color;
	$$._number_color++;
	if($$._number_color>4) $$._number_color = 1;
}

3.

Специфическим применением является подключение контекстного меню (клик правой кнопкой мышки).
Вы можете посмотреть развёрнутые примеры по ссылке:

Пример:CLASS «ui::» | Контекстное меню (правая кнопка мыши)

Методы используются для отрисовки специальных компонентов.

1. ui::dropdown()

Выпадающий элемент.
Смотрите подробные примеры по ссылке ниже.

Пример:CLASS «ui::» | Выпадающий элемент - dropdown

$args = array();
$args['btn_text'] = 'Text for button';
$args['body'] = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat lacinia nunc, eget tincidunt est maximus eu.';
$str .= ui::dropdown($args);

2. ui::tabs()

Вкладки - Tabs / Pills.
Смотрите подробные примеры по ссылке ниже.

Пример:CLASS «ui::» | Вкладки - Tabs / Pills

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a eleifend ante, sed ultrices ipsum. Praesent id lectus mattis, dapibus massa et, blandit ipsum. Pellentesque ullamcorper ante augue, id aliquam sem vulputate id. Sed elit augue, molestie a elit aliquet, facilisis elementum eros. Nam non enim sapien. Vivamus non eleifend quam. Nam dapibus condimentum porttitor. Aenean tempor tincidunt tristique.
Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.
Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.
$args = array();
$args['children'] = array();
//--- Tab 1
$tab = array(
		'btn_text'=>'Tab 1'
	, 'body'=>'Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a eleifend ante, sed ultrices ipsum. Praesent id lectus mattis, dapibus massa et, blandit ipsum. Pellentesque ullamcorper ante augue, id aliquam sem vulputate id. Sed elit augue, molestie a elit aliquet, facilisis elementum eros. Nam non enim sapien. Vivamus non eleifend quam. Nam dapibus condimentum porttitor. Aenean tempor tincidunt tristique.'
);
$args['children'][] = $tab;
//--- Tab 2
$tab = array(
		'btn_text'=>'Tab 2'
	, 'body'=>'Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Вдали от всех живут они в буквенных домах на берегу Семантика большого языкового океана.'
);
$args['children'][] = $tab;
//--- Tab 3
$tab = array(
		'btn_text'=>'Tab 3'
	, 'body'=>'Душа моя озарена неземной радостью, как эти чудесные весенние утра, которыми я наслаждаюсь от всего сердца. Я совсем один и блаженствую в здешнем краю, словно созданном для таких, как я. Я так счастлив, мой друг, так упоен ощущением покоя, что искусство мое страдает от этого. Ни одного штриха не мог бы я сделать, а никогда не был таким большим художником, как в эти минуты.'
);
$args['children'][] = $tab;
//---
$args['style_pills'] = false;
$str .= ui::tabs($args);

3. ui::gallery()

Галерея.
Смотрите подробные примеры по ссылке ниже.

Пример:CLASS «ui::» | Галерея - Gallery

[Смотреть]
$args = array();
$args['children'] = array();
//--- Image 1
$image_set = array(
		'src'=>media_link('011ab21242e86e7d7635')
	, 'caption'=>'Caption for image 1'
);
$args['children'][] = $image_set;
//--- Image 2
$image_set = array(
		'src'=>media_link('3e1861d3864ba55b27a8')
	, 'caption'=>'Caption for image 2'
);
$args['children'][] = $image_set;
//---
$str .= ui::gallery($args);

В предыдущих примерах на этой странице мы уже использовали класс «storage::» в различных автоматических вариантах при работе с полями форм.
Рассмотрим вариант ручного использования класса «storage::». Ручное использование требуется использовать, когда нам нужно сохранить некие значения, не связанные с полями форм.

Возможных примеров такого использования класса может быть огромное множество. Мы приведём только 1 пример.

В нашем примере мы создадим 3 вкладки. В каждой вкладке по 4 суб-вкладки.
По умолчанию при загрузке страницы открывается вкладка 1 и суб-вкладка 1.
Однако, допустим, что нам нужно сохранить: какая вкладка и суб-вкладка были открыты в последний раз, чтобы в следующий раз при перезагрузке страницы открылись последняя сохранённая вкладка и последняя сохранённая суб-вкладка. Также запомним, какая суб-вкладка была открыта последний раз в каждой вкладке.

Проанализируйте созданный пример.

Пример

Переключите вкладку и суб-вкладку и перезагрузите страницу.

$args = array();
//===  get saved open_tab
$saved_open_tab = storage::get_value('api_docs_examples_storage', 'open_tab');
if(!$saved_open_tab) $saved_open_tab = 0;
//===
$args['children'] = array();
$args['children'][] = array(
		'btn_text'=>'Tab 1'
	, 'handler_tab'=>'open_tab'
	, 'handler_tab_force'=>true
	, 'use_btn_reload'=>false
	, 'init_open'=>($saved_open_tab === 0 ? true : false)
);
$args['children'][] = array(
		'btn_text'=>'Tab 2'
	, 'handler_tab'=>'open_tab'
	, 'handler_tab_force'=>true
	, 'use_btn_reload'=>false
	, 'init_open'=>($saved_open_tab === 1 ? true : false)
);
$args['children'][] = array(
		'btn_text'=>'Tab 3'
	, 'handler_tab'=>'open_tab'
	, 'handler_tab_force'=>true
	, 'use_btn_reload'=>false
	, 'init_open'=>($saved_open_tab === 2 ? true : false)
);
$str .= ui::tabs($args);
public function open_tab() { 
	$str = '';
	$open_tab = $this->post['_tab'];
	//=== save to storage
	storage::init('api_docs_examples_storage', 'access');
	storage::set_f('open_tab', $open_tab, 'int');
	storage::save();
	//=== get saved open_sub_tab
	$saved_open_sub_tab_rels = storage::get_value('api_docs_examples_storage', 'open_sub_tab');
	if(!$saved_open_sub_tab_rels) $saved_open_sub_tab_rels = array();
	$saved_open_sub_tab = (isset($saved_open_sub_tab_rels[$open_tab]) ? (int) $saved_open_sub_tab_rels[$open_tab] : 0);
	//===
	$str .= '<div class="pl-3 border-left border-warning">';
		$str .= '<div class="py-4">My content for Tab '.($open_tab+1).'</div>';
		//===
		$args = array();
		$args['children'] = array();
		$args['children'][] = array(
				'btn_text'=>'SubTab 1'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 0 ? true : false)
		);
		$args['children'][] = array(
				'btn_text'=>'SubTab 2'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 1 ? true : false)
		);
		$args['children'][] = array(
				'btn_text'=>'SubTab 3'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 2 ? true : false)
		);
		$args['children'][] = array(
				'btn_text'=>'SubTab 4'
			, 'handler_tab'=>'open_sub_tab'
			, 'handler_tab_force'=>true
			, 'handler_tab_pars'=>array('open_tab'=>$open_tab)
			, 'use_btn_reload'=>false
			, 'init_open'=>($saved_open_sub_tab === 3 ? true : false)
		);
		$str .= ui::tabs($args);
	$str .= '</div>';
	oj_tab($str);
}
public function open_sub_tab() { 
	$str = '';
	$open_sub_tab = $this->post['_tab'];
	$open_tab = $this->post['open_tab'];
	//=== save to storage
	$open_sub_tabs_rels = array($open_tab=>$open_sub_tab);
	storage::init('api_docs_examples_storage', 'access');
	storage::set_f('open_sub_tab', $open_sub_tabs_rels, 'array:add');
	storage::save();
	//===
	$str .= '<div class="py-4">My SubTab '.($open_sub_tab+1).' content for Tab '.($open_tab+1).'</div>';
	oj_tab($str);
}