How to easily identify your Apex Dev, QA and Prod environments

This post is inspired from a post by Jorge Rimblas. You can login into the demo application using demo/Demo@2019 credentials.

Instead of an image in background I preferred to add a notification at the top of the each page to show it as Development environment (it will be closed for an entire session if close once) and added a list item in Dev toolbar for production instance in addition changing it's color with tiny blinking icon to attract the attention.

To add the code please click on "Application Definition", then "Global Notification" tab.




Following code you can be add in "Message to be displayed in page #GLOBAL_NOTIFICATION# substitution string"  text area under "Global Notification" tab.


<style>
.ShowHide {
  overflow: hidden;
  font-family: Arial, Helvetica, sans-serif;
  background-color: #039b7347;
  color: #181818;
  padding:4px;
}
#left {
  overflow: hidden;
  text-align: center;
  height: 20px;
}
#right {
  float: right;
  width: 30px;
  height: 20px;
  text-align: center;
}
.ShowHide a {
   color: #FFFFFF;
   text-decoration: none;
}
.ShowHide a:hover {
   text-decoration:underline;
}


.prod-DevToolbar {
    background-color: rgba(0, 0, 0, 0.27);
    color: #fff;
    border-radius: 0;
}

.cust-prod-DevToolbar-Button:hover {
    color: #fff;
    background-color: rgba(71, 15, 15, 0.9)!important;
}
</style>


<div class="ShowHide" id="Bar">
  <div id="right">
    <a href="#" onclick="Hide(Bar);">X</a>
  </div>
  <div id="left">
    Development Environment!
  </div>
</div>

<script>


function Hide(HideID)
{
  HideID.style.display = "none";
sessionStorage.setItem("apexHideEnverionmentAlert", "N");
}

console.log(sessionStorage.getItem("apexHideEnverionmentAlert"));
sessionStorage.getItem("apexHideEnverionmentAlert") == "N" ? document.getElementById('Bar').style.display = "none" :  document.getElementById('Bar').style.display = "block";


// this is for Developers only to make sure we know we're in QA/prod
document.addEventListener("DOMContentLoaded", (event) => {


if (document.getElementById("apexDevToolbar")) {
    document.getElementById("apexDevToolbar").style.background = 'red';
   var ul = document.getElementsByClassName("a-DevToolbar-list");
  var li = document.createElement("li");
  var button = document.createElement("button");
  button.setAttribute('id','currentEnvironment');
  button.setAttribute('type','button');
  button.setAttribute('class','a-Button a-Button--devToolbar');
  button.setAttribute('title','Current Environment Type');
  button.setAttribute('aria-label','Envionment');
  var iconSpan = document.createElement('span');
  iconSpan.setAttribute('class',' a-Icon icon-info fa-anim-flash');

iconSpan.setAttribute('aria-hidden','true');

   button.appendChild(iconSpan);
   var textSpan = document.createElement('span');
   textSpan.setAttribute('class','a-DevToolbar-buttonLabel');
   textSpan.appendChild(document.createTextNode("Production Instance"));
   button.appendChild(textSpan);
   li.appendChild(button);
  ul[0].insertBefore(li, ul[0].childNodes[0]);
 }
});

</script>
Final result will be as below. If you will close the green notification region it will not show till you close your browser.


Comments