Custom Fields - Documentation topics on: content,cookbook,custom content fields,fields,integration,.

Custom Fields

Custom fields allow developers to create unique and domain specific form controls and interactions that can be used by content editors.  These fields then store the resulting values in dotCMS on the content object for use when the content is accessed or rendered.  Custom fields are simple to write, made up of HTML, Velocity, Javascript, and can add powerful interaction to your content editing screens.  

Simple Custom Field Example

Below is a simple example of a custom field.  To use it, you need to add a Custom Field to a content object and name this field "Test".  Place the code below in the "value" textbox for the custom field.  (Pro Tip: Make your custom fields a .vtl file and then put a  in the value textbox of the custom field. This allows you to edit the custom field via webdav and it is versionable, etc..)  Because custom fields are just HTML/JS/Velocity, you have access to all the velocity tools provided by dotCMS, including custom ones that you can provide.

## This example uses a custom field that is called "test" and has the variable name "test"
 
## first we get the content (we have access to all our 
## velocity tools, including any custom ones that have been written
 
 
#set($content = $dotcontent.find($request.getParameter("inode")))
 
 
## then we write some ugly js to get and set the values on the edit content form - 
## the dom.id of the hidden field that stores the value is just the velocity variable name
## so watch out for js variable scope issues
 
<script>
	function myButtonClick(){
		var x = document.getElementById('test').value;
 
		if(x==undefined || x.length==0){
			x=0;
		}
		else{
			x=parseInt(x)+1;
		}
		document.getElementById('test').value=x;
		document.getElementById('customValue').innerHTML=x;
	}
</script>
 
 
 
## then we write out our user controls, displaying the value stored in the content object by default
## with a button (dojo styled) that calls our js
 
Custom Value: <span id="customValue">$!content.test</span>    
<button dojoType="dijit.form.Button" id="myButton" onclick="myButtonClick">Click me!</button>

Google Maps Example

The demo site of dotCMS offers a few demonstrations of how custom fields can be leveraged.   For example, if you edit a "News" content item from the demo site's admin screen, you can see a button control that pops up a Google Maps window.  This widget allows you to select a geographic location for your news content.  The location you select sets the latitude and longitude, which is stored in the "News" content object and makes the news geo-locatable.

YouTube Widget Example

Another example on the demo site is the Youtube Widget.  This content type allows users to search Google's YouTube library and select a video.  The custom field stores the YouTube ID and then populates the rest of the contents fields with the video's metadata (from Google).

Other Examples

For more examples of custom fields, see our codeshare site:

http://dotcms.com/codeshare/?codeSearch=custom+field