Form Fields
The form fields in Forms come in different types, each having its own declaration methods. Let's take a look at the most commonly used field types.
Single-line Text Field
The single-line input field <input type="text"> can be created using the text(field_name, field_title, default_value, is_lang) method.
$form
->text(
'author', # form field name attribute
$this->langAdmin('Name'), # field title
'', # default value
true # enable language support for the field
)
->required($this->langAdmin('Enter the author name'));
For all types of text fields, it is recommended to use language support for the content. Please note that in this case, the form data will come in the form of a JSON string and the database table field should be of type TEXT or there should be an additional table in the database responsible for language support.
The ->required() method allows you to mark the field as required and set a validation message in case the form is saved with an empty field.
Multi-line Text Field
For the multi-line text input field, <textarea>, there is a corresponding textarea(field_name, field_title, default_value, is_lang, opts) method.
$form
->textarea(
'short_description', # form field name attribute
$this->langAdmin('Short Description'), # field title
'', # default value
true # enable language support for the field
)
->tip($this->langAdmin('Additional clarification (hint)'));
The ->tip() method allows you to provide a hint for the field, which will be displayed as a small popup when hovering over the ? symbol next to the field label.
Checkbox
For the checkbox input field, <input type="checkbox">, there is a corresponding checkbox(field_name, field_title, is_checked, opts) method.
$form
->checkbox(
'enabled', # form field name attribute
$this->langAdmin('Disabled'), # field title
true # `checked` attribute value
)
->label($this->langAdmin('Text to the right of the field'));
The ->label() method allows you to provide a clarification for the field, which will be displayed right next to the field on the right side.
Checkbox List
A checkbox list is implemented by the method checkboxList(field_name, field_title, callback, is_rotate).
$form
->checkboxList(
'list_1', # form field "name" attribute
$this->langAdmin('List_1'), # field title
null, # checkbox list callback
true # ability to rotate (move) list items
)
->option('key_1', 'Title 1', false)
->option('key_2', 'Title 2', false)
->option('key_3', 'Title 3', true)
->option('key_4', 'Title 4', true)
->option('key_5', 'Title 5', true)
->checkboxList(
'list_2',
$this->langAdmin('List_2'),
function () {
return [
['id' => 1, 'title' => 'Title 1'],
['id' => 2, 'title' => 'Title 2', 'checked' => true],
];
}
);
A checkbox list can be added using option(key, title, checked) method,
or it can be generated through a callback in the checkboxList method, returning an array in the following format:
[
['id' => $id_1, 'title' => $title_1],
['id' => $id_2, 'title' => $title_2 'checked' => true],
...
]
Rotation of list items is also available, which is set by the fourth parameter of the checkboxList method.
Number
The numeric field <input type="number"> has a corresponding method number(field_name, field_title, min, max, step, default, opt).
$form->number(
'percent', # the form field attribute "name"
$this->langAdmin('Percent') , # the field title
0, # the minimum allowed numeric value
100 # the maximum allowed numeric value (0 - no limit)
);
Radio Button Field
To create a radio button field <input type="radio">, use the method radio(field_name, field_title, optionsCallback, opts)
$form
->radio(
'post_visible', # the form field attribute "name"
$this->langAdmin('Post Visibility') # the field title
)
->option(
'1', # the attribute "value"
$this->langAdmin('Yes') # the label
)
->option('2', $this->langAdmin('No'))
->option('3', $this->langAdmin('Maybe'));
Make sure to specify the available options using option(radio_value_key, label_title).
Select Field
To create a select field, use the method select(field_name, field_title, default_id, callback_options, callback_empty_option)
$form->select(
'cat_id', # the form field attribute "name"
$this->langAdmin('Category'), # the field title
false, # the ID of the default selected option
function() { # callback function to get the select options in the format [$id => ['id' => $id, 'title' => $title]]
$data = $this->model->categoriesListing();
return \func::array_transparent($data, 'id', true);
},
function() use(& $form) { # callback function called before rendering, in this example used to set the text of the default option
return $form->recordID() ? false : $this->langAdmin('Select');
}
);
In this example, we are not using the default_id (you can pass the default cat_id) to show how to set an additional option in the select field.
Note the callback function to get the select options, it can return an array in the format [$id => ['id' => $id, 'title' => $title]] or an HTML string with the already formed option elements.
When integrating the form component into a list, when editing a record from the list, the method recordID() is available, allowing you to retrieve the current record's id and set it as the default option.
Let's consider an example:
$form->select('cat_id', $this->langAdmin('Category'), false, function($field) use(& $form) {
$data = $this->model->categoriesListing();
$result = [];
if ( ! $form->recordID()) {
$result[] = '<option value="0">' . $this->langAdmin('Select') . '</option>';
}
$val = $field->value();
foreach ($data as $v) {
$result[] = '<option value="' . $v['id'] . '"' . ($val == $v['id'] ? ' selected="selected"' : '') . '>' . $v['title'] . '</option>';
}
return join('', $result);
});
The callback parameter for getting dropdown list items is the current field object $field,
which allows you to retrieve the value for the current field, in this case the cat_id record category identifier.
Thus, you can set the selected attribute for the previously selected category when editing the record.
Date selection field
The date selection field is defined using the datepicker(field_name, field_title, default) method.
$form->datepicker(
'created', # form field "name" attribute
$this->langAdmin('Publication Date'), # field title
$this->db->now() # default value
)->required($this->langAdmin('Set the publication date'));
Images
Image upload is performed using the method images(field_name, field_title, count, maxSize, sizes).
$form->images(
'post_images', # form field "name" attribute
$this->langAdmin('Images'), # field title
5 # maximum number of images
);
You can also specify the maximum size of the uploaded images in bytes (default is 4MB per file),
and an array of sizes (by default, images are saved in two sizes
's' => ['width' => 100, 'height' => 100] and 'o' - the original image size).
It should be noted that the data from the form comes as a JSON string and requires a field in the database table of type TEXT.
To obtain the URL of the first saved image for display,
for example, in the list, you can use the getImageURL(imgs_json, size) method.
$list
->column('main_img', $this->langAdmin('Main Image'), 150, [
'type' => $list::COLUMN_TYPE_CUSTOM,
], function($value, $item, $opts){
return !empty($item['main_img'])? '<img style="width:50px" src="' . Form::getImageURL($item['main_img'], 's') . '">': '';
});
To obtain the path to all uploaded images, use the Form::getImagesPath($item['main_img'], 's') method.
Files
Uploading files is similar to uploading images, use the methodfiles(field_name, field_title, count, maxSize, public, extensions)
$form->files(
'documents', # form field "name" attribute
$this->langAdmin('Documents'), # field title
2 # maximum number of files
);
To obtain the URL of all uploaded files, use the method getFilesURL($item['documents']).
Static Text
There are special form fields that allow displaying static text -
the value of a field without an tag.
This is implemented using the method staticText(field_name, field_title, content).
$form->staticText(
'status',
$this->langAdmin('Name')
);
The content of the 'status' key will be displayed as static text in the record editing form.
Divider
A divider is another type of special form element, created using divider(content, align).
The parameters are the content, by default it is the <hr /> tag, and the alignment of the divider to either side of the form.
WYSIWYG Editor
A text editor can be used as a form field using wysiwyg(field_name, field_title, default, is_lang, width, height)
or wysiwygFCK(field_name, field_title, default, is_lang, width, height).
Additional parameters allow you to customize the height, width, and other visual settings of the editor.
It is also recommended to use multilingual support. Note that in this case, the form data is received as a JSON string
and the database column for storage should be of type TEXT or similar.
$form->wysiwyg('post_content_1', $this->langAdmin('Post Content'));
$form->wysiwygFCK('post_content_2', $this->langAdmin('Post Content'));
Components
Form fields can also include special components: autocomplete fields, tags, Publicator content builder, and dynamic properties. These fields allow you to significantly expand the functionality of the entities being developed and improve ease of use in forms. Read about them in the article "Components"