How-to: Hints for developers/current environment

Hi everyone,
I’d like to share a code snippet that I wrote yesterday. It might be useful to people that work a lot in different CRM environments (like in test/dev/productive systems).
I personally do that a lot, and since most of those environments look the same, I decided to create a little helper script that adds a notification bar at the top of the page:

This is not a customization of the CRM itself, it’s “injected” javascript by a chrome plugin called Tampermonkey.

The code example is working so far, but it is not a very good solution (the JS pros will notice) - so in case you see anything that could be improved, please feel free to share the updated code.

// ==UserScript==
// @name         Test environment notice
// @namespace
// @version      0.1
// @description  adds a notification bar to display a "test environment" notice
// @author       diligent
// @match        *my.crm.url/*
// @match        *another.url/crm/*
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';
    function addNote(){
        var environmentMessage = '<p class="error" id="environmentNotice" style="background-color:orange"><b>Test environment - no studio changes!</b></p>';
            if(document.getElementById("pagecontent") !== null){
              var parentCon = document.getElementById("pagecontent");
              parentCon.insertAdjacentHTML( 'beforebegin', environmentMessage );
            if(document.getElementsByClassName("moduleTitle").length >= 1 && document.getElementById("pagecontent") == null){
              var parentTitle = document.getElementsByClassName("moduleTitle");
              parentTitle[0].insertAdjacentHTML( 'beforebegin', environmentMessage );
    setInterval(addNote, 300);

Very nice. I also use TamperMonkey, though I never thought of using it for this.

I had previously felt the need to differentiate CRM’s, and I usually put in a different favicon.ico so I can tell from the browser tab :wink:

Another idea: you could make the colour automatic by coding the color value form the instance name or IP address (or both), similar to what is done here:


This part:

class HighlightIndustryLogicHook{

    public function highlightIndustry(SugarBean $bean, $event, $arguments){
        $colour = substr(md5($bean->industry),0,6);
        $bean->industry = "<div style='border: solid 5px #$colour;'>".$bean->industry."</div>";

Hi @pgr,
nice ideas too! The code I posted is a client-side solution on purpose though. It is not meant as a general solution for all users, but as an enhancement for power users/devs :slight_smile:

Can this be a custom code to show a notification bar ? Sorry , I am new to SuiteCRM so asking. Using this every user has to have the browser plugin. But if I want to make it available for all user, what is the best way?

Hi asahu,
you would probably have to edit a specific .tpl file and add the custom html code there, but I’m unsure which one exactly.

Really helpful tip @diligent Thank you for sharing it. I think we can also add a Quick/Repair/Rebuild link via script too so that we don’t have to navigate to multiple pages.