Diese Klasse wurde mit dem Hauptziel erstellt, Werkzeuge für die schnelle Erstellung verschiedener Felder, Formulare und Komponenten bei der Entwicklung von Modulen bereitzustellen, die vollständig mit dem EGO CRM-System kompatibel sind.
Die Klasse «ui::» enthält zwei Methodenblöcke mit unterschiedlichem Zweck:
- Methoden, die helfen, schnell verschiedene Formularfelder oder Komponenten (Dropdown, Tabs, Galerie) unter Berücksichtigung der Synchronisation mit dem EGO CRM-System darzustellen
- Methoden, die die effiziente Verarbeitung von Formularen (Speicherung von Formularfeldern etc.) ermöglichen
Die vollständige Dokumentation finden Sie unter dem Link unten:
In den dargestellten Beispielen werden die Werte der Felder außer Datei-Feldern mit der Klasse «storage::» gespeichert (der Parameter «value_storage» wird verwendet). Die gespeicherten Werte sind nur für Sie sichtbar.
Dateien, die Sie auf dieser Beispielseite hochladen, sind nur für Sie sichtbar.
In allen Datei-Beispielen verwenden wir den Parameter «auto_delete» mit dem Wert «1». Das bedeutet, dass alle von Ihnen hochgeladenen Dateien nach 1 Tag gelöscht werden.
Die Methoden werden verwendet, um Felder verschiedener Typen darzustellen und enthalten viele Parameter.
Beachten Sie, dass einige Felder erweiterte Versionen haben (im Abschnitt «Einzelformulare» beschrieben).
Verwenden Sie den Konstruktor zur Erstellung des erforderlichen Parametersatzes, der in der Dokumentation der Klasse «ui::» für jede Methode dargestellt ist.
Wir geben in jedem Beispiel einen Link zum Konstruktor an, damit Sie die verwendeten Parameterwerte einsehen können.
$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()
Schaltflächen vom Typ Ein/Aus
Die Methode hat eine erweiterte Variante «ui::btn_onoff_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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()
Felder vom Typ «input»
Die Methode hat eine erweiterte Variante «ui::input_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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()
Felder vom Typ «input type=file» zum Hochladen von Dateien.
Die Methode hat eine erweiterte Variante «ui::input_file_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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()
Textbereiche.
Die Methode hat eine erweiterte Variante «ui::textarea_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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()
Felder vom Typ «select».
Die Methode hat eine erweiterte Variante «ui::select_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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()
Feld oder mehrere Felder vom Typ «checkbox».
Die Methode hat eine erweiterte Variante «ui::checkbox_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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()
Feld oder mehrere Felder vom Typ «radio».
Die Methode hat eine erweiterte Variante «ui::radio_with_save()», die im Abschnitt «Einzelformulare» dargestellt wird, wo gezeigt wird, wie dieses Einzelfeld zur Speicherung seiner Werte verarbeitet wird.
$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);Mit Einzelformularen sind einzelne Felder gemeint, die gespeichert werden müssen.
Für solche Szenarien werden die untenstehenden Methoden verwendet, die automatisch das erforderliche Formular sowie eine Speichertaste innerhalb des Formulars erstellen, falls dies der Logik entspricht.
Sie müssen im Methodenaufruf nicht einmal einen Handler angeben, erstellen Sie einfach auf Ihrem Server einen Handler nach dem Schema:
save_+feldname, also das Präfix «save_», gefolgt vom Attribut «name» des Feldes.
Schließlich müssen Sie nicht einmal einen Server-Handler erstellen, wenn Sie den Parameter «_auto_handler» übergeben, das System macht alles selbst, dies ist praktisch, wenn Sie keine zusätzlichen Verarbeitungen benötigen und nur den Wert des Feldes speichern möchten.
Verwenden Sie in Ihrem Server-Handler die Methode «ui::get_post_VAL()». Diese Methode gibt den vom Benutzer eingegebenen Wert zurück.
Der Wert, den der Benutzer in der Methode «ui::get_post_VAL()» eingibt, wird ebenfalls automatisch je nach Feldtyp gefiltert. Sie können den Filtertyp auch mit dem Parameter «post_filter» einstellen. Lesen Sie über die Besonderheiten der Datenfilterung:
Nach der Filterung gibt das System automatisch den gefilterten Wert im Feld zurück, damit der Benutzer kontrollieren kann, was er speichert.
Wenn Sie den zurückgegebenen Wert ändern möchten, verwenden Sie den Helfer «oj_ret()» mit dem ersten Argument «ret_val» und als zweites Argument den Wert, der ins Feld zurückgegeben werden soll.
1. ui::btn_onoff_with_save()
Betrachten wir ein Beispiel zum Speichern einer einzelnen Ein/Aus-Schaltfläche.
Unser Feld hat das Attribut „name“ mit dem Wert „my_onoff_short_form“, deshalb erstellen wir auf dem Server den Handler „save_my_onoff_short_form“.
Im Handler verwenden wir die Methode „ui::get_post_VAL()“, die den Wert des Buttons „Y“ oder „N“ zurückgibt.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
$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()
Speichern eines «input»-Feldes.
Erstellen Sie auf dem Server einen Handler mit der Kennung in der Form «save_+feldname». Unser Feld hat das Attribut «name» mit dem Wert «my_input_short_form», also ist die Kennung des Handlers «save_my_input_short_form».
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
$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()
Speichern von vom Benutzer hochgeladenen Dateien.
Diese Methode kann vollständig automatisch arbeiten, Sie müssen nicht einmal einen Handler erstellen, das System macht alles selbst.
Mehr Details zur Arbeit mit «input type=file» finden Sie im Link unten.
Beispiel:CLASS «ui::» | Klasse «upload::» | Beispiele für die Arbeit mit «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()
Speichern eines «textarea»-Feldes.
Erstellen Sie auf dem Server einen Handler mit der Kennung in der Form «save_+feldname». Unser Feld hat das Attribut «name» mit dem Wert «my_textarea_short_form», also ist die Kennung des Handlers «save_my_textarea_short_form».
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
$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()
Speichern eines «select»-Feldes.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
Für dieses Beispiel erstellen wir keinen Server-Handler, da wir den Parameter «_auto_handler» verwenden, der den systemeigenen automatischen Handler startet.
$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()
Speichern eines «select»-Feldes mit dem Parameter «multiple» mit dem Wert «TRUE».
Wir erstellen auf dem Server einen Handler mit der Kennung im Format «save_+feldname». Unser Feld hat das Attribut «name» mit dem Wert «my_select_multiple_short_form», daher wird die Handler-Kennung «save_my_select_multiple_short_form» sein.
Beachten Sie, dass die Methode «ui::get_post_VAL()» im Handler ein Array der vom Benutzer ausgewählten Werte zurückgibt und nicht einen einzelnen Wert wie im vorherigen Beispiel.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
$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()
Speichern eines oder mehrerer «checkbox»-Felder.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
Für dieses Beispiel erstellen wir keinen Server-Handler, da wir den Parameter «_auto_handler» verwenden, der den systemeigenen automatischen Handler startet.
$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()
Speichern eines oder mehrerer «radio»-Felder.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
Für dieses Beispiel erstellen wir keinen Server-Handler, da wir den Parameter «_auto_handler» verwenden, der den systemeigenen automatischen Handler startet.
$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);Mit komplexen Formularen sind Formulare gemeint, die mehrere Felder enthalten, die gespeichert werden müssen.
Der Aufbau komplexer Formulare sollte mit der Methode «ui::form_start()» mit den entsprechenden Parametern beginnen.
- Dann folgen die Methoden, die die Felder der benötigten Typen erzeugen.
Und schließlich muss das komplexe Formular mit der Methode «ui::form_end()» mit den entsprechenden Parametern enden.
Ein unverzichtbarer Bestandteil eines jeden Formulars, das gespeichert werden soll, ist der Speicher-Button.
Je nach den an die Methode «ui::form_end()» übergebenen Parametern kann der Button automatisch vom System gerendert werden.
Studieren Sie die Beschreibung zum Konstruktor der Methode «ui::form_end()».
Die Filterung der Eingabedaten des Formulars im Handler erfolgt mit der Methode «ui::get_post_VALS()», die die Filterung automatisch je nach Feldtyp durchführt. Die Methode gibt ein Array mit den gefilterten Werten jedes Feldes zurück. Sie können auch das Array $_POST['val'] selbst durchlaufen (nicht empfohlen).
Sie können den Filtertyp für jedes Feld bei Bedarf auch mit dem Parameter «post_filter» einstellen. Lesen Sie über die Besonderheiten der Datenfilterung:
1.
Beispiel für die Arbeit mit einem normalen komplexen Formular.
Wir geben den Formular-Handler «saves_form_example_1» in der Methode «ui::form_end()» an.
Erstellen Sie auf dem Server einen Handler mit der ID «saves_form_example_1».
Beachten Sie, dass das Präfix «saves_» in der Handler-ID verpflichtend ist!
Unser Formular enthält ein Feld vom Typ «file». Das System lädt die Datei vollständig automatisch hoch, im Handler wird keine Verarbeitung verwendet. Wie man mit Feldern vom Typ «file» arbeitet, sehen Sie im separaten Beispiel in der Dokumentation.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
$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.
Wiederholen wir das vorherige Beispiel, indem wir den Feldern «required» hinzufügen.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
Beachten Sie auch, dass in diesem Beispiel eine vollständig automatische Verarbeitung verwendet wird.
Dazu haben wir der Methode «ui::form_end()» das zusätzliche Präfix «auto:» übergeben.
In diesem Fall ist es nicht erforderlich, einen Server-Handler zu erstellen, das System erledigt alles automatisch.
$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 diesem Abschnitt betrachten wir separat die Verwendung erweiterter Verarbeitungsschemata. Unter erweiterten Schemata versteht man die Beteiligung Ihres benutzerdefinierten JS-Codes, der sowohl VOR dem Absenden von Formulardaten per Ajax als auch NACH Erhalt der Antwort per Ajax verwendet werden kann.
Studieren Sie unbedingt die Verarbeitungs-Schemata im Link unten (Konstruktor des Verarbeitungs-Schemas). Verwenden Sie diese Dokumentation, um die folgenden Beispiele zu verstehen:
1.
In diesem Beispiel fügen wir eine JS-Verarbeitung vor dem Absenden des Formulars per Ajax hinzu.
Unser Feld hat das Attribut «name» mit dem Wert «input_extend_js_1», daher lautet die Handler-Kennung auf dem Server «save_input_extend_js_1». Dieselbe Handler-Kennung wird im JS-Code verwendet. Wir erstellen das Objekt «$$.save_input_extend_js_1 = {};». Dann fügen wir dem Objekt die Eigenschaft «start» als Funktion hinzu, die unseren Verarbeitungs-Code enthält.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
$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.
Im folgenden Beispiel verarbeiten wir nach dem Erhalt einer erfolgreichen Ajax-Antwort. Dafür erstellen wir im JS-Handler analog zum vorherigen Beispiel eine Eigenschaft «cb» als Funktion.
In unserem Beispiel färbt der JS-Code nach dem Empfang der Ajax-Antwort das Feld um und fügt «disabled» hinzu.
$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.
Zum Schluss betrachten wir ein komplexeres Beispiel. Wir verwenden ein komplexes Formular. Im JS-Code schreiben wir Handler sowohl VOR dem Absenden per Ajax als auch NACH Erhalt der Ajax-Antwort.
In unserem Beispiel verwenden wir die Handler-ID «saves_complex_extend_js», die in der Methode «ui::form_end()» angegeben ist. Im JS-Code erstellen wir daher ein Objekt mit dem Namen «saves_complex_extend_js» und fügen die erforderlichen Eigenschaftsfunktionen hinzu.
Beachten Sie, dass wir auch einen Handler für das erste Select-Feld hinzugefügt haben.
Im Beispiel wird der Parameter «value_storage» verwendet, der die automatische Speicherung des Feldwerts in der Datenbank durchführt.
Beachten Sie auch, dass in diesem Beispiel eine vollständig automatische Verarbeitung verwendet wird.
Dazu haben wir der Methode «ui::form_end()» das zusätzliche Präfix «auto:» übergeben.
In diesem Fall ist es nicht erforderlich, einen Server-Handler zu erstellen, das System erledigt alles automatisch.
$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)'});
}
Manchmal ist es notwendig, einem DOM-Element einen Handler hinzuzufügen. Sie können dies mit üblichen JS-Methoden (JQUERY) tun. Damit die Handler jedoch im EGO CRM-System mit all seinen Funktionen korrekt arbeiten, muss das Element spezielle Attribute und Klassen zugewiesen bekommen.
Wenn Sie die Methode ui::dom_element() beim Erstellen des HTML-Tags des Elements verwenden, führen Sie dieses Element in die Standardarbeit des Systems ein, wie es bei Formularfeldern der Fall ist.
Sie können dann für das Element jedes beliebige Verarbeitungsschema verwenden, studieren Sie den Abschnitt «Konstruktor des Verarbeitungsschemas» im Link unten:
1.
Wir führen nur eine JS-Verarbeitung bei Klick auf das DIV-Element durch.
$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.
Wir erschweren das vorherige Beispiel durch eine Ajax-Verarbeitung.
$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.
Eine spezielle Anwendung ist das Hinzufügen eines Kontextmenüs (Rechtsklick).
Detaillierte Beispiele finden Sie unter dem Link:
Methoden werden verwendet, um spezielle Komponenten darzustellen.
1. ui::dropdown()
Dropdown-Element.
Siehe detaillierte Beispiele unter dem Link unten.
Beispiel: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 - Tabs / Pills.
Siehe detaillierte Beispiele unter dem Link unten.
Beispiel:KLASSE «ui::» | Tabs - Tabs / Pills
$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()
Galerie.
Siehe detaillierte Beispiele unter dem Link unten.
Beispiel:KLASSE «ui::» | Galerie - 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 den vorherigen Beispielen auf dieser Seite haben wir die Klasse «storage::» bereits in verschiedenen automatischen Varianten bei der Arbeit mit Formularfeldern verwendet.
Betrachten wir die manuelle Verwendung der Klasse «storage::». Die manuelle Verwendung ist erforderlich, wenn wir Werte speichern müssen, die nicht mit Formularfeldern verknüpft sind.
Es gibt viele mögliche Beispiele für die Verwendung der Klasse. Wir zeigen nur ein Beispiel.
In unserem Beispiel erstellen wir 3 Tabs. In jedem Tab befinden sich 4 Sub-Tabs.
Standardmäßig wird beim Laden der Seite Tab 1 und Sub-Tab 1 geöffnet.
Angenommen, wir müssen speichern, welcher Tab und Sub-Tab zuletzt geöffnet waren, damit beim nächsten Laden der Seite der zuletzt gespeicherte Tab und Sub-Tab geöffnet werden. Außerdem merken wir uns, welcher Sub-Tab zuletzt in jedem Tab geöffnet war.
Analysieren Sie das erstellte Beispiel.
Beispiel
Wechseln Sie die Registerkarte und Unterregisterkarte und laden Sie die Seite neu.
$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);
}