Forms
One of the biggest features of FUEL CMS is it's ability to create simple to complicated form interfaces for your models and layouts. The main engine behind this feature is the Form_builder class.
- Examples
- Universal Field Attributes
- Form Field Types
- Custom Field Type Association Parameters
- Representatives
- Pre & Post Processing Fields
Examples
// load Form_builder; $this->load->library('form_builder'); // load the custom form fields $this->form_builder->load_custom_fields(APPPATH.'config/custom_fields.php'); // create fields $fields['linked'] = array('type' => 'linked', 'linked_to' => array('name' => 'url_title')); $fields['datetime'] = array('type' => 'datetime', 'first_day' => 2, 'date_format' => 'dd-mm-yyyy', 'min_date' => '01-01-2012', 'max_date' => '31-12-2012'); $fields['test_image'] = array('upload' => TRUE); $fields['number'] = array('type' => 'number', 'represents' => 'int|smallint|mediumint|bigint', 'negative' => TRUE, 'decimal' => TRUE); $fields['currency'] = array('type' => 'currency', 'negative' => TRUE, 'decimal' => '.'); $fields['phone'] = array('type' => 'phone', 'required' => TRUE); $fields['file_example'] = array('type' => 'file', 'overwrite' => TRUE, 'display_overwrite' => TRUE, 'multiple' => FALSE); $fields['state'] = array('type' => 'state'); $fields['list_items'] = array('type' => 'list_items'); $fields['sections'] = array( 'display_label' => FALSE, 'type' => 'template', 'label' => 'Page sections', 'fields' => array( 'layout' => array('type' => 'select', 'options' => array('img_right' => 'Image Right', 'img_left' => 'Image Left', 'img_right_50' => 'Image Right 50%', 'img_left_50' => 'Image Left 50%')), 'title' => '', 'action' => '', 'content' => array('type' => 'textarea'), 'image' => array('type' => 'asset', 'multiple' => FALSE, 'img_styles' => 'float: left; width: 100px;'), 'images' => array('type' => 'template', 'repeatable' => TRUE, 'view' => '_admin/fields/images', 'limit' => 3, 'fields' => array('image' => array('type' => 'asset', 'multiple' => TRUE)) ), ), 'view' => '_admin/fields/section', 'add_extra' => FALSE, 'repeatable' => TRUE, ); // set the fields $this->form_builder->set_fields($fields); // render the page $vars['form'] = $this->form_builder->render(); $this->load->view('page', $vars);
Many of the custom field types may throw javascript errors if used outside of the CMS because they rely on javascript configuration values which are set by jQX. These config values would need to be created on the frontend (e.g. jqx.config.fuelPath, jqx.config.imgPath, ...etc), otherwise, you may see errors in the console like "jqx is not defined".
Universal Field Attributes
The following are field parameters that can be used with any field type:
- key: a unique identifier for the field. By default, it will be the the same as the ID. This parameter is used mostly for post processing of a field
- id: the ID attribute of the field. This value will be auto generated if not provided. Set to FALSE if you don't want an ID value
- name: the name attribute of the field
- type: the type attribute of the field (e.g. text, select, password, etc.)
- default: the default value of the field
- max_length: the maxlength parameter to associate with the field
- comment: a comment to assicate with the field's label'
- label: the label to associate with the field
- before_label: displays HTML before the label
- after_label: displays HTML before the label
- required: puts a required flag next to field label
- size: the size attribute of the field
- class: the CSS class attribute to associate with the field
- style: inline style
- value: the value of the field
- readonly: sets readonly attribute on field
- disabled: sets disabled attribute on the field
- label_colons: whether to display the label colons
- display_label: whether to display the label
- order: the display order value to associate with the field
- before_html: displays HTML before the field
- after_html: displays HTML after the field
- displayonly: only displays the value (no field)
- pre_process: a pre process function that will be run on the value of the field before display
- post_process: a post process function run on post
- js: javascript file or script using <script> tag
- css: CSS to associate with the field
- represents: specifies what other types of fields that this field should represent
- data: an array of data attribute fields. For example, an array of array('type' => 'my_type', 'title' => 'my_title') would yield field attributes of data-type="my_type" data-title="my_title". This parameter is handy for adding attributes you need to use with your javascript
- row_class: sets a class on the containing table row or container div (depending on the rendering method)
- tabindex: sets the tabindex value of a field. If using a mutli select, datetime, time, or enum, the value needs to be an array
- attributes: a generic string value of attributes for the form field (e.g. 'class="myclass"'). WARNING... this may clash with other attributes specified above
Form Field Types
FUEL CMS 1.0 has added several new field types as well as made it easier to create custom form fields. In previous versions, to create a custom field type, you needed to create a custom function or class method and use the 'custom' field type to render it. In FUEL CMS 1.0, you can register those custom field types which means you don't need to make those associations for every form. It also allows you to associate them with their own javavascript files and functions to execute upon rendering. In addition, you can overwrite or augment existing field types, by adding field type associations in the fuel/application/config/custom_fields.php. For example, we use this method to associate the the datetime field type with the jQuery UI datepicker.
Custom fields require a function or class method to render the field and an association to be made in the fuel/application/config/custom_fields.php file (this file is explained below). Custom field types are not automatically load but can be done so by one of the following ways:
// loads from a config file $this->form_builder->load_custom_fields(APPPATH.'config/custom_fields.php'); // registers a single custom field $this->form_builder->register_custom_field($key, $custom_field);
By default, FUEL CMS 1.0 provides several custom field types which are defined in the fuel/modules/fuel/libraries/Fuel_custom_fields.php class.
Built-in Form_builder Field Types
FUEL Custom Field Types
- template
- block
- asset
- url
- wysiwyg
- file (overwritten for more functionality)
- inline_edit
- linked
- currency
- state
- slug
- list_items
- language
- keyval
- multi (overwritten for more functionality)
- toggler
- colorpicker
- dependent
- embedded list
- select2
text
This field type is the standard text field and the "type" parameter should be left blank or don't include it all together (it is the default field type if no representatives are used).
Note that the type being specified is empty. This is because using 'text' will create a textarea. The reason for this originally had to do with having a table field type of text would map better to a textarea then to a input text field.
Example
$fields['text_example'] = array('type' => '');
The default field type if no "type" parameter is passed is a text input field.
password
This field type creates a standard password field.
Representations
'name' => array('pwd', 'passwd') // targets any field with the name of pwd, passwd
Example
$fields['pwd_example'] = array('type' => 'password', 'label' => 'Password'); // OR with the representative $fields['pwd'] = array('label' => 'Password');
select
This field type creates a standard select dropdown box. The following additional parameters can be passed to this field type:
- options: an array of select options
- first_option: The first option of which will have a blank value (e.g. Select one...)
- model: The name of a model to use. The default method it will use is options_list. You can specify an array where the key is the name of the module and the value is either string value for the name of the model, or an array value where the key is the name of the model and the value is the method (see below). The '_model' suffix is not required when specifying the name of the model.
- model_params: Additional parameters to pass to the model method that retrieves the options
Example
$options = array('a' => 'option A', 'b' => 'option B', 'c' => 'option C'); $fields['select_example'] = array('type' => 'select', 'options' => $options, 'model' => 'people', 'first_option' => 'Select one...'); // will use the options_list method from the people_model $fields['select_example'] = array('type' => 'select', 'options' => $options, 'model' => array('my_module' => array('people' => 'people_options')), 'first_option' => 'Select one...'); // will use the people_options method from modules/my_module/people_model
checkbox
This field type creates a standard checkbox field. The following additional parameter can be passed to this field type:
- checked: determines whether to check the field selected or not
Example
$fields['checkbox_example'] = array('type' => 'checkbox', 'checked' => TRUE);
textarea
This field type creates a textarea field. Passing the 'class' parameter with a value of no_editor will render the field without the text editor (e.g. markitUp! or CKEditor depending on your settings).
- rows: determines the number of rows to display. The default is the form builder objects textarea_rows property which by default is 10
- cols: determines the number of columns to display. The default is the form builder objects textarea_cols property which by default is 60
Representations
This field is represented by wysiwyg by default.
Example
$fields['textarea_example1'] = array('type' => 'textarea', 'cols' => 40, 'rows' => 5, 'class' => 'no_editor'); $fields['textarea_example2'] = array('type' => 'textarea', 'cols' => 40, 'rows' => 5, 'class' => 'markitup'); $fields['textarea_example3'] = array('type' => 'textarea', 'cols' => 40, 'rows' => 5, 'class' => 'wysiwyg'); //ckeditor
hidden
This field type creates a standard hidden field.
submit
This field type creates a standard submit button.
Example
$fields['submit_example'] = array('type' => 'submit', 'value' => 'Save');
button
This field type creates a standard form button. The following additional parameter can be passed to this field type:
- use_input: determines whether to use either a <button> or <input type="button">. The default is TRUE
Example
$fields['my_button'] = array('type' => 'button', 'value' => 'My Button');
enum
This field type creates a standard checkbox field. The following additional parameters can be passed to this field type:
- checked:
- options: an array of select options
- model: The name of a model to use. The default method it will use is options_list. You can specify an array where the key is the name of the module and the value is either string value for the name of the model, or an array value where the key is the name of the model and the value is the method (see below). The '_model' suffix is not required when specifying the name of the model.
- model_params: Additional parameters to pass to the model method that retrieves the options.
- mode: Options are 'auto', 'radios' and 'select'. Auto will show radio buttons if there are 2 or less, and will use a single select field if there are more.
- wrapper_tag: The HTML tag to wrapper around the radio and label. Default is the 'span' tag.
- wrapper_class: The CSS class to add to the to wrapper HTML element. Default is 'multi_field'.
- spacer: The amount of space to put between each checkbox (if checkboxes are used). The default is 3 blank spaces.
- null: Set this to TRUE if you want want no radio buttons to be checked initially.
- equalize_key_value: If the options array is non-associative (numerically indexed), it will use the value of the array as the value of the radio or select option instead of the key.
Example
$options = array('yes' => 'yes', 'no' => 'no'); $fields['enum_example'] = array('type' => 'enum', 'mode' => 'radios', 'options' => $options); $fields['enum_example'] = array('type' => 'enum', 'mode' => 'select', 'options' => $options);
multi
This field type creates either a series of checkboxes or a multiple select field. The following additional parameters can be passed to this field type:
- sorting: determines whether to allow for sorting of selected options. Default is FALSE
- options: an array of select options
- model: The name of a model to use. The default method it will use is options_list. You can specify an array where the key is the name of the module and the value is either string value for the name of the model, or an array value where the key is the name of the model and the value is the method (see below). The '_model' suffix is not required when specifying the name of the model
- model_params: Additional parameters to pass to the model method that retrieves the options
- mode: Options are 'auto', 'checkbox' and 'multi'. Auto will show checkboxes if there are 5 or less, and will use a multi select field if there are more
- wrapper_tag: The HTML tag to wrapper around the chexbox and label. Default is the 'span' tag
- wrapper_class: The CSS class to add to the to wrapper HTML element. Default is 'multi_field'
- spacer: The amount of space to put between each checkbox (if checkboxes are used). The default is 3 blank spaces
- equalize_key_value: If the options array is non-associative (numerically indexed), it will use the value of the array as the value of the radio or select option instead of the key.
Representations
'type' => array('array') // targets any field with the type of array
Example
$options = array('a' => 'option A', 'b' => 'option B', 'c' => 'option C'); $fields['multi_example'] = array('type' => 'multi', 'options' => $options, 'value' => 'a');
file
This field type creates a standard file upload field. The following additional parameters can be passed to this field type:
- overwrite: sets a paramter to either overwrite or create a new file if one already exists on the server. Default will overwrite
- display_overwrite: determines if the overwrite checkbox appears next to the file upload field. Default value is TRUE
- accept: specifies which files are acceptable to upload. The default is 'gif|jpg|jpeg|png'
- upload_path: the server path to upload the file to. Default will be the asset images folder
- file_name: the new file name you want to assign
- encrypt_name: determines whether to encrypt the uploaded file name to give it a unique value. The default is FALSE
- multiple: determines whether to allow multiple files to be uploaded by the same field. The default is FALSE
- display_preview: determines whether to to display a preview of the asset
- remove_spaces: will automatically remove spaces from the file name. The default is TRUE
- replace_values: an array of key/value pairs that can be used to replace any placeholder values in the upload path
- display_input: a boolean value that will display an input field for the name of the file which can be helpful to store the uploaded files name to the database
- preview_path: A direct web path to the asset file. If not provided, it will default to either the folder or upload path values to determine the preview path
Image Specific
- is_image: will provide an image preview no matter if the image does not end with jpg, png, gif etc.
- img_container_styles: styles to associate with the image preview container (only applies to image assets)
- img_styles: styles applied to the actual image that is being previewed
- create_thumb: determines whether to create a thumbnail
- width: sets the width of the uploaded image
- height: sets the height of the uploaded image
- maintain_ratio: determines whether to maintain the images aspect ratio when resizing
- resize_and_crop: determines whether to crop the image to be forced into the dimensions
- resize_method: values can be "maintain_ratio" or "resize_and_crop". This value will trump any value set for the "maintain_ratio" and "resize_and_crop"
- master_dim: sets the dimension (height or width) to be the master dimension when resizing and maintaining aspect ratio
Representations
'type' => 'blob' // targets any field with the type of blog
Example
$fields['file_example'] = array('type' => 'file', 'overwrite' => TRUE, 'display_overwrite' => TRUE, 'multiple' => FALSE, 'file_name' => 'my_file_{id}');
Note the use of "{id}" in the file_name parameter. This will automatically merge in form field values for the name of the file.
date
This field type creates a text field with a date picker. The following additional parameters can be passed to this field type:
- date_format: The PHP date format in which you want the date to appear. This can be set in the fuel/application/config/MY_config.php as well as on the Form_builder object. The default is 'm/d/Y'
- region: You can specify a region to pull in the localization strings for the date picker. This requires the inclusion of an additional javascript file as explained here
- min_date: The default is 01/01/2000
- max_date: The default is 12/31/2100
- first_day: Defalt is 0
Example
$fields['date_example'] = array('type' => 'date', 'first_day' => 2, 'date_format' => 'd-m-Y', 'min_date' => '01-01-2012', 'max_date' => '31-12-2012');
time
This field type creates a hour and minute fields.
Example
$fields['time_example'] = array('type' => 'time');
datetime
This field type combines the date and time fields and has the same additional parameters as the date field.
This field type creates a text field with a date picker. The following additional parameters can be passed to this field type:
- ampm: Determines whether to use am / pm radio buttons or 24 hour time. Default is TRUE
Representations
'type' => 'datetime|timestamp' // targets any field with the type of datetime or timestampe (equivalent to array('datetime', 'timestamp'))
Example
$fields['datetime_example'] = array('type' => 'datetime', 'first_day' => 2, 'date_format' => 'd-m-Y', 'min_date' => '01-01-2012', 'max_date' => '31-12-2012', 'ampm' => TRUE);
number
This field type creates a number field which is supported by some modern browsers checkbox field. The following additional parameter can be passed to this field type:
- decimal: determines whether to allow decimals or not. The default is FALSE
- negative: determines whether negative numbers can be inputted. The default is FALSE
- min: the minimum number that can be inputted by clicking the number increment buttons. Default is 0
- max: the maximum number that can be inputted by clicking the number increment buttons. Default is 10
- step: determines the step value when increasing or decreasing the number
Representations
'type' => array('int', 'smallint', 'mediumint', 'bigint') // targets any field with the type of int, smallint, mediumint or bigint
Example
$fields['number_example'] = array('type' => 'number', 'represents' => 'int|smallint|mediumint|bigint', 'negative' => TRUE, 'decimal' => TRUE);
This field type creates an input field of type "email" which is supported by some modern browsers and will automatically validate the email address.
Example
$fields['email_example'] = array('type' => 'email');
range
This field type creates an input field of type "range" which is supported by some modern browsers and creates a slider. The following additional parameters can be passed to this field type:
- min: the minimum value of the slider
- max: the maximum value of the slider
Example
$fields['range_example'] = array('type' => 'range', 'min' => 1, 'max' => 10);
boolean
This field type creates either a checkbox or an enum type field (e.g. published with a "yes" and "no" radio OR simply a "yes" checkbox). The following additional parameters can be passed to this field type:
- options: an array of select options
- mode: determines whether to display enum fields or a checkbox. Options are 'enum' or 'checkbox'. The default is 'checkbox'
Example
$options = array('a' => 'option A', 'b' => 'option B', 'c' => 'option C'); $fields['boolean_example'] = array('type' => 'boolean', 'mode' => 'radios', 'options' => $options);
nested
This field type creates a nested Form_builder object. The following additional parameters can be passed to this field type:
- fields: the fields to pass to the nested Form_builder object
- init: an array of initialization parameters to be passed to the Form_builder object
Example
$f['nested_textarea'] = array('type' => 'textarea'); $f['nested_boolean'] = array('type' => 'boolean'); $fields['nested_example'] = array('type' => 'nested', 'fields' => $f, 'display_label' => FALSE);
fieldset
This field type groups fields together. If the form is rendered in the CMS, you can assign the 'class' parameter the value of 'tab' or "collapsible" and the fields will grouped under tabs or collapsible headers respectively.
section
This field type creates heading in the form. You can can pass a 'value', 'label' or 'name' with the value of the what you want to display for the section. The following additional parameter can be passed to this field type:
- tag: the HTML tag wrap around the heading (without the <>). The default is <h3>
Example
$fields['section_example'] = array('type' => 'section', 'tag' => 'h3', 'value' => 'This is a section header example');
copy
This field type creates copy block in the form. You can can pass a 'value', 'label' or 'name' with the value of the what you want to display for the section. The following additional parameter can be passed to this field type:
- tag: the HTML tag to wrap around the copy (without the <>). The default is <p>
Example
$fields['copy_example'] = array('type' => 'copy', 'tag' => 'p', 'value' => 'This is the copy example');
custom
This field type can be used to create custom field types. To create reusable custom field types, visit the next section. The following additional parameter can be passed to this field type:
- func: the name of a function or an array of an object and method to be called to render the field.
Example
function my_custom_field($params) { $form_builder =& $params['instance']; $str = $form_builder->create_checkbox($params).' '; return $str; } $fields['custom_example'] = array('type' => 'custom', 'func' => 'my_custom_field', 'display_label' => FALSE);
template
This field type can provide you a lot of flexibility in how you setup your forms by allowing you to nest sub forms and make them repeatable and draggable for reordering. This field type can work well for layout sections that have repeatable fields you may want to reorder (e.g. a title, body, image section).
- repeatable: determines whether the template can be repeatable
- min: the minimum number of times you can repeat the template
- max: the maximum number of times you can repeat the template
- fields: the fields to pass to the template (you can only nest the "template" field 2 levels deep total)
- view: the view file to use to for rendering the fields. If no view is provided, it will create a nested form builder object and render it
- template: a string value of the template as opposed to a view file to load in.
- add_extra: determines whether to display the "Add" button for repeatable templates
- depth: specifies the depth of the template (can only be 2 deep)
- dblclick: determines whether a double click is required to open up the set of fields. Options are "accordion" and "toggle"
- init_display: determines whether to open just the first repeatable set of fields, none of them, or all of them (default). Options are false, first, and none or closed (they are the same)
- title_field: the field to be used {__title__} placeholder
- parse: determines whether to parse the view or template file before rendering
- display_sub_label: determines whether to display the labels for the fields in the the sub form created (if no view is specified and it is using a nested form_builder instance)
- condensed: if TRUE, this will update there repeatable field to use a condensed styling
- non_sortable: if TRUE, this will hide the sorting grabber for repeatable fields
- removeable: determines whether the repeatable sets can be removed
- ignore_name_array: ignores the name array value that gets applied to the names of the form to create the nested array on post (e.g. array(0 => array("title" => "My Title",....)
Example
$fields['template_example'] = array('display_label' => FALSE, 'add_extra' => FALSE, 'init_display' => 'none', 'dblclick' => 'accordion', 'repeatable' => TRUE, 'style' => 'width: 900px;', 'type' => 'template', 'label' => 'Page sections', 'title_field' => 'title', 'fields' => array( 'sections' => array('type' => 'section', 'label' => '{__title__}'), 'title' => array('style' => 'width: 800px'), 'content' => array('type' => 'textarea', 'style' => 'width: 800px; height: 500px;'), ) );
You can nest a template field in the fields parameter but only one level deep.
You can use the {__num__}, {__index__} and {__title__} as placeholders in your view or template files.
block
This field type is used for dynamically pulling in block layout fields:
- folder: determines which fuel/application/views/_blocks subfolder to look in for displaying
- filter: an array or regular expression string to filter out certain files (e.g. those beginning with underscores). The default value is ^_(.*)|\.html$
- recursive: determines whether to recursively look for subfolders within the fuel/application/views/_blocks folder
- options: the options to display for the block selection. If left empty, it will default to using the Fue_blocks::options_list() method.
- where: the where condition to be used for querying blocks stored in the CMS database
- order: the order clause to be used for sorting the list option items obtained from the CMS stored blocks.
- ajax_url: the AJAX URL used to get the form fields. Default is '/blocks/layout_fields/{layout}/{page_id}/english/'
- block_name: if specified, it will automatically return the fields of that block as opposed to a dropdown list to select from
- group: if specified, will filter the options list to only those block layouts with that group name ('folder' must not be specified)
Example
$fields['block_example'] = array('type' => 'block', 'folder' => 'sections');
asset
This field type is used for uploading and assigning asset values to fields. It can provide two buttons next to the field. One to select an asset and the other to upload. The following additional parameter can be passed to this field type:
Upload Specific
- upload: determines whether to display the upload button next to the field
- folder: the asset folder to upload the asset (only applies if the upload parameter is not set to FALSE)
- multiple: determines whether you can assign more then one asset to the field which would be separated by a comma
- multiline: determines whether to use a textarea instead of a normal input field (good if using multiple parameter)
- subfolder: a subfolder to upload the images to (will create one if it doesn't exist)
- file_name: the new name to assign the uploaded file
- overwrite: determines whether to overwrite the uploaded file or create a new file
- unzip: determines whether to unzip zip files automatically or not
- accept: specifies which files are acceptable to upload. It will default to what is specified in your fuel configuration for "editable_asset_filetypes"
- remove_subfolder: removes the subfolder specified from the returned path
Image Specific
- is_image: will provide an image preview no matter if the image does not end with jpg, png, gif etc.
- img_container_styles: styles to associate with the image preview container (only applies to image assets)
- img_styles: styles applied to the actual image that is being previewed
- create_thumb: determines whether to create a thumbnail
- width: sets the width of the uploaded image
- height: sets the height of the uploaded image
- maintain_ratio: determines whether to maintain the images aspect ratio when resizing
- resize_and_crop: determines whether to crop the image to be forced into the dimensions
- resize_method: values can be "maintain_ratio" or "resize_and_crop". This value will trump any value set for the "maintain_ratio" and "resize_and_crop"
- master_dim: sets the dimension (height or width) to be the master dimension when resizing and maintaining aspect ratio
- hide_options: hides all of the upload options
- hide_image_options: hides only the image specific upload options
Representations
'name' => '.*image$|.*img$' // targets any field with the name ending with "image" or "img"
Example
$fields['image'] = array('type' => 'asset', 'folder' => 'images/my_folder', 'hide_options' => TRUE);
url
This field type is used for links/URLs. The following additional parameters can be passed to this field type:
- input: provides an input field for the link. This field is not displayed by default
- target: sets the target of the link. Options are _self or _blank. This field is not displayed by default
- title: sets the title attribute of the link. This field is not displayed by default
- pdfs: determines whether to display PDFs along with the list of URLs. Default it is set to not show PDFs (note that special logic will need to be created in the layouts to use either site_url or pdf_path functions)
- filter: a regular expression value that can be used to filter the page list down to only the pages you need
Representations
'name' => 'url|link' // targets any field with the name of "url" or "link"
Example
$fields['url'] = array();
wysiwyg
This field type is used for textareas and will use FUEL's $config['text_editor'] configuration to determine which editor to display in the field by default. The following additional parameters can be passed to this field type:
- editor: determines which editor to display in the field. Options are markitup, wysiwyg and FALSE with the default being markitup and wysiwyg being CKEditor
- class: although all fields can have the class attribute, passing the values of markitup, wysiwyg or no_editor will have the same effect as explicitly adding the editor attribute
- preview: the view file to use for previewing the content (only for markItUp! editor)
- preview_options: preview popup window options (used as the third parameter of window.open . The default is width=1024,height=768
- img_folder: the image folder to pull from when inserting an image
- img_order: the image order displayed in the dropdown select. Options are name and last_updated. Default is name
- link_pdfs: a boolean value that determines whether to display PDFs along with the list of URLs when inserting a link. Default is set to FALSE which will not show PDFs (note that special logic will need to be created in the layouts to use either site_url or pdf_path functions)
- link_filter: a regular expression value that can be used to filter the page list down to only the pages you need
- editor_config: sets the editor's (markItUp! or CKEditor) configuration values for a particular field. Camel-cased attributes need to be converted to lowercase with hyphens (e.g. extraPlugins should be extra-plugins). These configuration values are attached to the textarea field so you can use Javascript to set more complex object values as long they are set on the textarea field before markItUp! or CKEditor initialization (e.g. $('.mytextarea').data('toolbar', [['Bold','Italic','Strike']]).
- markdown: changes toolbar to use Markdown formatting instead of HTML. Must have editor set to use markItUp! (NOTE: This is only the editor. You must use the markdown() function for display in your views.
Example
$fields['wysiwyg_example1'] = array('type' => 'wysiwyg', 'editor' => 'markitup'); $fields['wysiwyg_example2'] = array('type' => 'wysiwyg', 'editor' => 'wysiwyg'); //ckeditor
inline_edit
This field type is used for associating a separate module's data with your own. The following additional parameters can be passed to this field type:
- module: the module to inline edit
- module_uri: the URI path to the module if it's different then the module name (e.g. my_module/inline_create/field1:field2)
- multiple: whether to display a multi field to associate the inline edited data with
- add_params: query string parameters to pass as pre-filled values to the inline module form (e.g. name=Han%20Solo&slug=han-solo)
- fields: the name of the fields to display separate by a colon (e.g. name:slug:published)
Example
$fields['inline_edit_example'] = array('type' => 'inline_edit', 'module' => 'projects');
linked
This field type will take the value from one field and apply it to another field after passing it through a function (e.g. a slug field being based on a title field). The default filter functions are mirror, url_title, strtolower, and strtoupper. The following additional parameter can be passed to this field type:
- linked_to: the field whose value to use if no value is provided. By default, the value will be processed through the url_title function. If an array is provided, the key is the name of the field to link to and the value is the function to transform the value (e.g. array('name' => 'url_title'))
Example
$fields['name'] = array(); // field to link to $fields['linked_example'] = array('type' => 'linked', 'linked_to' => array('name' => 'strtoupper'));
currency
This field type can be used for inputting currency values. The following additional parameters can be passed to this field type:
- currency: the currency value to display next to the field. The default is '$'
- separator: the separator to use for the grouping of numbers. The default is ','
- decimal: the decimal separator. The default is "."
- grouping: the number of ...err numbers to group by. The default is 3
- min: the min number to allow for the field (including negative numbers). The default is 0.00
- max: the max number to allow for the field. The default is 999999999.99
You must specify a default value for the field which is greater than or equal to the minimum value and less than or equal to the maximum value
Example
$fields['currency'] = array('type' => 'currency', 'decimal' => '.', 'currency' => '€', 'min' => -1000, 'max' => 1000);
state
This field displays a dropdown of states to select from. It automatically pulls it's options from the fuel/application/config/states.php config file. The following additional parameters can be passed to this field type:
- format: the value can be either "short" or "long". Default is none in which the saved value will be the state abbreviation but the displayed option value will be the states name
Representations
'name' => 'state' // targets any field with the name of state
Example
$fields['state'] = array('type' => 'state');
slug
This field type can be used for creating slug or permalink values for a field using the url_title function. The following additional parameter can be passed to this field type:
- linked_to: the field whose value to use if no value is provided. If another field of 'title' or 'name' exists in the $_POST, then that value will be used as a default.
Representations
'name' => 'slug|permalink' // targets any field with the name of slug or permalink (e.g. could also use array('slug', 'permalink'))
Example
$fields['title'] = array(); // field to link to $fields['slug_example'] = array('type' => 'slug', 'linked_to' => 'title');
list_items
This field type allows you to create bulletted list items by separating each line by a return. The data saved in the database will be either an unordered or ordered HTML list. The following additional parameter can be passed to this field type:
- list_type: the list type. Options are either "ol" or "ul". Default is "ul".
Example
$value = "line1\nline2\nline3"; $fields['list_items'] = array('type' => 'list_items', 'value' => $value, 'list_type' => 'ol');
language
This field type generates a dropdown select with the language values specified in MY_fuel.php.
Representations
'name' => 'language' // targets any field with the name of language
Example
$fields['language_example'] = array('type' => 'language');
keyval
This field allows you go create a key / value array by separating keys and values with a delimiter. Each key/value goes on it's own line. The post-processed result is a JSON encoded string:
- row_delimiter: the row delimiter used to separate between key/value pairs. The default is a "\n|," (return, pipe, comma).
- delimiter: the delimiter used to separate between a key and a value. The default is a ":" (colon).
- allow_numeric_indexes: determines whether to display numeric indexes or not.
- allow_empty_values: determines whether to display items that may have no value.
Example
$fields['keyval_example'] = array('type' => 'keyval');
toggler
This field is essentially an enum field that toggles the display of specified fields. To make a field toggleable, you need to give it a class parameter with a value of "toggle" and an additional class value that correlates to the value selected from the toggle field. The following additional parameter can be passed to this field type:
- prefix: a value that can be used to prefix class names that are used to identify fields to toggle on and off.
- selector: the jQuery context selector in which to execute the toggle. The default is the .form class.
- context: the parent jQuery selector that will be hidden. The default is the containing "tr" element.
Example
$fields['toggler_example'] = array('type' => 'toggler', 'prefix' => 'toggle_', 'options' => array('1' => 'One', '2' => 'Two')); $fields['toggler_field1'] = array('class' => 'toggle toggle_1'); $fields['toggler_field2'] = array('type' => 'select', 'class' => 'toggle toggle_2', 'options' => array('1' => 'One', '2' => 'Two'));
colorpicker
This field provides a hexidecimal color picker:
Example
$fields['colorpicker_example'] = array('type' => 'colorpicker');
dependent
This field allows you to have one field determine the options of another field:
- depends_on: the name of the select that the secondary dropdown depends on
- url: the URL for the AJAX request. The default URL is to fuel/{module}/ajax/options which maps to the Base_module_model::ajax_options() method which returns a string of HTML form element options. Any method on your model beginning with ajax_{method} can be accessed via the fuel/{module}/ajax/{method} and is passed an array of any POST and GET parameters that were passed in the AJAX request.
- multiple: determines if the field is a multi-select or not
- ajax_data_key_field: an optional field name to use for the value that will be passed via AJAX. The default is the value of the "depends_on" field
- additional_ajax_data: an array of additional data that will be passed via AJAX
- replace_selector: the selector used for replacing the HTML after a selection from the drop down. The default will replace the options of the dependent select
- func: a callable function to be used as the field output. The default output will be a dropdown select
Example
$fields['dependent_example'] = array('type' => 'dependent', 'depends_on' => 'language', 'url' => fuel_url('my_module/ajax/options'), 'multiple' => TRUE, 'replace_selector' => '.language_depends');
embedded list
This field creates an unsortable list view of another module's data using the Data_table class. Each row has an edit button that displays a modal window of the edit screen from that module. The base_module_model has 2 methods on it to help facilitate this class. The first is the get_embedded_list_items method which renders the HTML for the table. The second is the ajax_embedded_list method that is called via AJAX to refresh the table after editing data in the modal window.
- module: the module whose data will be displayed
- create_button_label: the label of the create button
- create_url_params: additional initialization parameters to pass when creating a new record. This is often used to pre-populate form field values. Also, since they are passed as query string parameters, you can use $this->CI->input->get('my_param') to dyanmically change elements in your form (e.g. make some fields hidden).
- edit_url_params: similar to create_url_params but for editing a record.
- display_fields: an array of fields to display when editing or creating.
- method: the method on the model that returns the data table. The default is the built-in get_embedded_list_items method
- method_params: a key value array of parameters to pass to the model method. If a key of where is passed, it will automatically apply the where condition to the list view
- cols: An array of columns to display. The default will be the main display_field column. Additionally, you can overwrite the model's get_embedded_list_items() method and pass in the columns you want displayed.
- actions: An array of actions to include. Options are "edit", "view", "delete" and "custom" with custom being an array of URI and link text. Default value is the "EDIT" action.
- tooltip_char_limit: A key value array with the key being the field name and the value being the character limit of a field in which to display a tooltip. Default is 0 which won't show the tooltip
Example
$fields['embedded_list_example'] = array('type' => 'embedded_list', 'module' => array(FUEL_FOLDER => 'fuel_tags_model'), 'cols' => '', method_params' => array('where' => array('context' => 'test')));
select2
This field type can be used with any select field and transforms it into a searchable list using the Select2 plugin.
- width: the width of the field. The default is 225px
Example
$fields['select2_example'] = array('type' => 'select2');
Custom Field Type Association Parameters
Creating a custom field type requires an association be made in the fuel/application/config/custom_fields.php to the $config['custom_fields'] initialization parameter. The following parameters can be used in the association:
- class: key is the module, and the value is the class
- function: the method to execute. If no class is specified, then it will call it like a normal function
- filepath: the path to the class or function. If no file path is provided, it will look in libraries folder
- js: the javascript file to include. Can be a string or an array (uses the assets js() function)
- js_function: the name of the javascript function to execute upon rendering of the form
- js_exec_order: the execution order of the javascript function
- css: the CSS file to include. Can be a string or an array (uses the assets css() function)
Example
'class' => array(FUEL_FOLDER => 'Fuel_custom_fields'), // key is the module, and the value is the class 'function' => 'template', // the method to execute. If no class is specified, then it will call it like a normal function 'filepath' => '', // if no file path is provided, it will look in libraries folder 'js' => array( FUEL_FOLDER => // the module in which assets/js folder to look in 'jquery/plugins/jquery.repeatable', // the path to the javascript file relative to the assets/js folder ), 'js_function' => 'fuel.fields.template_field', // the name of the javascript function to execute upon rendering of the form 'js_exec_order' => 0, // the execution order of the javascript function 'css' => '', // the path to the css file relative to the assets/css folder
Representatives
Also new to the Form_builder class is the concept of representatives. Representatives allow you to assign a field with certain attributes (e.g. type, name, etc) to a specific field type. For example, FUEL will automatically set a field with a name of 'pwd' or 'passwd' to be the 'password' type field. Or, if you have a field of type 'int', 'smallint', 'mediumint', 'bigint', it will be assigned the 'number' field type. When assigning a representative, the key is the field type to be the representative and the value is either an array or string/regular expression to match for fields to represent.
There are several ways to assign representatives to a field type:
The first is to add them to the $config['representatives'] array in the fuel/application/config/custom_fields.php:
// will assign any field of type 'int', 'smallint', 'mediumint' or 'bigint' to be represented by the 'my_field' type $config['representatives']['my_field'] = => array('int', 'smallint', 'mediumint', 'bigint'); // will assign any field with the name of 'pwd' or 'passwd' to the type of 'my_field'. This method is using the name attribute as the key. // If no key then it will assume the attribute is 'type' $config['representatives']['my_field'] = => array('name' => array('pwd', 'passwd'));
The second way is to assign them using the 'represents' attribute when making a custom field type association. For example, both the datetime and wysiwyg use this method by default as shown below:
$config['custom_fields'] = array( 'datetime' => array( 'css_class' => 'datepicker', 'js_function' => 'fuel.fields.datetime_field', // 'js_params' => array('format' => 'mm-dd-yyyy'), 'represents' => 'datetime|timestamp', ), 'wysiwyg' => array( 'class' => array(FUEL_FOLDER => 'Fuel_custom_fields'), 'function' => 'wysiwyg', 'filepath' => '', 'css' => array(FUEL_FOLDER => 'markitup'), 'js' => array( FUEL_FOLDER => array( 'editors/markitup/jquery.markitup', 'editors/markitup/jquery.markitup.set', 'editors/ckeditor/ckeditor.js', 'editors/ckeditor/config.js', ) ), 'css' => array(FUEL_FOLDER => 'markitup'), 'js_function' => 'fuel.fields.wysiwyg_field', 'represents' => array('text', 'textarea', 'longtext', 'mediumtext'), ),
The third way is to assign it when creating a field like so:
$fields['my_field'] = array('type' => 'my_field', 'represents' => 'blob');
The fourth way of setting a representative is to simply use the set_representative method on the form_builder object like so:
$this->form_builder->set_representative('my_field', array('blob'));
Removing Representatives
Sometimes a field may be using a representative that you don't won't. For example, you may have a field that has "url" in the name and it is using the url field type which you don't want. To fix that you can use the ignore_representative parameter like so:
$fields['my_field'] = array('type' => 'my_field', 'ignore_representative' => TRUE);
If you'd like to remove a representative completely from the form_builder instance, you can use the remove_representative like so:
$this->form_builder->remove_representative('url');
Pre & Post Processing Fields
If you need a field that does additional processing before being set as the value of the field or after posting, you can create a pre-processing or post-processing function to handle it. To register that function with the field, you specify the pre_process or post_process parameter respectively. The value assigned to the the pre/post_process parameters is the name of the function (as a string), a lambda function, or an array with the first value being the instance of an object and the second value being the name of the method on that object. There are several custom functions that take advantage of this feature including the asset, slug template, currency and keyval field types.