Sometimes you don't want to create a custom view for the entire record or record list, but you just want to have one particular field display or behave differently to the others. You can achieve this in WorkflowFirst by creating Custom Field Viewers. 

A Custom Field Viewer comes in two flavors: the first is the viewer HTML which is used to render the field value in its entry box. The second is the editor HTML, which is displayed in a dropdown, or in-situ for fields that are of 'Text (Paragraphs)' data type. 

You can see an example of a custom field viewer by looking at the icon selector or color selector in WorkflowFirst. You can see an in-site custom field viewer in action when you go to edit a script in WorkflowFirst. 

Unlike Custom Views, Custom Field Viewers are defined centrally and can be re-used across fields anywhere in the application. 

To create a custom field viewer, first go to the Application record, then go to the drilldown 'Field Viewers'. Then click Create New. 

The following fields will need to be entered: 

Title 

This is the title of the custom field viewer that will be displayed in the dropdown list when selecting the field viewer. 

SubFolder Name

This is the subfolder from the application file folder where any support files will be stored. 

Dropdown Width

For custom field editors that will show dropdowns, this indicates the width, in pixels, that the dropdown window will take up. 

Dropdown Height

For custom field editors that will show dropdowns, this indicates the height, in pixels, that the dropdown window will take up. 

Enabled 

By disabling a custom field viewer, all fields using this viewer will revert to the standard viewer and editor. 

View HTML

This is the snippet of HTML that will be used to display the field value when viewing the record. Any references to ~VALUE~ are replaced with the current field value, and any references to ~FIELD~ are replaced with the current field name. 

More sophisticated displays can be created by incorporating JavaScript into the HTML. Within the View HTML you can include JavaScript by inserting a <script> tag next to the value. By defining a <div> block, the script can access the div and use code to determine how the value should be displayed. 

Editor HTML File

The editor HTML is provided in a separate file because the HTML for editors is usually more complex than that used to view the field value.

Identically to the view HTML, any references to ~VALUE~ are replaced with the current field value, and any references to ~FIELD~ are replaced with the current field name.

The ~FIELD~ value is important in the editor HTML because it is needed to set the value in the field once the user is done editing the value. A special function needs to be called to set the field value: parent.setFormFieldValue.

parent.setFormFieldValue ( fieldName, display, value ) 

The fieldname would normally be entered as: 

“~FIELD~” 
 
The 'value' field should be the value you want the field to hold. The value for 'display' should be the same. 

This function should be called when the user finishes editing, perhaps when they click a button or double click their selection. It will also close the dropdown window. 

If the field editor isn't a dropdown list and is displayed in-situ, then that function may need to be called whenever the user makes any changes in the editor.