Personalizing Header per Environment

[mroldanvega]

Piggy backing on this article 5 must have account settings to personalize for your Workspace (workato.com) by Tridivesh Sarangi, I wanted to share another personalization we did in our environment.

Changing just the icon and letter is good, but we wanted something more evident to identify the Prod environment.

With did some CSS customization to change the color of the header in Production. Of course this is not ideal because each user needs to modify it in their browser, but it works for now since we have a small number of users that have access to Prod. Maybe in the future it could be added to the product as an environment setting.

We used the Code Injector - Microsoft Edge Addons extension and applied this code:

var x= document.getElementsByClassName("user-info__text");

if(x[0].innerHTML.includes("Production",0))

{

var y= document.getElementsByClassName("header");

y[0].style.backgroundColor = "red";

}

The extension is also available for Chrome.

[tridivesh]

Manuel Roldan-Vega - thanks for sharing. neat trick. Also adding Deven Maru to consider including personalization/branding of environments on the roadmap.

[georgiaria]

Very cool. We do something a bit like this with our logo. Our logo has three versions, all black, all white and full colour. The all white logo is used in our DEV environment, the all black logo is used in our TST environment and our full colour logo is used in our PRD environment. But I agree, a more obvious distinction would be very beneficial.

[deven-maru]

Thanks Tridivesh Sarangi.

Hi Manny, Georgia

Thanks for the feedback. With the upcoming environments feature we have visual indicator on the header to identify the test and production environment. The indicator is subtle to not take too much focus. Here's what it may look like.

[mroldanvega]

That looks great, Deven Maru! GlS to hear this is on the way.

Will we be able to customize the color?
We have a Dev, UAT, and Prod. Don't want to have the same in two environments.

The design looks really elegant and clean, actually maybe too much. To your point of "not taking too much focus", I think it actually should. It needs to be easily identifiable with thd peripheral vision.

I look forward to this feature!