This is the sixth article in a series provided for non-technical System Administrators who wish to understand more about using JavaScript to control workflow and to implement simple customizations using the language.

In this article, I will develop the idea of binding a script to an event like loading a document/page into the browser.

In the diagram above are two examples of writing out a phrase in an alert.

In the first the JavaScript is executed when it is loaded into the browser.

<script>
window.alert("company")
</script>

In the second a function from the client side API is used. This allows you to ensure that the script is executed when the page is fully loaded so all objects can be found and controlled.

<script>
crm.ready( function(){
window.alert("company")
)}
</script>

This actually binds the execution of the code to the completion of the onload event.

A function is a unit of reusable code.  Because it is attached to the ‘onload’ event this means that we can now access any data or objects that have been loaded into the window.

Each browser (Chrome, Internet Explorer or Firefox) have tools that allow us to examine the structure of the page and experiment with interactions with those objects.

I prefer to use Chrome and I can access the Developer Tools by pressing F12. 

Below shows the Opportunity Summary screen.

I can explore the HTML that makes up the page and I can zoom to an individual element by Right clicking on a field etc and selecting ‘inspect'.

Which allows inspection of the HTML that causes the screen to draw this element.

We can see how the field, in this case, has SPAN tags that define the caption and the data for the field. These SPAN tags each have a unique ID which means these can be easily controlled using JavaScript.

Sage CRM puts Standard Ids round all captions and data

The example above shows the oppo_description field

  • _Captoppo_description
  • _Dataoppo_description

This address can be used in Custom Content scripts or by On Change Scripts. We can then control the fields Style or other properties.

I will look at this idea in other articles. As I look back on these articles I realise that I have been showing you snippets of code and there is much that I have not explained. One of the concepts that you need to understand is that on the ‘statement’. In the next article, I will explore statements in JavaScript in more detail.