Creating a Color Picker Custom Field

One of the bigger changes to FUEL CMS 1.0 is the ability to create your own custom field types. This gives you amazing flexibility when creating forms for your layouts and modules. Custom fields are setup similar to CodeIgniter hooks in that you create an array of file configuration information that maps to a certain field type.

The following are steps for creating a color picker field type and adding it as a layout field:

1. Visit www.eyecon.ro/colorpicker/ and download the jQuery color picker plugin.
2. Place the contents of the downloaded js folder in a folder at assets/js/colorpicker.
3. Place the downloaded css/colorpicker.css file in the assets/css/ folder.
4. Create a file at fuel/applciation/libraries/MY_custom_fields.php and add the following:

   class MY_custom_fields {
   
   	function colorpicker($params)
   	{
   		$form_builder =& $params['instance'];
   
   		// normalize value to not have the #
   		if (!empty($params['value']))
   		{
   				$params['value'] = trim($params['value'], '#');
   		}
   		
   		$js = '<script type="text/javascript">
   			    $(function(){
   					var $activeColorPicker = null;
   
   					var setSwatchColor = function(hex, elem){
   						if (!elem) elem = $activeColorPicker;
   						$(elem).parent().find(".colorpicker_preview").css("backgroundColor", "#" + hex);
   					}
   
   					$(".colorpicker_preview").on("click", function(e){
   						$(this).parent().find(".field_type_colorpicker").ColorPickerShow();
   					})
   
   					$(".field_type_colorpicker").ColorPicker({
   						onSubmit: function(hsb, hex, rgb, el) {
   							$(el).val(hex);
   							$(el).ColorPickerHide();
   						},
   						onBeforeShow: function () {
   							$activeColorPicker = $(this);
   							$(this).ColorPickerSetColor(this.value);
   						},
   						onChange: function (hsb, hex, rgb) {
   							$activeColorPicker.val(hex)
   							setSwatchColor(hex, $activeColorPicker);
   						}
   					})
   					.bind("keyup", function(){
   						$(this).ColorPickerSetColor(this.value);
   						var hex = $(this).val();
   						setSwatchColor(hex, this);
   					});
   			    })
   			    </script>
   			';
   		$form_builder->add_js($js);
   		$params['class'] = (!empty($params['class'])) ? $params['class'].' field_type_colorpicker' : 'field_type_colorpicker';
   		$params['type'] = 'text';
   		return $form_builder->create_text($params);
   	}
   
   }

   Note that FUEL’s built in custom fields can all be found in the fuel/modules/fuel/libraries/Fuel_custom_fields.php file.

   The colorpicker method simply returns the HTML for the field. It is passed an array of Form_builder parameters, including a reference to the Form_builder instance that will be rendering the form. In this example, we are adding the javascript in the method. However, you can tell Form_builder to load in external javascript files by passing an array or a string value that doesn’t begin with <script. This piece of javascript is what is used to instantiate the colorpicker on all elements with the class of field_type_colorpicker assigned to it (which we are adding to each color picker field right below).

   
   

 

5. The next step is to make the associations for the field type. This is done in the fuel/application/config/custom_fields.php file. Add the following to that file:

   $fields['colorpicker'] = array(
   								'class'		=> 'MY_custom_fields',
   								'function'	=> 'colorpicker',
   								'css' 		=> 'colorpicker/colorpicker',
   								'js' 		=> array(
   									'colorpicker/colorpicker',
   									'colorpicker/eye',
   									'colorpicker/utils'
   								),
   								'represents' => array('name' => 'color'),
   

   Note that we are mapping this field type to the class MY_custom_fields and it’s method (function) colorpicker. Similar to CodeIgniter hooks, you can also just pass it a function parameter with no class value and supply a filepath parameter for the location of the file. The css parameter maps to the assets/css folder. Similarly, the js parameter maps to the assets/js/colorpicker/ folder. If your custom field is located in an advanced module folder (say mymodule), you can pass an array structure like the following).

   'js' => array(
   				'mymodule' => array(
   				'colorpicker/colorpicker',
   				'colorpicker/eye',
   				'colorpicker/utils'
   				)
   

   The represents parameter is a way to map field characteristics to a field type. In this case, we are mapping any field that has a name parameter with “color” in it (also accepts a regular expression).

   
   

 

6. Lastly, add the following to your fuel/application/config/MY_fuel_layouts.php file under your main layout’s fields parameter:

   	'color' => array('type' => 'colorpicker'), // the type parameter is not really needed because of the representative value
   	

   Visit the user guide to learn more about creating layouts.

That should be it. Now log into the CMS and create a page using the main layout and you should see a new “color” field that when clicked in, will display the color picker.