Sage CRM Developers Course Implementing Screen Based Rules (2)

Looking ahead to the classes DP01: Introduction to the Development Partner Program DP02: Entities and the Data Model (Part 1 of 2) DP03: Entities and the Data Model (Part 2 of 2) DP04: Implementing Screen Based Rules (Part 1 of 2) DP05: Implementing Screen Based Rules (Part 2 of 2) DP06: Screen and User Independent Business Rules DP07: Workflow (Part 1 of 2) DP08: Workflow (Part 2 of 2) DP09: Using the API Objects in ASP Pages (Part 1 of 2) DP10 : Using the API Objects in ASP Pages (Part 2 of 2) DP11: Using the Component Manager DP12: Programming for the Advanced Email Manager DP13: Using the Web Services API DP14: Using the Web Services API (Part 2 of 2) DP15: Coding the Web Self Service COM API (Part 1 of 2) DP16: Coding the Web Self Service COM API (Part 2 of 2) DP17: Using the .NET API (Part 1 of 2) DP18: Using the .NET API (Part 2 of 2)

Agenda Sage CRM Client Side API Changes Introduced in Sage CRM v7.2 onChange Scripts Custom Content Using a Script Library Handling Mode Useful default client-side objects

Changes Made in Sage CRM v7.2 The Client Side API Changes Made in Sage CRM v7.2

Client Side Programming Changed in Sage CRM v7.2 Redesign of the interface All client side JavaScript has been separated into script libraries New client side API Powerful New Client Side API Very easy to use! In Chrome, logon to CRM and Navigate to page Press CTRL+SHIFT+J to open the JavaScript Console.  Can mix with Plain Old JavaScript (POJ) Can extend with your own functions and script libraries

Selecting Fields using the Client Side API crm.fields('comp_name') a single field can be selected by calling the fields method with it’s name as a parameter crm.fields('comp_name comp_type') multiple fields can be selected by sending a list separated by spaces crm.fields('!comp_name !comp_type') in this example all fields except the comp_name and comp_type field have been selected crm('comp_name') as a shortcut you can select fields by calling the crm function with the field name

Simple Client Side API Methods value() – get value (code) text() – get text of field (translation) value(123) – set value cid() – get currency id caption() – get field caption caption('hello') –set field caption hide() – hides fields collapse() – collapses fields show() – shows fields highlight() – highlight field (defaults to yellow) highlight('pink') highlight(false) – remove highlight background('blue') bold() – embolden the text bold(false) – remove bold italic() underline() strike() - strikethrough strike(false) color('blue') – set font color fontSize(n) – where n is an integer number of pixels fontSize() – remove formatting title('text') – make a tooltip for a field title() – remove the title

The Evolution of Scripting in Sage CRM The Evolution of Scripting in Sage CRM. Coding Business Rules Made Easier Sage CRM v7.1 Plain Old JavaScript for Internet Explorer Sage CRM v7.1sp2 POJ Cross Browser jQuery Sage CRM v7.2 Sage CRM Client Side API

Evolution of Script Sage CRM v7.1 Internet Explorer Only Sage CRM v7.1sp2 Cross Browser <SCRIPT> //This works only in Internet Explorer window.attachEvent("onload", hideButton) function hideButton(){var arrayTags = document.getElementsByTagName("A"); var re = new RegExp(CurrentUser.user_displayname,"i") if (!_Datalead_assigneduserid.innerText.match(re)) { for(i=0;i<arrayTags.length;i++) { if(arrayTags[i].href.search(/ValidateCompanyEntry/i )>-1) { arrayTags[i].style.visibility = hidden; } } } } </SCRIPT> <SCRIPT> if (window.addEventListener) { //firefox way of binding an eventwindow.addEventListener("load", hideButton, false) } else if (window.attachEvent) {//IE exclusive method for binding an eventwindow.attachEvent("onload", hideButton) } function hideButton() {var arrayTags = document.getElementsByTagName("A"); var re = new RegExp(CurrentUser.user_displayname,"i") if (!_Datalead_assigneduserid.innerText.match(re)) { for(i=0;i<arrayTags.length;i++) { if(arrayTags[i].href.search(/ValidateCompanyEntry/i)>-1) { arrayTags[i].style.visibility = hidden; } } } } </SCRIPT>

