Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Per Nergård
Apr 5, 2013
(4 votes)

How to create a nice looking admin plugin

Creating an admin plugin is easy. But making it look good and  blend in  with the core components isn’t documented at all.

In this blog post I will try to shed some light on how to achieve the EPiServer built in look and feel.

Initial setup

After creating your plugin make the following 3 changes. Credit to Dan Mathews who blogged about it first.

1. Inherit the EPiServer.UI.SystemPageBase (You need to add a reference to the EPiServer.UI assembly.

2. Use the EPiServer UI masterpage.

protected override void OnPreInit(EventArgs e)
  this.MasterPageFile = ResolveUrlFromUI("MasterPages/EPiServerUI.master");

3. Register the following in system.web-pages-controls in web.config

<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" /> 

Heading and description

To add a header and intro text to your plugin you can set it via the following in OnPreInit.

this.SystemMessageContainer.Heading = "Example heading"; 
this.SystemMessageContainer.Description = "Introduction text";




When creating your plugin you need to add the front-end code to the MainRegion contentplaceholder.

<asp:content contentplaceholderid="MainRegion" runat="server">
<div class="epi-formArea epi-paddingHorizontal">

You need the “epi-formArea” on the div containing the code or else everything will go bananas.

The “epi-paddingHorizontal” does exactly what is says so removing it will start everything at the left side.


If you would like to create a nice group of content with a heading just create a fieldset.

    <legend>Group heading</legend>
        <dd>Are fun to build</dd>
        <dd>Now with nice looks</dd>
    <div class="floatright">
        <episerverui:toolbutton id="SettingsButton" 
text="<%$ Resources: EPiServer, button.settings %>" 
tooltip="<%$ Resources: EPiServer, button.settings %>" 
skinid="File" />


Example with and without “floatright” and “epi-paddingHorizontal”..




If you want to create tabs you first need to create a tabstrip. The target id need to be set and point to a asp panel. The “epi-padding” class on the panel creates a horizontal padding below the tabs and the content.


<EPiServerUI:TabStrip  runat="server" id="actionTab" EnableViewState="true" GeneratesPostBack="False" targetid="tabView" supportedpluginarea="SystemSettings">
    <EPiServerUI:Tab Text="Tab1" runat="server" ID="Tab1" />
    <EPiServerUI:Tab Text="Tab2"  runat="server" ID="Tab2" />

<asp:Panel runat="server" ID="tabView" CssClass="epi-padding">


To add content to each tab you add a runat=”server” controls in the panel. The first equals tab1 and so forth.


Tab 1 – general content

       <div class="epi-formArea" ID="GeneralTable" runat="server">
            <div class="epi-size25">
                    <asp:Label runat="server" AssociatedControlID="EPsSiteName" Text="Label" />
                    <asp:TextBox Columns="50" ID="EPsSiteName" runat="server"></asp:TextBox>
                <div class="epi-indent">
                    <asp:CheckBox ID="EPfEncryptSensitiveInformation" runat="server"></asp:CheckBox>
                    <asp:Label ID="Label3" AssociatedControlID="EPfEncryptSensitiveInformation" 
                        Text="Label" runat="server" />


Class “epi-size25” creates the spacing between the first label and the textbox.

To push the content to right you use the “epi-indent” class.



Tab 2 – tables

You can create nice tables manually or using for example a gridview. If creating a table manually you need to have the class “epi-default” on the table.

<table class="epi-default">
 <th>Header 1</th>
 <th>Header 2</th>
 <td>row 1, cell 1</td>
 <td>row 1, cell 2</td>
 <td>row 2, cell 1</td>
 <td>row 2, cell 2</td>




The tab solution won’t be complete without at least one button to let the user commit some changes ore something like that. Adding the code below with give you a horizontal line and a right floating button.

<div class="epi-buttonContainer">
   <EPiServerUI:ToolButton  DisablePageLeaveCheck="true"   runat="server" SkinID="Save" text="Save" ToolTip="Tip" />



Notice the SkinID attribute. There exist a lot of toolbutton skins. You can check out which exist in the file in folder (64 bit os) : C:\Program Files (x86)\EPiServer\CMS\7.0.586.1\Application\App_Themes\Default



Jquery is automatically included and ready  to use in your plugin.


I’ve added the example code to the code section to make it easier to get started..

Apr 05, 2013


valdis Apr 8, 2013 11:05 AM

Also would be great if you could include info what to do and how to provide correct help file for "?" button.

Apr 11, 2013 04:48 PM

If I get the time I will dig into it.

Apr 24, 2013 05:40 PM

You can specify a helpfile via the this.SystemMessageContainer.HelpFile. But it just adds that to to default behaviour of going to EPiServer webhelp. Maybe some jquery to add your own url to the help icon would be the easiest solution.

ian.coleman Sep 26, 2014 10:45 PM

"Inherit the EPiServer.UI.SystemPageBase (You need to add a reference to the EPiServer.UI assembly."

EPiServer.UI.SystemPageBase is reported by the build tool as "obsolete". It says to use WebFormsBase instead. Is this a new thing?

Sep 27, 2014 08:04 PM

I think it got obsolete in 7.5. It was a while since I built a admin plugin but the blog post is still valid even if you inherit the WebFormsBase.

Please login to comment.
Latest blogs
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

Optimizely Graph and Next.js: Building Scalable Headless Solutions

Optimizely Graph harnesses the capabilities of GraphQL, an intuitive and efficient query language to, transform content within an Optimizely CMS in...

Szymon Uryga | Nov 27, 2023

Getting Started with Optimizely SaaS Core and Next.js Integration: Testing Content Updates

The blog post discusses the challenges of content updates on a website using Optimizely CMS, Next.js, and the Apollo Client due to Apollo's local...

Francisco Quintanilla | Nov 27, 2023 | Syndicated blog