This class was created with the main goal to provide tools for quick creation of various fields, forms, and components when developing modules that will work in full compatibility with the EGO CRM system.
The class «ui::» contains two blocks of methods with different purposes:
- Methods that help quickly render various form fields or components (dropdown, tabs, gallery) considering synchronization with the EGO CRM system
- Methods that allow efficient form processing (saving form fields, etc.)
Full documentation is provided at the link below:
In the provided examples, the field values, except for file fields, are saved using the class «storage::» (the parameter «value_storage» is used). Saved values are visible only to you.
Files you upload on this example page are visible only to you.
In all file examples, we use the parameter «auto_delete» with the value «1». This means all files you upload will be deleted after 1 day.
Methods are used to render fields of various types and include many parameters.
Note, that some fields have extended versions (described in the “Single Forms” section).
Use the constructor when creating the required set of parameters, which is presented in each method in the documentation of the class «ui::».
We provide links to the constructor in each example so you can see the values of the parameters used in the examples.
$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()
Toggle Buttons (On / Off)
The method has an extended version «ui::btn_onoff_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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()
Fields of type «input»
The method has an extended version «ui::input_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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()
Fields of type «input type=file» for uploading files.
The method has an extended version «ui::input_file_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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()
Text Areas.
The method has an extended version «ui::textarea_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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()
Fields of type «select».
The method has an extended version «ui::select_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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()
Field or multiple fields of type «checkbox».
The method has an extended version «ui::checkbox_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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()
Field or multiple fields of type «radio».
The method has an extended version «ui::radio_with_save()», which is presented in the “Single Forms” section, showing how to process this single field to save its values.
$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);Single forms mean single fields that need to be saved.
For such scenarios, the methods listed below are used, which automatically create the required form, as well as a save button inside the form, if it fits the logic.
You don't even need to specify the handler in the method, just create a handler on your server using the scheme:
save_+field_name, i.e. the prefix «save_», followed by the field's «name» attribute.
Finally, you do not even need to create a handler on your server if you pass the parameter «_auto_handler», the system will do everything itself; this is convenient if you do not need any additional processing but only to save the field value.
In your server handler, use the method «ui::get_post_VAL()». This method will return the value entered by the user.
In the method «ui::get_post_VAL()», the value entered by the user will also be automatically filtered depending on the field type. You can also set the filter type using the parameter «post_filter». Read about the peculiarities of data filtering:
After filtering, the system automatically returns the filtered value to the field for the user to control what is saved.
If you need to change the returned value, use the helper «oj_ret()» with the first argument «ret_val» and the second argument with the value to return to the field.
1. ui::btn_onoff_with_save()
Let's consider an example of saving a single toggle button (on/off).
Our field has the attribute «name» with the value «my_onoff_short_form», so on the server we create the handler «save_my_onoff_short_form».
In the handler, use the method «ui::get_post_VAL()», which returns the button value «Y» or «N».
The example uses the parameter «value_storage», which will automatically save the field value in the database.
$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()
Saving an «input» field.
Create a handler on the server with an identifier in the form «save_+field_name». Our field has an attribute «name» with the value «my_input_short_form», so the handler identifier will be «save_my_input_short_form».
The example uses the parameter «value_storage», which will automatically save the field value in the database.
$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()
Save file(s) uploaded by the user.
This method can work fully automatically; you do not even need to create a handler, the system will do everything by itself.
Read more about working with «input type=file» at the link below.
Example:CLASS «ui::» | Class «upload::» | Examples of working with «input type=file»
$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()
Save a «textarea» field.
Create a handler on the server with an identifier in the form «save_+field_name». Our field has an attribute «name» with the value «my_textarea_short_form», so the handler identifier will be «save_my_textarea_short_form».
The example uses the parameter «value_storage», which will automatically save the field value in the database.
$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()
Save a «select» field.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
For this example, we will not create a handler on the server since we use the parameter «_auto_handler», which will launch the system automatic 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()
Save a «select» field with the parameter «multiple» set to «TRUE».
On the server, we create a handler with an identifier in the form of «save_+field_name». Our field has the attribute «name» with the value «my_select_multiple_short_form», so the handler identifier will be «save_my_select_multiple_short_form».
Note that in the handler, the method «ui::get_post_VAL()» will return an array of values selected by the user, not a single value as in the previous example.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
$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()
Save a «checkbox» field or multiple fields.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
For this example, we will not create a handler on the server since we use the parameter «_auto_handler», which will launch the system automatic 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()
Save a «radio» field or multiple fields.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
For this example, we will not create a handler on the server since we use the parameter «_auto_handler», which will launch the system automatic 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);Complex forms mean forms that contain multiple fields that need to be saved.
Building complex forms should start with the method «ui::form_start()» with the appropriate parameters.
- Next follow methods that create fields of the required types.
Finally, the complex form should end with the method «ui::form_end()» with the appropriate parameters.
An essential part of any form that needs saving is the form save button.
Depending on parameters passed to the method «ui::form_end()», the button may be rendered automatically by the system.
Study the description for the constructor method «ui::form_end()».
Filtering of form input data in the handler is performed using the method «ui::get_post_VALS()», which automatically filters depending on the field type. The method returns an array of filtered values for each field. You can also manually iterate over the $_POST['val'] array (not recommended).
You can also set the filter type for any field, if necessary, using the parameter «post_filter». Read about the peculiarities of data filtering:
1.
Example of working with a regular complex form.
Specify the form handler «saves_form_example_1» in the method «ui::form_end()».
Create a server handler with the identifier «saves_form_example_1».
Note, the prefix «saves_» in the handler identifier is mandatory!
Our form contains a field of type «file». The system will upload the file fully automatically; no processing in the handler is used. See a separate example in the documentation about working with «file» type fields.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
$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.
Let's repeat the previous example, adding «required» to the fields.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
Also note that this example uses fully automatic processing.
For this, we passed the additional prefix «auto:» to the method «ui::form_end()».
In this case, no server handler is required; the system will do everything automatically.
$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);
}In this block of examples, we separately consider the use of advanced processing schemes. Advanced schemes mean your custom JS code, which can be used BEFORE sending form data via ajax, as well as AFTER receiving the ajax response.
Be sure to study the processing schemes at the link below (Processing Scheme Constructor). Use this documentation to understand the examples below:
1.
In this example, we add JS handling before sending the form via ajax.
Our field has the attribute «name» with the value «input_extend_js_1», so the handler identifier on the server will be «save_input_extend_js_1». The same handler identifier is used in the JS code. We create the object «$$.save_input_extend_js_1 = {};». Then we add the property «start» as a function to this object, which will contain our handling code.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
$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.
In the next example, we will perform processing AFTER receiving a successful ajax response. For this, in the JS handler, similarly to the previous example, we create a property «cb» as a function.
In our example, after receiving the ajax response, the JS code will recolor the field and add «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.
Finally, let's consider a more complex example. We use a complex form. In the JS code, we write handlers both BEFORE sending via ajax and AFTER receiving the ajax response.
In our example, we use the handler identifier «saves_complex_extend_js», which is specified in the method «ui::form_end()». So, in our JS code, we create an object named «saves_complex_extend_js» and add the necessary function properties.
Note that we also added a handler to the first select field.
The example uses the parameter «value_storage», which will automatically save the field value in the database.
Also note that this example uses fully automatic processing.
For this, we passed the additional prefix «auto:» to the method «ui::form_end()».
In this case, no server handler is required; the system will do everything automatically.
$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)'});
}
Sometimes it is necessary to add a handler to a DOM element. You can do this by normal JS (JQUERY) methods. However, for handlers to work properly in the EGO CRM system with all its features, the element needs special attributes and classes assigned.
Using the method ui::dom_element() when building the HTML tag of the element, you integrate this element into the system's standard operation, as happens with form fields.
Later, you can use any processing scheme relative to the element; study the section “Processing Scheme Constructor” at the link below:
1.
We will perform only JS processing on clicking the DIV element.
$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.
Let's complicate the previous example with ajax processing.
$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.
A specific use case is attaching a context menu (right mouse button click).
You can see detailed examples at the link:
Methods are used to render special components.
1. ui::dropdown()
Dropdown element.
See detailed examples at the link below.
Example:CLASS «ui::» | Dropdown element
$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.
See detailed examples at the link below.
$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()
Gallery.
See detailed examples at the link below.
Example:CLASS «ui::» | Gallery - 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);In previous examples on this page, we have already used the class «storage::» in various automatic scenarios when working with form fields.
Let's consider the manual use case of the class «storage::». Manual use is needed when we want to save some values not related to form fields.
There can be a huge number of such examples of using the class. We will give only 1 example.
In our example, we will create 3 tabs. Each tab has 4 sub-tabs.
By default, when the page loads, tab 1 and sub-tab 1 are opened.
However, suppose we need to save which tab and sub-tab were last opened so that next time when reloading the page, the last saved tab and last saved sub-tab will open. We will also remember which sub-tab was last opened in each tab.
Analyze the created example.
Example
Switch the tab and sub-tab and reload the page.
$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);
}