﻿<!DOCTYPE html><html lang="en"><head>
<meta charset="utf-8">
<title>Single View Helper 1</title>
<style>
body {
    background-color: transparent;
    margin: 0px 5px 0px 5px;
    padding: 0px 5px 0px 5px;
    font-family: Segoe UI,Tahoma,Arial;
    font-size: 12px;
}
h3 {
    color: #666666;
    font-family: "Segoe UI",Tahoma,Arial;
    font-weight:bold;
    display: block;
    height: 15px;
    margin-bottom: 10px;
}
.leftCol {
    display: block;
    width: 45%;
    float: left;
    margin-right: 5px;
}
.rightCol {
    display: block;
    width: 45%;
    float: left;
}
.blockme {
    margin: auto;
    display: block;
}
.msIntro {
        margin-bottom: 5px;
}
.msExplain {
        margin-bottom: 5px;
}
</style>
</head>
<body>
    <div class="leftCol">
        <h3 class="selected">USING A CUSTOM JAVASCRIPT FORMATTER</h3>
        <div id="settingColor" class="blockme">
            <div class="msIntro">
                When selecting <b>Custom JavaScript Function</b> as the Formatter, you need to implement a Javascript function
                on the form that returns the text to be rendered on the tile. It must have the name and calling interface as per the example below: 
            </div>
            <pre>
    function determineCustomFormat(record, entityLogicalName, field) {
        // Analyse record and return text to display on tile
        if (entityLogicalName == "opportunity" && field = "StatusCode") { 
            return (record.StatusCode.Value == 0) ? "Active" : "Inactive";
        }
    }    </pre>
            <div class="msIntro">
                 The input parameter <b>record</b> is a Javascript object. Each of the fields retrieved according to the tab's tile
                 definition is a property of this object, e.g. <b>record.Name</b>, <b>record.CloseProbability</b> or <b>records.StatusCode</b>.
                 Option Sets, Currency Fields and Lookup fields are objects in their own right, use notation like <b>record.ParentContactId.Name</b>
                or <b>record.StatusCode.Value</b>.
            </div>
            <div class="msIntro">
                The input parameter <b>entityLogicalName</b> is a string containing the logical name for the entity, e.g. <b>opportunity</b> or <b>incident</b>.
            </div>
            <div class="msIntro">
                The input parameter <b>field</b> is a string containing the name of the field being formatted,
                e.g. <b>StatusCode</b> or <b>Name</b>.
            </div>
        </div>
    </div>
   <div class="rightCol">
       <h3 class="selected">EXAMPLE</h3>
       <div id="Div1" class="blockme">
           <div class="msIntro">
               The sample below introduces line breaks into Product Names for the "fin_policy" entity, 
               and for the "fin_claim" entity shows the product name followed by two line breaks and then the status description in curly brackets:
           </div>
           <pre>
function determineCustomFormat(record, entityLogicalName, field) {
    // alert(entityLogicalName + "/" + field + ": " + record[field]);
    switch (entityLogicalName + "/" + field) {
      case "fin_policy/fin_ProductId": {
         var t = record.fin_ProductId.Name
            + "&lt;br /&gt;&lt;br /&gt;{" + record.fin_BrokerId.Name + "}";
         t = t.replace("Scooter Insurance", "Scooter&lt;br /&gt;Insurance");
         t = t.replace("Pension Saver", "Pension&lt:br /&gt;Saver");
         t = t.replace("Van Insurance", "Van&lt;br /&gt;Insurance");
         return t;
      }
      case "fin_claim/fin_ClaimStatus": {
         var t = "Logged";
         switch (record[field].Value) {
             case 914950000: t = "In Progress"; break;
             case 914950001: t = "Partially Accepted"; break;
             case 914950002: t = "Fully Accepted"; break;
             case 914950003: t = "Rejected"; break;
         }
         return record.fin_ProductId.Name + "&lt;br /&gt;&lt;br /&gt;{" + t + "}";
      }
      default:
         return record[field];
    } // switch 
 }      </pre>
           <div class="msIntro">
               The input parameters are the same as for the <b>determineCustomColor</b> function on the left.
           </div>
       </div>
   </div>  
</body>
</html>