Defining Render Hooks

Syntax

Render Hook definitions containing syntax errors are ignored and a message is written to the client log.

You can define Render Hook functions for all field types.

Render Hook functions work for List, Expand/Quick and Minidetails views in both View and Edit mode. Exceptions: imageAdd and imageReplace only work for List and Minidetails views and only in View mode.

You can only set conditions for fields that are part of the control's configuration: The rendering function is not activated if either the field where the Render Hook is defined or the comparison field(s) used in the JavaScript code are not configured in the current view. Therefore, if a condition uses a field from a linked info area, you need to configure this field into the control as a (hidden) linked field. For further details, see Add Linked Fields.

Example

To set the formatting of a field:

$.setColor("white");$.setBackgroundColor("black");

To define conditional formatting for a field:

• If the Postal Code field of a company (XML name: "ZipCode") is empty or undefined, set the background color to red:

  if (!$.getValue("ZipCode"))
                    {$.setBackgroundColor("red");}

• For person records, if the Postal Code of the parent company has a value between 1000 and 1999, set the context background color to pale green:

  if	($.getValue("ZipCode","FI")>=1000 &&
                    $.getValue("ZipCode","FI")<2000)
                    {$.setContextBackgroundColor("#CCFACC");}

• If a company's Postal Code has the value "1040", set the font color to red, in all other cases set it to blue:

  if	($.getValue("ZipCode")==1040)
                    {$.setColor("green");}
                    else
                    {$.setColor("blue");}

• If a company's Revenue field has exactly the value "1.000.000", set the font color to red; if it has a value below 1.000.000, set the background color to grey; if it has a value above 1.000.000, display an image in front of the value:

  var _strText = $.getValue("Revenue").replace(/\./g, "" );
                    var _revenue = parseInt(_strText);
                    
                    if (_revenue == 1000000) {$.setColor("red");};
                    if (_revenue < 1000000) {$.setBackgroundColor("grey");};
                    if (_revenue > 1000000) {$.imageAdd("ico_Sales.png");};

• Set the font color, if the Subject of an activity contains a certain string:

  var _searchFor = "update"
                    var _string = $.getValue().toLowerCase();
                    StringContains = _string.indexOf(_searchFor) != -1;
                    
                    if (StringContains) {$.setColor("green");}

• Set the background color of a ticket's Priority field for open tickets only (i.e. field Status (XML name "AccSwitch") != "Closed"):

  if ($.getValue("AccSwitch")!=2)
                    {
                    if ($.getValue()==1)
                    $.setBackgroundColor("#dd0000");
                    else if ($.getValue()==3)
                    $.setColor("#00dd00");
                    }

To define conditional formatting based on catalog values you need to specify the value's code/external key/ID:

• Set the font color depending on a company's country:

  if	($.getValue("Country")=="2")
                    {$.setColor("blue");}
                    Since the codes of variable catalogs may not be unique in your environment, you can define a render hook using external keys instead:
                    var code = $.getValue();
                    var catalogField = u8.services.schema.getField("FI", "Country");
                    var externalKey = u8.services.catalogs.codeToExternalKey(catalogField, code);
                    
                    if (externalKey == "100_2_42") {$.setColor("blue");}

• Add icons to the Activity Type field e.g. in MA's MiniDetails view:

  var _cnt = $.getValue("Contact");
                    
                    switch (_cnt) {
                    case "0":
                    {$.imageAdd("u8-contacttype-phone-xs.png");}
                    break;
                    case "1":
                    {$.imageAdd("u8-contacttype-visit-xs.png");}
                    break;
                    case "5":
                    {$.imageAdd("u8-contacttype-email-xs.png");}
                    break;
                    default:
                    {$.imageAdd("u8-contacttype-event-xs.png");}
                    break;
                    }

• Add an exclamation mark to the Subject field for tickets with Priority "high":

  if($.getValue("Priority")==1)
                    $.imageAdd("u8-participationtype-required-xs.png");
                    else $.imageAdd("u8-shim.png");

To define conditional formatting based on a Boolean field:

• Different coloring for true/false:

  if	($.getValue("FreeL1") == u8.session.localeSettings.booleanTrue)
                    {$.setColor("blue");}
                    else
                    {$.setColor("grey");}

• Display an icon for recurring activities (as configured in the MA List control in UPDATE_DEFAULT):

  var isSerialContact = u8.services.typeConverter.toBoolean($.getValue("IsSerialContact"));
                    $.imageAdd(isSerialContact ? "ico_recurring.png" : "shim.png"); 

var	_rep=$.getValue("Rep");
               
               if	( _rep == u8.session.identity.repName)
               {$.setContextBackgroundColor("yellow");}
               else
               {$.setContextBackgroundColor("white");}
               if	(_rep == "Administrator")
               {$.setContextBackgroundColor("red");}

Render Hooks with date/time:

• Display scheduled activities for today and older in another color:

  var dtToday = new Date();
                    var u8date = u8.services.typeConverter.toDate($.getValue("Date"));
                    if (u8date <= dtToday && $.getValue("Status")=="0")
                    {$.setContextBackgroundColor("#ffc000");}

• Comparing dates: To set a different row color for To-Dos linked to Activities with Date (MA) = StartDate (TD) define the following for the Starts on field in TD. (Don't forget to configure the Starts on field from MA into the TD List control.)

  var _getMAStartDt = $.getValue("Date","MA");
                    var _TDStartDt = $.getValue();
                    if (_getMAStartDt == _TDStartDt) {$.setContextBackgroundColor("yellow");}

• Comparing times (by extracting the time from a date field):

  var _todayDt = new Date().stripTime();
                    var _freeD1  = u8.services.typeConverter.toDate($.getValue()).stripTime();
                    if (_todayDt.getTime() == _freeD1.getTime())
                    {$.setBackgroundColor("blue");$.setColor("white");}

var text = $.getText();
               text = text.substring(0, text.indexOf("<"));
               $.setText(text);

if ($.getValue("ZipCode") == "1040") {$.addClass("myCustomCSSClass","../styles/custom.theme/custom.css");}