How To Modify Out Of The Box Buttons In Sage CRM With JQuery

When you  need to modify the buttons on an out of the box Sage CRM block, you will quickly discover there is no method to do so, aside from the Default, Delete and Continue buttons.

Let’s take a look at the default Company Summary tab in Sage CRM. Along with the default Change & Delete buttons you also see ‘Add this record to a group’, ‘Add to Contacts’/’Remove from Contacts’ and ‘Summary Report’. You may not always want these buttons to show or you may want to change where the buttons take the users. To do this, you are going to have to rely on some custom JavaScript and JQuery.

First, you need to identify the button you want to modify. In this example, it will be the ‘Summary Report’ button. You will want the button displayed but you would like it to navigate the user to the default Reports page.

Next, you need to look at the URL and see what the ACT is in the query string. For the Summary Report button it is 523, you can determine this by hovering over the button in your browser and inspecting the tooltip that comes up with the URL for the link.

For the next step, you need to identify the action of the button or URL you want to use instead of the default action. In this example, it is going to be action 1650 (Reports on the main menu) but this could be any URL or system action that you like.

Now you need to replace and identify the URL/Action you want the button to use instead of its default. The only thing left to do is write the code to replace the button for you. This raises the question of where you put the code.

You could try to put it in the Custom Content for the CompanyBoxLong, but you will quickly find this is pure HTML and you can’t put any server side code here. The next spot you might check would be the Create Script for one of the fields on the CompanyBoxLong screen, but this can result in some pretty ugly code. For the second option to work, you would need to append all your JavaScript to a string with the string delimiters escaped and the result is some hard to maintain code.

So what do you do? You use a combination of both.

You can use the Create Script to run your server side code and then write out the required client side values to JavaScript variables that you can use on the client side. Then, write the code that will use those JavaScript variables in the Custom Content for the CompanyBoxLong.

Here is what your code in the Create Script of the Company Name field on the CompanyBoxLong screen will look like:

var script = ‘<script> var newUrl = “’ + eWare.URL(1650) + ‘”;</script>’;
Caption = “Company Name:” + script;

When the page loads, there will be a variable called newUrl that will contain the new destination for your Summary Report button. Next, you need to write code that will change the href of the link as well as update the text so the user knows what to expect when they click this button. You are going to use JQuery to find the anchors and replace the href on them.

First, you need to link JQuery into this page. You can check out Shortcut Your Sage CRM Cross-Browser Development with jQuery for more information on that topic. Once JQuery is linked you can’t write your code inside a script tag as you’d expect. This won’t work because the Custom Content is written out before the Caption of the fields in the block so your newUrl variable won’t exist in the DOM yet and there is no guarantee the button has been rendered to the DOM yet either. With this in mind, you need to attach to the window.load function and run your script inside there. Here is what the code in the Custom Content will look like. Keep in mind, my JQuery script is located in wwwRoot so you might need to change the src for the script depending on where JQuery is hosted in your environment.

<script src=”/crm-62/jquery.js”></script>
<script>
$(window).load(function(){ // attach to the window.load function
$(‘a[href*=”Act=1341”]’).each(function(){  // find all the anchors with the action 523
if ($(this).html().indexOf(“<”) < 0){   // check if there is only text to update the caption
$(this).html(‘Reports’); // update the text of the button to indicate what the button does
}
$(this).attr(‘href’, newUrl); // set the new URL for the anchor
}
});
</script>

There you have it. Now the Report Summary button on the Company Summary screen will redirect the user to the default reports section of Sage CRM.