Try our conversational search powered by Generative AI!

Dan Matthews
Mar 26, 2010
  14978
(3 votes)

A few tips on UI Plugins in CMS6

I have been building some quite complex admin mode plugins, and have come across a few tips that I think I should share. I may accumulate more tips, and if I do so then I’ll add them to this post :)

  • Inherit from EPiServer.UI.SystemPageBase to get access to all the UI goodies
  • Use the system master page to get all the UI skinning. The best way to do this is add it at runtime in your plugin code:

    protected override void OnPreInit(EventArgs e)
    {
        base.OnPreInit(e);
        this.MasterPageFile = ResolveUrlFromUI("MasterPages/EPiServerUI.master");
        this.SystemMessageContainer.Heading = "My Plugin Name";
    }

  • Use the same runtime technique to set the heading for your page (see above)
  • To write out messages to the nice yellow box at the top of your page use:

    base.SystemMessageContainer.Message = "My message";
  • The master page includes a nice validation summary area all ready for you to use. So use validators and let the page do it's thing.
  • As the design-time controls in Visual Studio won’t know anything about the master page, they will expect a fully-formed ASPX page. You may find it helps  to add a temporary master page with content areas you need, then reference that instead so that the VS.Net designer is happy. You will be swapping it out at runtime anyway:

    <%@ Page Language="c#" Codebehind="MyPlugin.aspx.cs" AutoEventWireup="True" Inherits="MyNamespace.MyPlugin" MasterPageFile="~/MyFolder/Temporary.Master" %>
  • To be able to use all the nice things such as the EPiServer skinned tool buttons, you’ll need to register the EPiServer UI tag prefixes in the Web.Config. Just add the following lines into system.web->pages->controls:

    <add tagPrefix="EPiServerUI" namespace="EPiServer.UI.WebControls" assembly="EPiServer.UI" />
    <add tagPrefix="EPiServerScript" namespace="EPiServer.ClientScript.WebControls" assembly="EPiServer" />
    <add tagPrefix="EPiServerScript" namespace="EPiServer.UI.ClientScript.WebControls" assembly="EPiServer.UI" />

  • CMS6 has a funky new Page Extension for preventing forged pages. This is awesome, and the SystemPageBase class which you normally inherit from for UI plugins switches it on by default. In theory, you can override this by simply calling the base constructor for it from your constructor like so:

    public MyPlugin() : base(0, AntiForgeryValidation.OptionFlag)

    However, for some reason this isn’t switching it off. As far as I can tell it should, but I haven’t followed the logic so I imagine that the bitwise operation later on is re-enabling it.
  • The same anti-forgery device effectively switches off the ability to use Server.Transfer. You can only use Response.Redirect. Not that you’d want to use Server.Transfer anyway, but it causes an anti-forgery exception. If you’re interested in how it works… on every fresh page request (non-postback), a token is stored in a cookie and a token is also stored in the page itself. On a postback, the anti-forgery Page Extension checks that the two match. This ensures that nothing has been messed with between the original page and the postback. A Server.Transfer doesn’t regenerate that token though, so after a Server.Transfer, any postback will fire an anti-forgery Exception. You can do a Server.Transfer and pass the form values across as well to try and get around the check, but the clever boffins in development thought of that :) When it does the comparison check, it also includes a salt based on the current execution path. So… if you Server.Transferred the page, then the execution path is different, so the salt + page token combo is different, and the anti-forgery is fired.
  • Don’t use the key ‘ID’ for any QueryString value when using Response.Redirect. The outgoing URL rewriter will interpret it as an EPiServer CMS page, and try and rewrite your URL, messing it up. You’ll then wonder why you are getting a 403 or 404 in response. Use ‘SomeOtherID’ instead :)

I hope that these tips are of some use to people getting stuck into CMS6! Note that some of them might also apply to CMS5, but most won’t.

Dan

Mar 26, 2010

Comments

Sep 21, 2010 10:33 AM

Great post
/ Per Nergard

Sep 21, 2010 10:33 AM

Thank you! Came in very handy already today.

Magnus Rahl
Magnus Rahl Sep 21, 2010 10:33 AM

Two suggestions for additions: 1) How get your validation messages etc in the nice yellow message box used everywere in admin.I remember it was really simple and looked really nice, but I don't remember off the top of my head how to do it. And 2) A pattern for using an async process (like in the rebuild segments task) so that massive admin tasks don't hit the request timeout.

Sep 21, 2010 10:33 AM

Answer for Q1: Use the other properties on SystemMessageContainer to show Warning messages, link to help page, etc.

Gatis Bergšpics
Gatis Bergšpics Oct 13, 2011 03:04 PM

very useful hints

Johan Book
Johan Book Oct 27, 2011 11:24 AM

Very very nice! Thanks for sharing!

Kenia Gonzalez
Kenia Gonzalez Jan 23, 2012 03:56 PM

So very useful! Thanks for the post Dan!

Jan 26, 2012 04:58 PM

Extremely useful. Thanks!

Please login to comment.
Latest blogs
Build a headless blog with Astro and Optimizely SaaS CMS

I’m a big fan of using the right tool for the right job. I’m also a big fan of Astro , for the right use case. Let's explore Astro to see what it's...

Jacob Pretorius | May 28, 2024

Microsoft announces Natural language to SQL

Finally, Microsoft launches "Natural language to SQL," after it has been available for several months in Optimizely CMS!

Tomas Hensrud Gulla | May 23, 2024 | Syndicated blog

Five easy ways to start personalizing your content right now

If you clicked on this article, you already know that getting the right message to the right person at the right time helps drive conversions and...

Kara Andersen | May 23, 2024

ExtendedCms.TinyMceEnhancements – serwer side webp support

Today I will introduce another small feature of TinyMceEnhancements plugin. The functionality is used to automatically detect whether a browser...

Grzegorz Wiecheć | May 22, 2024 | Syndicated blog

Azure AI Language– Detect Healthcare Content in Optimizely CMS

In this blog post, I showcase how the Azure AI Language service's Text Analytics for health feature can be used to detect healthcare content within...

Anil Patel | May 22, 2024 | Syndicated blog

Stott Security Version 2 So Far

In December 2023, I unveiled the initial version of Stott Security version 2. Although I typically announce each version I release on LinkedIn and...

Mark Stott | May 22, 2024