sage crm developers course implementing screen based rules (2)

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)


DP04: Implementing Screen Based Rules (Part 1 of 2)


DP06: Screen and User Independent Business Rules

DP07: Workflow (Part 1 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)


DP17: Using the .NET API (Part 1 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

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.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 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_assigneduseridInput.onchange();case_assigneduserid.value = '5';}

Note additional field:case_assigneduseridInput

Client 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' :


break;

case 'Install' :


break;

case 'Software' :


break;

case 'Training' :


break;

default :


}

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' :


break;

case 'Install' :


break;

case 'Software' :


break;

case 'Training' :


break;

default :


}

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> 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 { 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 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 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 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';

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’

View

Edit

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

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&AQ&A

Looking ahead to the classes

DP01: Introduction to the Development Partner Program





DP06: Screen and User Independent Business Rules



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)





sage crm developers course implementing screen based rules (2)

Documents

api crm

api slide

agenda sage crm client

easier sage crm v7

crm function

parameter crm

spaces crm

api objects