Differences

This shows you the differences between two versions of the page.

--- field_class [2021/03/10 19:43] – sahl
+++ field_class [2022/05/23 10:41] (current) – [HTML composition of form fields] sahl
@@ Line 55: / Line 55: @@
 Their presence and individual placement can vary depending on label alignment. Example of complete field output:
+<code html>
+<form id="testform">
+<div class="testform_testfield_container">
+  <div class="platform_field_label_container">
+    <label for="testform_testfield">Label:</label>
+    <div class="platform_field_input_container">
+      <input name="testfield" id="testform_testfield">
+      <div class="platform_field_error_container">
+      </div>
+    </div>
+  </div>
+</div>
+</form>
+</code>
+==== Width and sizes ====
+The field (which is considered both the field and the label will obtain 100 % of the available width).
+The field itself can be one of three sizes.
+A normal size field will be 280 px wide.
+A small size field will be 120 px wide.
+A tiny size field will be 50 px wide.
+This can be overwritten by the field-width parameter. If there isn't enough free space the field will scale down.
+The label will always be 130 px wide and if the label exceeds that amount it will appear over several lines. This can be overwritten by the label-width parameter.
+The label will always have a 0 px padding before the text and a 5 px padding after the text.
 ===== Form fields =====
@@ Line 72: / Line 100: @@
 This provides a combobox field which is a field that allow any value, but will suggest values as the user starts typing. This field uses Jquery autocomplete and takes an option named ''datasource'' which should be compatible with the ''source'' field of Jquery autocomplete.
+==== FieldComponent ====
+This field allows to add [[Component Class|Components]] as form fields. Please refer to [[FieldComponent Class]] for using this feature.
 ==== FieldDatarecordCombobox ====
@@ Line 194: / Line 225: @@
 This renders a multi-line textarea.
+===== Creating your own form field =====
+To create your own form field, you need to extend the ''Platform\Field'' object.
+==== Rendering input ====
+Overwrite the ''renderInput()'' function with code to render your input field. This input field should expose the field ID, field classes, name, value and additional attributes from the Field class. For an example of this, it is best to observe the ''FieldText'' class:
+<code php>
+public function renderInput() {
+    echo '<input class="'.$this->getClassString().'" type="text" name="'.$this->name.'" id="'.$this->getFieldIdForHTML().'" value="'.htmlentities($this->value, ENT_QUOTES).'"'.$this->additional_attributes.'>';
+}
+</code>
+==== Validating input ====
+Overwrite the ''parse($value)'' function to parse and validate your input. The ''$value'' variable will be the $_POST input related to your field, so if your field is named ''test'' you will receive the content of ''$_POST['test']''.
+This function should accomplish two things. First it should validate if the input is valid for the field. If the input is valid the function should return true. If the input isn't valid, an error should be raised by the field, which could be done like:
+<code php>
+$this->triggerError('There is an error in the input field');
+</code>
+...and the function should return false.
+Furthermore the value intended as the real output from the form should be saved in the ''$this->value'' variable. For simple fields this could just be a copy of ''$value'' but for more sofisticated fields, this value maybe needs postprocessing.
+==== Using script ====
+If the field requires javascript, this can be included using ''Page::JSfile($file)''. It should be wrapped in the ''addCustomPlatformFunction'' such as:
+<code javascript customcomponent.js>
+addCustomPlatformFunction(function(item) {
+  $('.mycomponent', item).dosomething...
+}
+</code>
+==== Other services of the Field class ====
+The field class takes care of handling the label of the field.
+You can get your field to work with the easy html form files, by naming your class Field* and adding the namespace of your class to the Form class, by using the ''addFormFieldNameSpace()'' function.
+So if you do this:
+<code php>
+namespace MyNameSpace;
+class FieldCustomField {
+  ...
+}
+$form = new Form(...);
+$form->addFormFieldNameSpace('MyNameSpace');
+</code>
+...you can create a form html field like:
+<code html test.form>
+<h1>My form</h1>
+<customfield name="myfieldname" label="Mylabel">
+</code>
+==== Best practices ====
+If you need to modify base field parameters such as adding a new class to the field, do this in the constructor with the proper functions instead of doing it in the ''renderInput()'' function.