Sage CRM 7.2: The New Client Side API

Hints, Tips and Tricks

Technical Hints Tips and Tricks that cover customization and development using Sage CRM. API usage and coding are covered.

Sage CRM 7.2: The New Client Side API

  • Comments 15
  • Likes

This is a simplified and specialised set of code libraries that will allow easy screen customizations.

The API is based on the JQuery syntax although I must stress that knowledge of JQuery is not needed in order to use the API.

The API is included as part of the full product development cycle and therefore is part of the formal QA process.  The new API is an important new option for partners developing extensions and customization that will work in the new and future releases of Sage CRM.  The API provides safe and supported options for customizing the new frameless interface.

The intention is to make it much easier to use than either raw JavaScript  or JQuery as knowledge of the underlying screen structure is not needed.  It should be easy and quick to extend Custom Content behaviour.

You can start to play with the new API in Sage CRM 7.2 just by opening up a JavaScript console in a browser.

In  Chrome, logon to CRM and Navigate to the page in Sage CRM with which you want to experiment.

Press CTRL+SHIFT+I to open the Javascript Console. 

You can see from the above example the syntax is very simple

  • crm.fields().highlight();

This will return all of the fields in screen and apply a default highlighting to them.

Some more that you may want to experiment with are below

crm.fields('comp_name')

This allows a single field to be selected by calling the fields method with it’s full name as a parameter.

crm.fields('comp_name comp_type')

This allows multiple fields to 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')

This is a simple shortcut that allows you to select fields by calling the crm function with the selector string

You can see from the examples below how the code in browser can be changed.  The business rule being implemented is

"If the company status is switched to 'Closed' then highlight the field in red".

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&nbsp;")
{
_Datacomp_status.style.color= "Red";
}
}
</SCRIPT>

In Sage CRM v7.1 if you were not using JQuery techniques then your code would need to take into account the differences between browsers.  In Sage CRM 7.2 and the new API you no longer even have to think about that and the whole job of finding the element that you wish to affect is made so much easier.

Sage CRM 7.2

 

<SCRIPT>
crm.ready(function(){
if (crm("comp_status").value()== "Closed")
{
crm("comp_status").highlight(“red");
}
})
</SCRIPT>

 

If you would like to experiment with the API further below are some more of the methods.

  • value() – get value (code)
  • text() – get text of field (translation)
  • val(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

 

Comments
  • Does this API work for custom entites?

    I tried it on one now and it does not seem to work.

  • Jeff,

    Is there a method to set a link on a value?

    Thanks in advance.

  • Xav

    There is no explicit method for adding a url to a field value but below shows how you can add a hyperlink to a field.

  • Hi Jeff,

    Same question as CRM together: is it supposed to work with custom entities?

    According to my tests (sagecrm 7.2 & 7.2a), crm.ready function works on custom entities only with chrome but not with IE (9 & 10).

  • Jeff, your 6/24 comment to Xav says "below shows how you can add a hyperlink to a field", but I don't see any such code example.

  • Hi jdh,

    It appears that for me if i run in compatibility mode for IE10 some of the code works and some doesn't but if you switch to Browser Mode IE10 then everything seems to work fine. Just something you may want to try.

  • Well since i can't figure out how to delete the above comment. I'm not getting the scripting to work on custom entities either jdh.

    Jeff,

    Do you have a response to if the api is supposed to work on custom entities for anything but chrome? Or are we supposed to be making all of our clients use Chrome now?

  • RyanKev

    I've just double double check this.  The client side API may have quirks around the control of  buttons in ASP pages but generally it works fine.   e.g.

    This will display happily in both IE and Chrome.

  • Anyone have experience using collapse and show in IE 9 successfully?

    example:

    on change

    if (crm('mychange').value())

    {

    crm('myfield1 myfield2').show();

    }

    else

    {

    crm('myfield1 myfield2').collapse();

    }

    In IE9 at least, after fields are collapsed, they can no longer be shown.

  • Sorry, I moved my comment to its own thread.

    community.sagecrm.com/.../10141.aspx

  • Jeff,

    I have a grid with an integer field, how would you highlight if the integer was > 30?

  • crm.grids().rows().filterWhere("field_name", "gt", 30).highlightRow();

    Assuming you only have one grid on page, otherwise will have to identify which grid by providing index to .grids(3).rows()

  • Where is the full documentation for the 7.2 clientside API?

  • Found it: help.sagecrm.com/js-api

  • With the .filterwhere I do not see a way to say where X = 0 and Y = 1 color the grid row.  I believe it's not possible but I thought I would ask.