Enhance your reports with template and script columns Calculated Columns Enhance your reports with template and script columns PRESENTER: Andrea Dawkins | R&D Project Manager, Entrinsik | 3-4-2012

Calculated Columns Template vs. Script What’s the difference? 4 Template Examples How to use them, HTML tricks 5 Script Examples How to use them, JavaScript tricks Functions Establish global Scripts for your users

What is the Difference?

Template Columns Written with plain text and HTML Other columns can be used as placeholders for the real value (like a WordMerge letter)

Template Examples Concatenation Joining columns together (like first and last name) Website Links Making the perfect hyperlink for Informer In-line pictures Show an image right in the report row Embed a Map Copy/paste an HTML block, like a Google Map

Script Columns Written with JavaScript More advanced -- can do anything a Template column can do, plus calculations and conditional output Generally, use a script column when you cannot solve your problem with a template

Script Examples Color Coding Define thresholds and highlight low/high numbers with color coding Projected Sale Calculate the projected dollar amount of a sale based on probability Balance Due Show balance due on an order Counting Days Calculate the number of days since an event Total Multi-values Add up a list of multi-values in a column

Template Examples

Template #1: Concatenation One column for first and last name

Template #1: Concatenation How? Drag & drop column headers into the Expression box: ${first_name} ${last_name} Produces: Doug Leupen

Template #1: Concatenation Style with HTML Last name bold: ${first_name} <B>${last_name}</B> Produces: Doug Leupen

Remember… Do not remove the original columns. Hide them instead.

Template #2: Website Link The perfect hyperlink for Informer

Template #2: Website Link Step 1 – Easy, a basic link A hyperlink in HTML: <a href=“http://www.linkedin.com”> LinkedIn </a> Produces: LinkedIn

Template #2: Website Link Step 2 – Drag in your columns LinkedIn ID and the person’s name <a href = “http://www.linkedin.com/${linkedin_id}”> ${first_name} ${last_name}’s Profile </a> Produces: Sharon Shelton's Profile

Template #2: Website Link Step 3 – Choose your sorting value Sort by the person <a name=“${first_name} ${last_name}” href = “http://www.linkedin.com/${linkedin_id}”> ${first_name} ${last_name}’s Profile </a> Otherwise, Informer will just sort by the HTML alphabetically

Template #2: Website Link Step 4 – Stay on your report Use target=_blank to open in a new browser window <a name=“${first_name} ${last_name}” href = “http://www.linkedin.com/${linkedin_id}” target=“_blank”> ${first_name} ${last_name}’s Profile </a> You may also use target=“AnyWindowNameHere” to open all links with that target in the same new window.

Template #2: Website Link Done! The perfect Informer link Uses columns from the report Sorts by what you see Opens in a different window

Template #3: In-line Picture Show an image right in the report row

Template #3: In-line Picture Step 1 – Easy, a basic image An image in HTML: <img src= “http://delivery.entrinsik.com/icon/profiles /logo.png” /> Produces:

Template #3: In-line Picture Step 2 – Drag in your columns An image in HTML: <img src= “http://delivery.entrinsik.com/icon/profiles /${first_name}.png” /> Produces:

Template #3: In-line Picture Step 3 – Control the size Specify the height or width <img src= “http://delivery.entrinsik.com/icon/profiles /${first_name}.png” height=100/> But do not change both unless you want the image distorted!

Template #4: Embed a Map Place a Google Map in the row body of a report

Template #4: Embed a Map Step 1 – Make an address template column Concatenate all the pieces of an address into one column: ${street}, ${city}, ${state}, ${zip} Produces: 7501 Creedmoor Rd, Raleigh, NC, 27613

Template #4: Embed a Map Step 2 – Copy paste the link from Google Maps Put your address column in <iframe width="800" height="500" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&outpu t=embed&t=m&z=14&iwloc=A&q=${address}"> </iframe>

Template #4: Embed a Map Step 3 – Hide/Show in Row Body

Script Examples

Script Examples Color Coding Define thresholds and highlight low/high numbers with color coding Projected Sale Calculate the projected dollar amount of a sale based on probability Balance Due Show balance due on an order Counting Days Calculate the number of days since an event Total Multi-values Add up a list of multi-values in a column

Script Reference JavaScript Operators + add - subtract * multiply / divide == is equal to != is not equal > is greater than < is less than >= is greater than or equal to <= is less than or equal to && and || or ! not

Script #1: Color Coding AKA, how to use if/else in JavaScript to color code a value

Script #1: Color Coding If/Else Statements Assign colors based on some condition. if(condition1) { do this; } else if(condition2) { do this; } else { do this; }

Script #1: Color Coding If/Else Statements Assign colors based on some condition. if( probability <= 25 ){ "<div style='color:red'>“ +probability+ "%</div>"; } else if( probability >= 75 ){ "<div style='color:green'>“ +probability+ "%</div>"; } else { "<div>“ +probability+ "%</div>"; }

Script #1: Color Coding Remember the sorting trick Add name to the div so the column sorts on the value "<div name='" +probability+ "'>" +probability+ "%</div>";

Script #2: Projected Sale Calculate the projected dollar amount based on probability

Script #2: Projected Sale Multiply by probability percentage divided by 100 amount * ( probability / 100 ); Set the column as a number and apply currency formatting

Script #3: Balance Due Calculate the balance of tuition paid

Script #3: Balance Due Subtract the amount paid from the total total – amount_paid

Script #4: Counting Days Calculate the number of days since a date

Script #4: Counting Days Use Java Calendar Calculate up the relevant dates in milliseconds: var calendar = java.util.Calendar.getInstance(); var rightNow = calendar.getTimeInMillis(); calendar.setTime(INVOICE_DATE); var startTime = calendar.getTimeInMillis(); var oneDayInMillis = 24 * 60 * 60 * 1000; (rightNow - startTime) / oneDayInMillis;

Script #4: Counting Days Highlight past-due invoices Use both your calculated columns: if(balance > 0 && daysSinceInvoice > 90) { "<div style='background-color:red;color:white'> Past Due </div>"; } else { ""; }

Script #5: Total Multi-values Total up all the values in a multi-value column

Script #5: Total Multi-values Arrays An array is a list of values inside a single variable They come from Multi-value fields, Multi-key joins, Remote joins If you ever see this in your script column, you’re dealing with an array: [Ljava.lang.Object;@1e07cdbte] Pick an item out of an array by using square brackets: myColumn[3]

Script #5: Total Multi-values Array Indexes start at 0 You write in… Which gives you… myColumn[0] the 1st multi-value myColumn[3] the 4th multi-value myColumn[myColumn.length-1] the last multi-value myColumn[myColumn.length] error, out of range.

Script #5: Total Multi-values Looping To process every item in an array, you will need to use for loops for (var i=0; i< mvColumn.length; i++) { mvColumn[i]; }

Script #5: Total Multi-values Calculate total Add each value up in the for loop var total = 0; for(var i=0; i<creditHours.length; i++) { if(creditHours[i] != null) { total += parseInt(creditHours[i]); } total;

Remember… Check for null values, or your script might break.

Functions

Functions Set up under Mappings tab

Functions Now users can access it from any report

Resources HTML http://www.w3schools.com/html/html_examples.asp JavaScript http://www.w3schools.com/js/js_examples.asp CSS (styles) http://www.w3schools.com/css/css_examples.asp Forums: http://www.entrinsik.com/forums/ Sub-forum for Calculated Columns has more examples

Thank you! Any questions?