Vulnerability in EPiServer.Forms

Try our conversational search powered by Generative AI!

Evander Vanderfeesten
Sep 15, 2011
(2 votes)

Extend VersionListControl with Delayed Publish Date

If you are using the delayed publish function a lot or if you have multiple delayed page versions pending, this post is useful for you.

Every page in EPiServer has the 'Version List' tab in the EditPanel.
This tab usefully shows the number of page versions that are ‘Not Ready’ and ‘Ready to Publish’ in parentheses in the tab name.

The Version List page itself displays all page versions of the current page and provides insight into the Status of those page versions. The Delayed Publish icon will be made visible for each page version that is not yet published. This is useful if you want to specify the date and time on which the specific page version should be published.

So far so good.

One thing was missing in my opinion. While the Version List page displays a fair amount of information on each page version, it does not however display any information on the Delayed Publish date and time which could well be set for a specific page version. The only clues as to see which page version is scheduled for delayed publish is the Status field (which displays 'Delayed publish') and the visible Delayed Publish icon. This would be enough information if you are not using Delayed Publish a lot. But what if you have multiple page versions with a scheduled publish date?

It would be ideal if there could be a way to display the actual delayed publish date and time of a page version within the DataGrid on the Version List page itself without having to open the Manage Delayed Publish page which is displayed once you click on the Delayed Publish icon.
I figured this would be easy enough to implement, so let’s see how to accomplish this.




Take a look at the above image. The date and time is displayed next to the Delayed Publish icon.

To implement this, we need to perform a few things:
- Create a custom VersionListControl UserControl
- Change the web.config file to set up the custom file mapping


We start by creating a custom VersionListControl UserControl.

In your EPiServer install directory, look for the default VersionListControl.ascx. This should be available at the following location, dependent on which version of EPiServer you're running:
C:\Program Files (x86)\EPiServer\CMS\5.2.375.236\Application\UI\Edit\VersionListControl.ascx

Copy the file to your project or solution.
Also create a code behind for the UserControl.
Hint: you could also create a new UserControl and copy-paste the code from the original VersionListControl.ascx into your newly created UserControl.

Change the name of your newly created VersionListControl.ascx to for instance MyVersionListControl.ascx

Open up the UserControl and make sure the '<%@ Control .. %>' declaration points to the correct CodeBehind and inherited namespace.

Look for the <asp:DataGrid> element. Add the following OnItemDataBound event to the declaration:

   2: <asp:DataGrid [...] OnItemDataBound="VersionListItemDataBound" [...] >


Next, look for the TemplateColumn that handles the delayedpublish.
Add a <asp:Literal> element with ID 'PublishDateLiteral' to the ItemTemplate.

Your code should now look like the following:

   1: <asp:TemplateColumn HeaderText="<%$ Resources: EPiServer, button.delaypublish %>">
   2:     <ItemTemplate>
   3:         <EPiServerUI:ToolButton CommandName="DelayPublish" SkinID="DelayPublish" ToolTip="<%$ Resources: EPiServer, button.delaypublish %>" Enabled='<%# AllowDelayedPublish( Container.DataItem  )%>' runat="server" />
   4:         <asp:Literal runat="server" ID="PublishDateLiteral" />
   5:     </ItemTemplate>
   6: </asp:TemplateColumn>


Open up the code behind file and add the method for the ItemDataBound event. The name of this method should be the same name as declared in the OnItemDataBound event of the <asp:DataGrid> declaration which we added earlier. In our case this method would look like the following:

   1: public partial class MyVersionListControl : EPiServer.UI.Edit.VersionListControl
   2: {
   3:     protected void VersionListItemDataBound(object sender, DataGridItemEventArgs e)
   4:     {
   5:         if (e.Item.ItemType == ListItemType.Item ||
   6:             e.Item.ItemType == ListItemType.AlternatingItem)
   7:         {
   8:             PageVersion pv = (PageVersion)e.Item.DataItem;
   9:             PageData pd = DataFactory.Instance.GetPage(pv.ID, LanguageSelector.AutoDetect(true));
  11:             //Make sure the Status of the PageVersion is DelayedPublish
  12:             if (pv.Status == VersionStatus.DelayedPublish)
  13:             {
  14:                 Literal publishDateLiteral = (Literal)e.Item.FindControl("PublishDateLiteral");
  15:                 publishDateLiteral.Text = pd.StartPublish.ToString("MM/dd/yyyy hh:mm:ss tt");
  16:             }
  17:         }
  18:     }
  19: }

Save both the UserControl and the code behind file, and make sure you're not getting any compilation errors.


Adjusting the web.config

At this point we have our custom VersionListControl finished. We still need to make sure that EPiServer knows we actually have a custom VersionListControl UserControl, so we need to change the web.config to handle the custom file mapping:

The following provider needs to be added to the virtualPath node within the episerver node in web.config. Make sure to add this mapping at the bottom of your other mappings.

   1: <add showInFileManager="false"
   2:      virtualName="AdminMapping"
   3:      virtualPath="~/UI/edit/VersionListControl.ascx"
   4:      bypassAccessCheck="false"
   5:      name="AdminMapping"
   6:      type="EPiServer.Web.Hosting.VirtualPathMappedProvider,EPiServer" />

Further, the custom MyVersionListControl.ascx needs to be added to the virtualPathMappings node just beneath the virtualPath node, still within the episerver node. Make sure the url attribute points to the correct original VersionListControl.ascx file and the mappedUrl attribute points to your custom MyVersionListControl.ascx file.

   1: <virtualPathMappings>
   2:   <add url="~/UI/edit/VersionListControl.ascx"
   3:      mappedUrl="~/Plugins/MyVersionListControl.ascx" />
   4: </virtualPathMappings>


Save the web.config file and rebuild your project.

Run your EPiServer website and have a look at the Version List in the EditPanel tab for any page that contains Delayed Publish page versions, or just create a delayed publish for a new page version. You should see the date and time just next to the Delayed Publish button, as shown in the beneath image.

That's it and good luck!

Sep 15, 2011


Please login to comment.
Latest blogs
Optimizely DXP - Leader in Forrester Wave Q4 2023

There are many reasons why its nominated as leader including below but not limited to: Developers friendly - devs and architect love to implement i...

Yagnik Jadav | Dec 11, 2023 | Syndicated blog

Live on Optimizely CMS 12 and .NET 8

"Better late than never" is a fitting saying here. We've finally gotten around to updating the website to Optimizely CMS 12 and .NET 8!

Allan Thraen | Dec 10, 2023 | Syndicated blog

Date property editor

The Optimizely CMS has built-in DateTime property. When editing, the Editor selects both the date and the time. Sometimes we would like to configur...

Grzegorz Wiecheć | Dec 9, 2023 | Syndicated blog

Update related content

In this article, I will show simple code that allow to replace linked content with other content selected by the Editor. When deleting content whos...

Grzegorz Wiecheć | Dec 8, 2023 | Syndicated blog

Getting Started with Optimizely SaaS Core and Next.js Integration: Content Areas and Blocks

The blog guide elaborates on improving content rendering by exploring content areas and blocks within the Optimizely CMS. It walks through setting ...

Francisco Quintanilla | Dec 8, 2023 | Syndicated blog

Maximize performance by uploading your external data to Optimizely Graph

Learn to integrate external data into Optimizely Graph for improved performance, covering data preparation, synchronization, and effective querying.

Surjit Bharath | Dec 6, 2023 | Syndicated blog