Custom columns: JavaScript custom display functions

User Experience Workflow Portal
1

The custom display functionality is optional, and lets you customize the way in which you display the value in your custom column. For example, you could use this functionality to show a number in either green or red depending on whether it’s above or below 0. It has five arguments:

  • row: An array of the values for the current row. Each column has a unique identifier you need to use to get the desired value. For example, you can get the request number of the current row by using row['requestNumber']. You can also use the tool located on the upper-right corner of textarea.

  • columnfield: The current identifier of the column.

  • value: The value returned by your compute function for the current cell.

  • defaulthtml: The default HTML the grid would use if no custom display was declared.

  • columnproperties: An array with the column’s properties.

Examples of custom display functions

Show numeric value

When your computed function returns a numeric value, you often want to limit the number of decimal places displayed. A good way to achieve this is to use the toFixed(n) JavaScript function, where n is the number of decimals to be displayed. The following example will take the numeric value and ensure it will always display only two decimals:

return value.toFixed(2);

Currency

To show a currency, you can also use the toFixed(2) function, and add the currency symbol where you need to. For example:

return "$" + value.toFixed(2);

Datetime

If your computed function returns a datetime value, you’ll probably want to format it to a more readable format for the user:

return value.toLocaleString();

HTML

The custom display function is designed so you can return HTML. It is then possible to build a rich grid with advanced features. For instance, you could decide to show all the values of a column in blue:

return '<span style="color:#0000FF;">'+value+'</span>';

You can also return other types of HTML elements such as a link; for example:

return '<a href="http://www.example.com/'+row['requestNumber'];+'">'+value+'</a>'

If you want to change the alignment of your data, you can do by manipulating the columnproperties element:

columnproperties.align = 'center'; return value;

Resources

For information on computing in JavaScript, see the Custom columns: JavaScript computing topic.

For information on formulas and custom dates and times, see the Custom columns: Formulas and custom dates/times topic.