sage crm developers course
DESCRIPTION
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) - PowerPoint PPT PresentationTRANSCRIPT
Sage CRM Developers Course
Implementing Screen Based Rules (2)
Looking ahead to the classes
DP01: Introduction to the Development Partner ProgramDP02: 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 RulesDP07: 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 ManagerDP12: Programming for the Advanced Email ManagerDP13: Using the Web Services APIDP14: 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 APIChanges Introduced in Sage CRM v7.2onChange ScriptsCustom ContentUsing a Script LibraryHandling ModeUseful default client-side objects
The Client Side API
Changes Made in Sage CRM v7.2
Client Side Programming Changed in Sage CRM v7.2
Redesign of the interfaceAll client side JavaScript has been separated into script librariesNew client side API
Powerful New Client Side APIVery 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 parametercrm.fields('comp_name comp_type')multiple fields can be selected by sending a list separated by spacescrm.fields('!comp_name !comp_type')in this example all fields except the comp_name and comp_type field have been selectedcrm('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 valuecid() – get currency idcaption() – get field captioncaption('hello') –set field captionhide() – hides fieldscollapse() – collapses fieldsshow() – shows fieldshighlight() – highlight field (defaults to yellow)highlight('pink')highlight(false) – remove highlightbackground('blue')
bold() – embolden the textbold(false) – remove bolditalic()underline()strike() - strikethroughstrike(false)color('blue') – set font colorfontSize(n) – where n is an integer number of pixelsfontSize() – remove formattingtitle('text') – make a tooltip for a fieldtitle() – remove the title
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
Sage CRM v7.1sp2• jQuery
Sage CRM v7.2• Sage CRM
Client Side API
Evolution of Script
Sage CRM v7.1 Internet Explorer Only
<SCRIPT>//This works only in Internet Explorerwindow.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>
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(){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)<script>$(function(){var strSelector = "#_Datalead_assigneduserid:contains('"+CurrentUser.user_displayname+"')“if ($(strSelector).length==0){var jTags = $("A[href*='ValidateCompanyEntry']");jTags.each(function(){$(this).hide();})}});</script>
Sage CRM v7.2<script>crm.ready(function(){var x = crm("lead_assigneduserid").text();if (x!=CurrentUser.user_displayname){crm.hideButton("newopportunity.gif");}})</script>
Field Level Scripting
Using the onChange Event
Simple onChange Scripts
Takes advantage of browser eventif (this.value.toUpperCase() == this.value){window.alert(this.name + ' has been entered all uppercase')}
Can usePlain Old JavaScriptSage CRM Client Side API
Only Browser Objects are accessibleFull access to DOMFull use of DHTML and object specific propertiesAJAX 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 anotherExample 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_assigneduseridInput.onchange();case_assigneduserid.value = '5';}
Note additional field:case_assigneduseridInputClient Side ExampleNeeds to expand to Switch Statement.Difficult to Maintain
Expanded Example for an Intelligent Select
Sage CRM v7.1sp2document.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'; }
Sage CRM v7.2document.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'); 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'); }
Custom Content
Adding HTML and Script to Screens
Custom Content Uses
Use of Custom Content to addHTML 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>
Custom Content and Coding
Custom Content can contain <script> tagsUseful for defining functions used in OnChange scripts or controlling on screen elementsSimple 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 { return x; }}</script>
Easy to bind Scripts to Screen Loading in Custom Content
Sage CRM v7.1<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>
Sage CRM v7.2<SCRIPT>crm.ready(function(){if (crm("comp_status").value()== "Closed"){crm("comp_status").highlight(“red");}})</SCRIPT>
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.
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 clientNew 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 dataComp_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 eventwindow.addEventListener("load", setStatusColor, false)}else if (window.attachEvent){//IE exclusive method for binding an eventwindow.attachEvent("onload", setStatusColor)}
function setStatusColor(){switch (_Datacomp_status.innerHTML){case 'Active ' :_Datacomp_status.style.color= 'Green';break;case 'Archive ' :_Datacomp_status.style.color= 'Gray';break;case 'Closed ' :_Datacomp_status.style.color= 'Red';break;case 'Inactive ' :_Datacomp_status.style.color= 'Yellow';break;default :_Datacomp_status.style.color = 'Black';}}</SCRIPT>
Controlling fields inSage 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<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(){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>
Sage CRM v7.2<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>
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’ ViewEditSaveCan use following factsAll Forms in CRM are called ‘EntryForm’E.g. document.EntryForm.comp_nameUse 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<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>
Sage CRM v7.2<SCRIPT>//Detect Mode in Company Screencrm.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>
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 screensObjects/functions created in the eware_mid frame – CurrentUser and GetKeys() exist in the page in which the code runs. – These should be OKObjects 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 Browserselect * from Custom_ScreenObjects where Cobj_CustomContent is not nullselect * 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>
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 TopContentWriteToFrame() and WriteToTopDiv
Sage CRM v7.1sp2Function 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>
Sage CRM v7.2<SCRIPT>SageCRM.wsTop.WriteToTopDiv("Hello World");<SCRIPT>
Q&A
Looking ahead to the classes
DP01: Introduction to the Development Partner ProgramDP02: 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 RulesDP07: 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 ManagerDP12: Programming for the Advanced Email ManagerDP13: Using the Web Services APIDP14: 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)
