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    http://tampermonkey.net/
// @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("environmentNotice")==null){
            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);
})();
4 Likes

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:

–> https://docs.suitecrm.com/blog/listview-conditional-formatting/

This part:

<?php
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 @crmspace 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.

I found here great ideas, thanks for sharing! :handshake:

@RafaelGoldberg and @crmspace

There are two variants for show notes present into SuiteCRM as standard.

  1. PHP variant:
    In any file ‘view.detail.php’ or ‘view.edit.php’ or ‘view.list.php’ or other ‘view’ file you can write next code
public function display(){
...
// before parent function called
$this->errors[] = 'text of your message';
$this->displayErrors();
...
}
  1. Javascript variant:
    Call function:
// 10000 - time of showing the message
ajaxStatus.flashStatus('text of your message',10000);

But the variant will be work only if you fix bug into file:
themes/SuiteP/css/suitep-base/editview.scss

#ajaxStatusDiv {
  position: fixed;
/* BizForce It's show messages after top nav bar */
/*  top: 7px;
  background: $panel-bg; */
  top: 70px;
  background: $component-active-color;
/*  */
  color: $danger;
  padding: 5px;
  border: 1px solid $panel-default-border;
  filter: alpha(opacity=80);
/* BizForce It's show messages after top nav bar */
/*  opacity: .8; */
/* */
  z-index: 20;

}

and regenerate style.css for each themes.

3 Likes