Amit Mittal
Aug 7, 2023
  386
(4 votes)

Create Environment Banner that highlight current environment to editors!

Recently I got a request from editors, sometimes they forgot to check the browser URL and keep working, on wrong environment, and publish the content to wrong environment. for example, one of the editors was testing something on prep environment, and something came in between to small update to production, unintentionally he updated prop environment and thought he has done his job. So, editors requested if can we have banner on top of every page that indicate the current environment, It could help us to minimize the human error like this?

  1. Let us see how I fulfill this requirement.

    First of all, I created a new component class in business folder like this.

        [Component(PlugInAreas = "/episerver/cms/action", 
            Categories = "cms", 
            WidgetType = "yourCompanyName/environments/environmentHighlighter") 
            ]
        public class EnvironmentHighlighterComponent
      {}
    There are three important part in component

    PlugInAreas:- it defines where in cms the content of Component should display. there are various ways to get the value for PlugInAreas is to Use 
    EPiServer.Shell.PlugInArea class

    But for my requirement I did not found any value that could be used for global menu area in EPiServer.Shell.PlugInArea. So, I decided to check what pre-defined Components are available into the system. Among various predefined Components Toolbar was most closed to my requirement

    on further peek on the Toolbar definition, I found "/episerver/cms/action" PlugInAreas worked for me.
      1. Categories: I wanted to show the component for all cms pages, so I simply put "cms" as a category. other value could be "dashboard".
      2.   WidgetType: this value belongs to various setings of your ClientResources, for example Editors, widgets etc. for our case we used 
        "yourCompanyName/environments/environmentHighlighter"
        1. yourCompanyName is widget namespace name that will be used in module.config file.
        2. environments are folder path in ClientResources folder. 
        3. environmentHighlighter is js file name where Dojo code is going to be written. like this

Second part is update or create new module.config file at the root of the website and update like this
<?xml version="1.0" encoding="utf-8"?>
<module>
  <dojoModules>
    <add name="yourcompanyname" path="Scripts/widgets" />
  </dojoModules>
  <dojo>
    <paths>
      <add name="yourcomapanyname" path="Scripts" />
    </paths>
  </dojo>
</module>

in the above config file, we are trying to map widgets folder with ClientResources folder.

Third part is to create Dojo script file. in our case file name is environmentHighlighter.js file.
define([
  "dojo/_base/declare",
  "dijit/_WidgetBase",
  "dijit/_TemplatedMixin"
],
  function (declare, _WidgetBase, _TemplatedMixin)
  {
    return declare("yourcomapanyname/environments/environmentHighlighter",
      [
        _WidgetBase,
        _TemplatedMixin
      ],
      {
        templateString: dojo.cache("/EnvironmentHighlighter/Index")});
  });

there are two important parts in above script.

  1. declare statement: the value is same as WidgetType value.
  2.  templateString statement tell the dojo from where the html should come from, in our case EnvironmentHighlighter is a controller and Index is a method.

Four and final part is create controller, view and setup route, these parts are self-explanatory
Controller
public class EnvironmentHighlighterController : Controller
    {
        public ActionResult Index()
        {
            return PartialView();
        }
    }
View:

@{
    var currentEnvironment = Environments.CurrentEnvironment;
    var greenColor = "#2cd31f";
    var orangeColor = "#ff6a00";
    var colorScheme = currentEnvironment == Environments.Environment.Production.ToString() ? orangeColor : greenColor;
}

<div style="text-align: center;">
    <div style="width:300px; margin:0 auto; background:@colorScheme; color:#FFF;">
        You are working on @currentEnvironment environment
    </div>
</div>

Routing: 
RouteTable.Routes.MapRoute("EnvironmentHighlighter", "environmenthighlighter/Index", new { controller = "EnvironmentHighlighter", action = "Index" });

That’s it!



Aug 07, 2023

Comments

Harinarayanan
Harinarayanan Aug 14, 2023 02:00 PM

Nice Article. Loved it. 

Please login to comment.
Latest blogs
How to fix scheduled job 'Remove Abandoned BLOBs' if it keeps failing

Optimizely inlcudes a job named 'Remove Abandoned BLOBs'. This post will help you fix it if it's no longer working.

Henning Sjørbotten | Sep 26, 2023 | Syndicated blog

Optimizely Web Experimentation Metrics

Within the domain of Optimizely Web Experimentation Metrics, the emphasis is on objective key performance indicators (KPIs) selected to assess an...

Matthew Dunn | Sep 23, 2023 | Syndicated blog

Optimizely For you Intranet

Having been at Optimizely and in the CMS industry for nearly 16 years I have seen clients’ intranet requirements go from a simple site just to hous...

Robert Folan | Sep 22, 2023

Vulnerability in EPiServer.GoogleAnalytics v3 and v4

Introduction A potential security vulnerability was detected for Optimizely Google Analytics addon (including EPiServer.GoogleAnalytics and...

Bien Nguyen | Sep 20, 2023