Sage CRM 7.2: Control of Grids, Lists and Columns Using the 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: Control of Grids, Lists and Columns Using the Client Side API

  • Comments 5
  • Likes

Below is a screen that shows the highlighting of columns and individual cells in a Grid in an earlier version of Sage CRM.

Working with Lists in versions before Sage CRM 7.2 used to be something of a challenge for anyone not very familiar with JavaScript, as can be seen from the article "The Clientside Control of Lists and Columns (for Sage CRM v7.1 and earlier)". 

If you were used to using jQuery it became easier but even then it was not an entirely straight forward thing to be able to format the presentation of the data displayed in the screen.

The new Client Side API introduced in Sage CRM 7.2 contains methods that make it much easier to select rows, columns and individual cells for manipulation. Properties can be set, new data displayed in tool tips and the style of each cell can be changed.

The documentation contains a good discussion of how to use the API. You can see the online help for the new API Grid options here.

http://help.sagecrm.com/js-api/classes/grids.html

Below are some simple business rule examples that show how easy it is to be able to find and control the display of data in a Grid.

All of the examples below can be tested by adding them into the Custom Content box of the OpportunityList block.

1)

The first example shows how you can highlight a particular column.

[code language="javascript"]
<script>
crm.ready(function(){
crm.grids().column('comp_name').highlightCell('lightSalmon');
})
</script>
[/code]

The method highlightCell() allows you to pass in any Web Colour. See http://en.wikipedia.org/wiki/Web_colors

The highlightCell() method also allows you to pass a HTML DOM Style object in JSON notation that describes the properties of the style to be used. See the documentation.

http://help.sagecrm.com/js-api/classes/grids.html#method_highlightCell

2)

This script will highlight all opportunities that have been quoted.

[code language="javascript"]
<script>
crm.ready(function(){
crm.grids().filterWhere('oppo_stage','eq',crm.getTrans('oppo_stage','quoted')).highlightRow('greenyellow');
})
</script>
[/code]

The rule uses the filterWhere() method. This has 3 parameters, the first is the column name, the second is the selector used. You can see which ones can be passed in the API documentation.

http://help.sagecrm.com/js-api/classes/grids.html#method_filterWhere

The third parameter is the value used to filter the Grid. In this case a string has been passed but this needs to be handled as a translated as the value in the database 'Quoted' is not that which is displayed in the interface 'Proposal Submitted' for English language users.

3)

The final example in this article will highlight all cells in the Grid which match a particular criterion. In this case, the cells will be highlighted where the text of the Opportunity Description field contains a keyword 'Deal'.

[code language="javascript"]
<script>
crm.ready(function(){
crm.grids().filterWhere('oppo_description', 'contains', 'Deal').highlightCell('goldenrod');
})
</script>
[/code]

The examples of highlighting above can be added together into a single rule. The exact effect will depend on the ordering of the statements within the script. And of course the end result will depend on your ability to choose appropriate colours. :-)

[code language="javascript"]
<script>
crm.ready(function(){
crm.grids().column('comp_name').highlightCell('lightSalmon');
crm.grids().filterWhere('oppo_stage','eq',crm.getTrans('oppo_stage','quoted')).highlightRow('greenyellow');
crm.grids().filterWhere('oppo_description', 'contains', 'Deal').highlightCell('goldenrod');
})
</script>
[/code]

Comments
  • Where can I go to control the width of a column in a list?  Thanks for any assistance!

  • Hi all,

    To use the filter option the column in the script must also be in the grid.

    How would you use .filter if the column is not displayed in the grid

    I am trying to set the field background in the communications grid based on the the content of the comm_email field

    If Comm_Email is not displayed in the grid the script does not work

    Example Script:

    Many thanks,

    EAD

  • EAD

    Have you seen this article?  community.sagecrm.com/.../sage-crm-7-3-creating-a-compound-filter-filterwhere-using-the-client-side-api.aspx

    That is using two conditions to filter the cells.  The point is that you can find all the 'email' related communications using the Filterwhere and then use an crm.sdata call to check the value of the comm_email that is not included in the screen.

  • Hi Jeff,

    Thank you, I did have a look at this article but did not try it.

    Perhaps I misunderstood but I thought this was only worked because both columns in the Filter are visible in the grid (on screen)

    This allows you to assign a value to the variable based on row

    The condition I would like to use would use would be based on a field that is not in the grid (or on screen)

    Comm_Email  must contain TEXT XXX

    My apology if I have misunderstood the article....

    EAD

  • EAD

    I understand that you want to filter the list by information that is not just on the list but also information that is in the database.  This means because the data is not in the browser that for every row of data displayed on the screen you will need to ask a separate query of the database.  This why I pointed you to the blog for the crm.sdata() Ajax example.

    But why not filter the data on a separate list based on a view that filters the information you want?

    Of create a Interactive Dashboard gadget that is based on a report of group that has filter the information you need?