Sage CRM Developers Course

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

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. 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_namecomp_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.Coding Business Rules Made Easier

10. Evolution of Script Sage CRM v7.1 Internet Explorer Only Sage CRM v7.1sp2 Cross Browser <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(){vararrayTags = 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>//This works only in Internet Explorerwindow.attachEvent("onload", hideButton)function hideButton(){vararrayTags = 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>crm.ready(function(){var x = crm("lead_assigneduserid").text();if (x!=CurrentUser.user_displayname){crm.hideButton("newopportunity.gif");}})</script> • <script> • $(function() • { • varstrSelector = "#_Datalead_assigneduserid:contains('"+CurrentUser.user_displayname+"')“ • if ($(strSelector).length==0) • { • varjTags = $("A[href*='ValidateCompanyEntry']"); • jTags.each(function() • { • $(this).hide(); • }) • } • }); • </script>

12. 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 NumbersvarstrRuleMessage = '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.varstrRuleMessage = '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_assigneduseridInput.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(); varfcase_assigneduserid = crm('case_assigneduserid'); switch (this.value) { case 'Database' : fcase_assigneduserid.value('15'); break; case 'Documentation' : fcase_assigneduserid.value('14'); break; case 'Install' : fcase_assigneduserid.value('15'); break; case 'Software' : fcase_assigneduserid.value('14'); break; case 'Training' : fcase_assigneduserid.value('15'); break; default : fcase_assigneduserid.value('5'); } • document.forms[0].case_assigneduseridInput.onchange(); • switch (this.value) { • case 'Database' : • case_assigneduserid.value = '15'; • break; • case 'Documentation' : • case_assigneduserid.value = '14'; • break; • case 'Install' : • case_assigneduserid.value = '15'; • break; • case 'Software' : • case_assigneduserid.value = '14'; • break; • case 'Training' : • case_assigneduserid.value = '15'; • break; • default : • case_assigneduserid.value = '5'; • }

18. 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="http:\\server\crm\frameexample.htm"> </IFRAME>

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) • { • varkeyLockx = 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 • { • return x; • } • } • </script>

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

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

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 • varCompanyRules = CompanyRules ||{}; • CompanyRules.addGoogleSearch = function(){ • varfcomp_name = crm.fields("comp_name"); • varstrName = fcomp_name.text(); • varstrLink = "<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"); • } • } • varCompanyRules = 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&nbsp;' : • _Datacomp_status.style.color= 'Green'; • break; • case 'Archive&nbsp;' : • _Datacomp_status.style.color= 'Gray'; • break; • case 'Closed&nbsp;' : • _Datacomp_status.style.color= 'Red'; • break; • case 'Inactive&nbsp;' : • _Datacomp_status.style.color= 'Yellow'; • break; • default : • _Datacomp_status.style.color = 'Black'; • } • } • </SCRIPT>

30. Controlling fields inSage CRM v7.2 • <SCRIPT>crm.ready(function(){varfcomp_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>crm.ready(function(){//varfcomp_name = crm.fields("comp_name");varstrName = fcomp_name.text();varstrLink = "<A HREF=http://www.google.com/search?q=";if(fcomp_name.getMode()=="view"){fcomp_name.text(strLink+escape(strName)+" target=blank>"+strName+"</a>")};})</SCRIPT> • <SCRIPT>if (window.addEventListener){//firefox way of binding an eventwindow.addEventListener("load", googleCompany, false)}else if (window.attachEvent){//IE exclusive method for binding an eventwindow.attachEvent("onload", googleCompany)}function googleCompany(){varstrSpan="";varstrLink="";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>

32. 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>//Detect Mode in Company Screencrm.ready(function(){varstrMode= 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> • <SCRIPT>if (window.addEventListener){//firefox way of binding an eventwindow.addEventListener("load", modeCheck, false)}else if (window.attachEvent){//IE exclusive method for binding an eventwindow.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>

35. 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 ServersideCurrentUser object in Create Scripts. • Can be used by any code in Custom Content • <script> • varstrOut = "<ul>" • var x; • for (x in CurrentUser) • { • strOut+="<li>"+ x+"</li>"; • } • strOut += "</ul>" • //document.write(strOut); • crm.infoMessage(strOut); • </script>

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 TopContentWriteToFrame() and WriteToTopDiv Sage CRM v7.1sp2 Sage CRM v7.2 <SCRIPT> SageCRM.wsTop.WriteToTopDiv("Hello World"); <SCRIPT> • 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>

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