1. Sage CRM Developers Course
Implementing Screen Based Rules (2)

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 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)

3. 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

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

6. 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

7. 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

8. 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

9. 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

10. 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>

11. 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>

12. Using the onChange Event
Field Level Scripting
Using the onChange Event

13. 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

14. 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); }

15. 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()); }

16. 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

17. 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'); }

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

19. 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=" </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.

20. 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>

21. 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>

22. Automatically Reusing Code Between Screens
Script Libraries
Automatically Reusing Code Between Screens

23. 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

24. 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.

25. Creating a Custom Library

26. Library Automatically included and available in all screens

27. 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= 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.

28. 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'; };

29. 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>

30. 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>

31. 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= 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= if(fcomp_name.getMode()=="view") { fcomp_name.text(strLink+escape(strName)+" target=blank>"+strName+"</a>") }; }) </SCRIPT>

32. 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

33. 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:

34. 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>

35. Default Objects Available in Client Side Code
Client Side Objects
Default Objects Available in Client Side Code

36. 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;

37. 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.

38. 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>

39. 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");

40. Q&A

41. 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 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)

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