Evolution of Script Sage CRM v7.1 (jQuery) Sage CRM v7.2 <script> $(function() { var strSelector = "#_Datalead_assigneduserid:contains('"+CurrentU ser.user_displayname+"')“ if ($(strSelector).length==0) var jTags = $("A[href*='ValidateCompanyEntry']"); jTags.each(function() $(this).hide(); }) } }); </script> <script> crm.ready(function(){ var x = crm("lead_assigneduserid").text(); if (x!=CurrentUser.user_displayname) { crm.hideButton("newopportunity.gif"); } }) </script>

Using the onChange Event Field Level Scripting Using the onChange Event

Simple onChange Scripts Takes advantage of browser event if (this.value.toUpperCase() == this.value) { window.alert(this.name + ' has been entered all uppercase') } Can use Plain Old JavaScript Sage CRM Client Side API Only Browser Objects are accessible Full access to DOM Full use of DHTML and object specific properties AJAX calls allow Server Side data to be fetched Sage CRM Client Side API can simplify field referencing

Simple onChange Rules using Regular Expressions and Client Side API 1) The Field may only contain Letters and Numbers var strRuleMessage = 'Field may only contain Letters and Numbers'; re =/[^A-Za-z0-9]/; r = this.value.match(re); if(r) { //window.alert(strRuleMessage); //crm.infoMessage(strRuleMessage); crm.errorMessage(strRuleMessage); } 2) The field may only contain uppercase or lowercase letters. var strRuleMessage = 'The field may only contain uppercase or lowercase letters'; re =/[^A-Za-z]/; r = this.value.match(re); if(r) { //window.alert(strRuleMessage); //crm.infoMessage(strRuleMessage); crm.errorMessage(strRuleMessage); }

Dependent Selection Example One field affecting the value of another Example comp_secterr in Company Entry screen if (typeof(pers_secterr) != 'undefined') { pers_secterr.value=comp_secterr.value; } Does not necessarily become a short script using Client Side API if (typeof(crm('pers_secterr').value()) != 'undefined') { crm('pers_secterr').value(crm('comp_secterr').value()); }

Coding for an Intelligent Select if (this.value == ‘Training’){ document.forms[0].case_assigneduser idInput.onchange(); case_assigneduserid.value = '5'; } Note additional field: case_assigneduseridInput Client Side Example Needs to expand to Switch Statement. Difficult to Maintain

Expanded Example for an Intelligent Select Sage CRM v7.1sp2 Sage CRM v7.2 document.forms[0].case_assigneduseridInput.onchange(); switch (this.value) { case 'Database' : case_assigneduserid.value = '15'; break; case 'Documentation' : case_assigneduserid.value = '14'; case 'Install' : case 'Software' : case 'Training' : default : case_assigneduserid.value = '5'; } document.forms[0].case_assigneduseridInput.onchange(); var fcase_assigneduserid = crm('case_assigneduserid'); switch (this.value) { case 'Database' : fcase_assigneduserid.value('15'); break; case 'Documentation' : fcase_assigneduserid.value('14'); case 'Install' : case 'Software' : case 'Training' : default : fcase_assigneduserid.value('5'); }

Adding HTML and Script to Screens Custom Content Adding HTML and Script to Screens

Custom Content Uses Use of Custom Content to add HTML tags <span></span> <style></style> <input type=hidden name=screenmode value=save> Explore how access extra hidden field values in Create and Validate script <iframe> May run into refresh problems with <IFRAME>, consider including additional information by use of Create Script and Caption Code. <script> <object> <span class=notification> Hello Mum</span> <style> .ButtonItem{ color:red; font-family: Verdana; text-decoration:overline; font-size: 16px; cursor:crosshair;} </style> <input type=button value='hello' onclick=window.alert('message')> <IFRAME scrolling='no' FRAMEBORDER='no' NAME="content_frame" width="100" height="30" SRC="http:\\server\crm\frameexample.htm"> </IFRAME> Before going on to look at the Validation rules we can see how the custom content can be used for other things: <iframe> <style> <object> remember you have access to document & window properties & methods e.g. document.URL document.referrer which you can use to interrogate for information about the Session ID etc if you want to call back into the application. We will meet this later on in the course when creating our own ASP pages.

Custom Content and Coding Custom Content can contain <script> tags Useful for defining functions used in OnChange scripts or controlling on screen elements Simple JavaScript or Client Side API can be used <script> function checkCase(x) { var keyLockx = x.substr(0,1).toLowerCase()+x.substr(1).toUpperCase() if (x == x.toUpperCase()||x == x.toLowerCase()||x==keyLockx) x = x.substr(0,1).toUpperCase()+x.substr(1).toLowerCase(); return x; } else </script>

Easy to bind Scripts to Screen Loading in Custom Content Sage CRM v7.1 Sage CRM v7.2 <SCRIPT> if (window.addEventListener) { window.addEventListener("load", setStatusColor, false) } else if (window.attachEvent) { window.attachEvent("onload", setStatusColor) } function setStatusColor() { if (_Datacomp_status.innerHTML == "Closed ") { _Datacomp_status.style.color= "Red"; } } </SCRIPT> <SCRIPT> crm.ready(function(){ if (crm("comp_status").value()== "Closed") { crm("comp_status").highlight(“red"); } } ) </SCRIPT>

Automatically Reusing Code Between Screens Script Libraries Automatically Reusing Code Between Screens

Reuse Between Screens in Sage CRM v7.1 sp2 <script> tag in Custom Content can take src parameter. <script src="/crm/custompages/rules.js"> </script> Create ‘rule’ file to reference in screen as needed. If rules need to be shared across screens we can take advantage of the ability of the HTML script tag to take a source parameters. This allows us to hold all our business rules in an external file & load the same business rules into each screen we need them in. I can change the HTML in the Custom Content field of the screen to read. <script src="../custompages/rules.js"> </script> & create a common 'rule.js' file in the custompages folder. This file & the rules it contains can now be used in other pages. For example in the Company Entry Screen (CompanyBoxLong) the comp_name can make use of the rule. /////////////////////////////////////////////////////////////////////////// IMPORTANT Serverside rules/functions will be discussed later in connection with Table Level Scripts

Client Side JavaScript Changes in Sage CRM v7.2 JavaScript files are no longer wrapped up in the eware.dll but are instead deployed to the client New folder in WWWRoot, called js, files added there (either in CRM or custom folders) will be deployed to the client.

Creating a Custom Library

Library Automatically included and available in all screens

Defining object for Namespace Reference var CompanyRules = CompanyRules ||{}; CompanyRules.addGoogleSearch = function(){ var fcomp_name = crm.fields("comp_name"); var strName = fcomp_name.text(); var strLink = "<A HREF=http://www.google.com/search?q="; if(fcomp_name.getMode()=="view") { fcomp_name.text(strLink+escape(strName)+" target=blank>"+strName+"</a>") }; } CompanyRules.addStatusWarning = function(){ if (crm("comp_status").value ()== "Closed") crm("comp_status").highlight("red"); var CompanyRules = CompanyRules ||{}; This line will either create a new object to act as the new namespace or return an existing one. Can now add own objects to namespace. Creating your own namespace objects helps code organisation and avoidance of clashes with existing objects and functions.

Field & Data IDs for Client Script Standard Ids round all captions and data Comp_name _Datacomp_name _Captcomp_name Address in Custom Content scripts / On Change Scripts etc Target Style and other properties To make an entry (MyField) appear if a checkbox is selected and disappear when unselected the onchange for the check box would be something like this: Essential information in Sage CRM v7.1sp2 if (checked) { MyField.style.visibility='visible'; _CaptMyField.style.visibility='visible'; } else MyField.style.visibility='hidden'; _CaptMyField.style.visibility='hidden'; };

Using _capt & _data ids in Sage CRM v7.1sp2 To Control display color of comp_status data based on field value <SCRIPT> if (window.addEventListener) { //firefox way of binding an event window.addEventListener("load", setStatusColor, false) } else if (window.attachEvent) //IE exclusive method for binding an event window.attachEvent("onload", setStatusColor) function setStatusColor() { switch (_Datacomp_status.innerHTML) case 'Active ' : _Datacomp_status.style.color= 'Green'; break; case 'Archive ' : _Datacomp_status.style.color= 'Gray'; case 'Closed ' : _Datacomp_status.style.color= 'Red'; case 'Inactive ' : _Datacomp_status.style.color= 'Yellow'; default : _Datacomp_status.style.color = 'Black'; } </SCRIPT>

Controlling fields in Sage CRM v7.2 <SCRIPT> crm.ready(function() { var fcomp_status = crm("comp_status").value(); switch (fcomp_status) { case 'Active' : crm("comp_status").highlight('Green'); break; case 'Archive' : crm("comp_status").highlight('Gray'); break; case 'Closed' : crm("comp_status").highlight('Red'); break; case 'Inactive' : crm("comp_status").highlight('Yellow'); break; default : crm("comp_status").highlight('Black'); } ///// }) </SCRIPT>

Changing HTML Structure Sage CRM v7.1sp2 Sage CRM v7.2 <SCRIPT> if (window.addEventListener) { //firefox way of binding an event window.addEventListener("load", googleCompany, false) } else if (window.attachEvent) { //IE exclusive method for binding an event window.attachEvent("onload", googleCompany) } function googleCompany() { var strSpan=""; var strLink=""; if(!document.getElementById("comp_name")) { strSpan=_Datacomp_name.innerHTML; strLink="<A HREF=http://www.google.com/search?q="; strLink+=escape(strSpan)+" TARGET=blank>"+strSpan+"</A>"; _Datacomp_name.innerHTML = strLink; } } </SCRIPT> <SCRIPT> crm.ready(function() { // var fcomp_name = crm.fields("comp_name"); var strName = fcomp_name.text(); var strLink = "<A HREF=http://www.google.com/search?q="; if(fcomp_name.getMode()=="view") { fcomp_name.text(strLink+escape(strName)+" target=blank>"+strName+"</a>") }; }) </SCRIPT>

Detecting when a screen is in Edit Mode, or in View Mode Handling Mode Detecting when a screen is in Edit Mode, or in View Mode

Detecting Mode in Custom Content Scripts CRM Screens can exist in different ‘Modes’ View Edit Save Can use following facts All Forms in CRM are called ‘EntryForm’ E.g. document.EntryForm.comp_name Use test for a field as Mode check <INPUT> will only exists in Edit Mode Therefore to hide a field based upon the mode so that it is only available in View mode:

Mode Checks are Easy in Sage CRM Client Side API Sage CRM v7.1sp2 Sage CRM v7.2 <SCRIPT> if (window.addEventListener) { //firefox way of binding an event window.addEventListener("load", modeCheck, false) } else if (window.attachEvent) { //IE exclusive method for binding an event window.attachEvent("onload", modeCheck) } function modeCheck() { var e=document.getElementById("comp_name"); if(e) { window.alert("Edit") _Datacomp_status.style.visibility = 'hidden'; _Captcomp_status.style.visibility = 'hidden'; } else { window.alert("View"); _Datacomp_status.style.visibility = 'visible'; _Captcomp_status.style.visibility = 'visible'; } } </SCRIPT> <SCRIPT> //Detect Mode in Company Screen crm.ready(function() { var strMode = crm.fields("comp_name").getMode(); if (strMode=="edit") { crm.infoMessage(strMode); crm.fields("comp_status").collapse(); //crm.fields("comp_status").hide(); } else { crm.infoMessage(strMode); crm.fields("comp_status").show(); } }) </SCRIPT>

Default Objects Available in Client Side Code Client Side Objects Default Objects Available in Client Side Code

onChange & Custom Content scripts in Upgraded Systems Installs of Sage CRM 7.1 need to have code checked for referenced to objects and functions that have changed in Sage CRM v7.2. Sage CRM v7.2 no longer uses Frames to draw its screens Objects/functions created in the eware_mid frame CurrentUser and GetKeys() exist in the page in which the code runs. These should be OK Objects created in other frames (in Sage CRM v7.1). WritetoFrame() Arrays (userslist, usersdislist, targetlistslist) Andy code that references these objects will need to be changed and tested. Note: Although objects are client side and maybe used onChange scripts and custom content of screen & list blocks (including called by RunBlock) they are also used in ASP pages and .NET assemblies. Check Metadata for Business Rules executed in Browser select * from Custom_ScreenObjects where Cobj_CustomContent is not null select * from Custom_Screens where SeaP_OnChangeScript is not null;

Clientside CurrentUser CurrentUser object automatically created by DLL driven pages. Has same Properties as Serverside CurrentUser object in Create Scripts. Can be used by any code in Custom Content <script> var strOut = "<ul>" var x; for (x in CurrentUser) { strOut+="<li>"+ x+"</li>"; } strOut += "</ul>" //document.write(strOut); crm.infoMessage(strOut); </script> Client Side 'CurrentUser' object The system built pages automatically create a client side CurrentUser object. <script> window.alert('The user is '+CurrentUser.user_logon) </script> The client side CurrentUser object available to use in the Custom Content & therefore OnChange scripts has the same properties as the server side CurrentUser object. ASP pages that you create do not automatically contain this object. I will shown you how you can add this to your own pages later.

Other useful Client side Objects GetKeys() This function is automatically available in system generated screens. It returns the context key string. E.g. &Key0=1&Key1=28&Key2=30&Key4=1 Usage <script> crm.infoMessage(GetKeys()) </script>

Changes in Addressing TopContent WriteToFrame() and WriteToTopDiv Sage CRM v7.1sp2 Sage CRM v7.2 Function available in system screens that allows you to control contents of the TopContent frame. Usage <SCRIPT> if (window.addEventListener) { window.addEventListener("load", RefreshTopContent, false) } else if (window.attachEvent) { window.attachEvent("onload", RefreshTopContent) } function RefreshTopContent() { parent.frames[3].WriteToFrame(5,"TOPBODY VLINK=NAVY LINK=NAVY",“Hello World"); } </SCRIPT> <SCRIPT> SageCRM.wsTop.WriteToTopDiv("Hello World");

Q&A

Looking ahead to the classes DP01: Introduction to the Development Partner Program DP02: Entities and the Data Model (Part 1 of 2) DP03: Entities and the Data Model (Part 2 of 2) DP04: Implementing Screen Based Rules (Part 1 of 2) DP05: Implementing Screen Based Rules (Part 2 of 2) DP06: Screen and User Independent Business Rules DP07: Workflow (Part 1 of 2) DP08: Workflow (Part 2 of 2) DP09: Using the API Objects in ASP Pages (Part 1 of 2) DP10 : Using the API Objects in ASP Pages (Part 2 of 2) DP11: Using the Component Manager DP12: Programming for the Advanced Email Manager DP13: Using the Web Services API DP14: Using the Web Services API (Part 2 of 2) DP15: Coding the Web Self Service COM API (Part 1 of 2) DP16: Coding the Web Self Service COM API (Part 2 of 2) DP17: Using the .NET API (Part 1 of 2) DP18: Using the .NET API (Part 2 of 2)

Visit the Sage CRM Ecosystem at www.sagecrm.com Facebook: Sage CRM Twitter: wwwsagecrmcom LinkedIn: Sage CRM (Official Group) YouTube: wwwsagecrmcom