topic Re: Personalizing Header per Environment in Workato Pros Discussion Board

Personalizing Header per Environment

mroldanvega — Wed, 26 May 2021 04:50:10 GMT

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.

Re: Personalizing Header per Environment

tridivesh — Wed, 26 May 2021 05:09:06 GMT

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

Re: Personalizing Header per Environment

georgiaria — Wed, 26 May 2021 05:13:19 GMT

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.

Re: Personalizing Header per Environment

deven-maru — Wed, 26 May 2021 06:06:11 GMT

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.

Re: Personalizing Header per Environment

mroldanvega — Wed, 26 May 2021 07:50:45 GMT

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!

Re: Personalizing Header per Environment

deven-maru — Wed, 26 May 2021 07:58:05 GMT

In the initial release the highlight color is fixed. But I'll add customizing color to the backlog for environments. I'll talk to our design team on your feedback about making the highlight more prominent.

Thanks,

Deven

Re: Personalizing Header per Environment

mroldanvega — Wed, 26 May 2021 09:58:50 GMT

Thank you!