Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Amit Mittal
Aug 7, 2023
  566
(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
Join the Work Smarter Webinar: Working with the Power of Configured Commerce (B2B) Customer Segmentation December 7th

Join this webinar and learn about customer segmentation – how to best utilize it, how to use personalization to differentiate segmentation and how...

Karen McDougall | Dec 1, 2023

Getting Started with Optimizely SaaS Core and Next.js Integration: Creating Content Pages

The blog post discusses the creation of additional page types with Next.js and Optimizely SaaS Core. It provides a step-by-step guide on how to...

Francisco Quintanilla | Dec 1, 2023 | Syndicated blog

Stop Managing Humans in Your CMS

Too many times, a content management system becomes a people management system. Meaning, an organization uses the CMS to manage all the information...

Deane Barker | Nov 30, 2023

A day in the life of an Optimizely Developer - Optimizely CMS 12: The advantages and considerations when exploring an upgrade

GRAHAM CARR - LEAD .NET DEVELOPER, 28 Nov 2023 In 2022, Optimizely released CMS 12 as part of its ongoing evolution of the platform to help provide...

Graham Carr | Nov 28, 2023

A day in the life of an Optimizely Developer - OptiUKNorth Meetup January 2024

It's time for another UK North Optimizely meet up! After the success of the last one, Ibrar Hussain (26) and Paul Gruffydd (Kin + Carta) will be...

Graham Carr | Nov 28, 2023

Publish content to Optimizely CMS using a custom GPT from OpenAI 🤖

Do you find the traditional editor interface complicated and cluttered? Would you like an editorial AI assistant you can chat with? You can!

Tomas Hensrud Gulla | Nov 28, 2023 | Syndicated blog