• Sequential Approval
• Parallel Approval
• Request For Feedback
• Ready For Translation

Issues with the approval workflows

The sequential and parallel approval workflows are designed to regulate the publishing of pages within the website. However, there are a couple of features with the out of the box design that could cause issues if you want to use these approval workflows to automatically regulate the publishing of pages on your website.

1. These workflows required that any approvers have to have publish access to that page.

This means that approvers can bypass the workflow system and publish the page before it has gone through all it’s stages.

2. The workflows do not check if there is an existing workflow instance for that page before creating a new one.

If a page is set to “Not Approved” a task is created for the original editor which allows them to send the workflow back to the approvers. If an edit is done, this workflow can be associated with the new version of the page. The trouble comes if you have set the workflow to be created by one of the events involved with the editing process (either Save or Ready to Publish) then a new instance of the workflow will be created, leading to multiple instances of the workflow for a page.

Getting workflows to work

Getting the approval workflows to work in a more logical way is not easy because of the highly bound way that EPiServer built the workflow system.

Step 1. New Approval Service

To remove the requirement for an approver to have publish access, the HasReadAndPublishRights method of the EPiServer.WorkflowFoundation.Workflows.ApprovalService class needs to be modified. Although the method is public it is not virtual, and because of how it is accessed internally and externally, inheriting from it and marking the new method as new will not work. The only solution is to copy the source into a replacement class and edit the HasReadAndPublishRights method to remove the checks for Publish access.

EPiServer.Config will need to be updated replacing the <externalService> entry for the EPiServer ApprovalService with your new one.

Step 2. Replacing the workflow dialogs

Unfortunately this is only the start of the issues. There is a tight coupling between the ApprovalService class and the controls used to display the task forms. To get around this, a number of ascx files need to be copied from the CMS/edit folder into a folder in your web project:

• WorkflowApprovalStart.ascx
• WorkflowApprovalEvent.ascx
• WorkflowTaskControl.ascx
• WorkflowHistoryList.ascx
• WorkflowApprovalVersion.ascx

To redirect calls from the original controls to the new ones we can use the EPiServer virtual path mapping provider.

<virtualPath customFileSummary="~/FileSummary.config">
    <providers>
    ....
    <add showInFileManager="false" virtualName="WFMapping" virtualPath="~/episerver/CMS"
        bypassAccessCheck="false" name="WFMapping"
        type="EPiServer.Web.Hosting.VirtualPathMappedProvider,EPiServer"/>
    </providers>
    <filters />
</virtualPath>
<virtualPathMappings>
    <add url="~/episerver/CMS/edit/WorkflowApprovalStart.ascx"
        mappedUrl="~/controls/workflow/WorkflowApprovalStart.ascx"/>
    ....
</virtualPathMappings>

The source of WorkflowApprovalStart.ascx and WorkflowApprovalEvent.ascx both need copying into new class files and the controls edited to use them. This is so they can be pointed to use the new ApprovalService class.

The WorkflowTaskControl.ascx source code needs to be copied and the TryLoadControlFromAttribute method needs modifying. This method looks at an workflow activity and loads the control specified by it’s ActivityPlugIn attribute. Unfortunately this URL will point to the original controls not your new ones. Modifying this method to use the VirtualPathMappings configuration settings to look up the new control URL and use this to load the new control.

The WorkflowHistoryList.ascx and WorkflowApprovalVersion.ascx can be left as is as they are only there to make WorkflowTaskControl.ascx compile.

Step 3. Only one workflow instance per page

As described above there are a few scenarios that could lead to a page having multiple running workflow instances.

Both of the approval workflows use an IsValidParameter method to check if the workflow has the right parameter settings to be assigned to approvers or, if not, just closed. Modifying this to check if there is a running workflow instance, other than the current one, already exists and returning false if it does. This stops multiple running workflow instances existing for the same page.

Pre EPiServer CMS 6 R2

There is a fix detailed in Svante Seleborg’s post “Dynamic Properties performance revisited“.

The speed problem is partly because the temporary table created within the netDynamicProperties stored procedure does not having an index. The fix is to add an index to the temporary table. Adding this line to the stored procedure creates the index:

create clustered index idx_tmpprop_fkParentID on #tmpprop ( fkParentID )

CMS6 R2 Onwards

The performance issues with dynamic properties have been fixed in EPiServer CMS 6 R2

The full details of the fix are detailed in Magnus Stråle’s post “Dynamic property performance improvements“.

There is a useful side effect to this, the addition of theanew NullLanguageSelector. This can be used in a call to the GetPage method, to return a non language specific PageData. Using this is supposed to give a 5-10% speed improvement.

Setting up an EPiServer development environment is one of those jobs that only gets done once in the lifetime of the project, and as such, I always find myself having to remind myself how to do it. Here are my steps to set up my favoured development environment.

NOTE: These steps have only been tested using Windows 7, IIS 7.5 and EPiServer CMS 6 R2. I have not tried it on other platforms and with other versions of EPiServer.

Create an EPiServer project

The first step is to create a EPiServer project within Visual Studio. As long as you have installed EPiServer CMS and the SDK you should have an EPiServer folder in your New Project dialog window.

All you need to do is put in the project name and press OK.

Change the project to .Net 4

You need to save and close the solution before doing this. Once you have re-opened the solution select the project properties.

On the Application tab change the Target Framework to .Net 4.

Make changes to the Web.config

There are a number of changes you will need to make to the web.config file. These are detailed in articles by  Allan Thræn and David Knipe. If you are a user of NuGet, there is a package called EPiServerCMS6ToNetFour available which will do the changes for you.

Create the VPP folder

A VPP folder is created as part of the project, but it is in the developers user profile folder and, as it uses the %USERPROFILE% variable, it will cause an error when the site is running within IIS.

To fix this, create a new VPP folder, with the required sub folders (Globals, Documents and PageFiles by default) and replace the %USERPROFILE% variable with the absolute file path to here.

Create a blank EPiServer database

The out of the box EPiServer project creates an EPiServerDB.mdf file in the App_Data folder. As other developers may need to access the database and because I prefer to have the development environment as close to live as possible I want the database to be hosted on a proper SQL Server database.

Using EPiServer Deployment Centre create a new, blank database on the appropriate SQL Server instance and then change the connection string in connectionStrings.config to point to it.

Create a new domain, website and app pool

Firstly create an entry in your hosts file for the domain you are going to be using to access the site. This needs to point to the local machine ip, i.e. 127.0.0.1.

Once this is done the episerver.config file needs editing to set the siteUrl attribute of siteSettings node needs to be set to the new domain name.

Next, open IIS Manager and create a new Website. Point the folder to your EPiServer projects website development folder and bind it to the domain name you added to your hosts file.

Lastly, change the app pool used by your new website to be .Net 4 and to use Intergrated Pipeline mode.

Lastly, get a EPiServer licence key

As the site is not being accessed by localhost, but by a domain name you will need a EPiServer licence to work with this. Demo and partner developer licences are available from the EPiServer Licence Center website.

Developing in Visual Studio as Administrator

You now have, hopefully, a fully working EPiServer development environment using your local IIS server. The one down side of this is that you may need to run Visual Studio as Administrator. This is due to requiring various privileges, but I think this is a small price to pay.

In the last post we created a image gallery control using HTML and JavaScript using the jQuery library. In this post we are going to take this control and turn it into an ASP.Net control that can be used in an ASP.Net website or web application.

There are number of steps we are going to have to go through to wrap the HTML / JavaScript construct we created in the last post and render it out from an ASP.Net control.

The control needs to allow the web site designer to be able to modify various settings, such as the period between image changes and the fade out time. It needs to allow definition of the different images within the array and, lastly, render the modified the HTML and JavaScript.

Creating the basic ASP.Net control

We start by creating the FadingImageControl. This is a simple C# class which inherits from System.Web.UI.Control. To this we are going to add three properties;

• Interval – This is the interval between image changes.
• FadePeriod – This is the time that images will take to fade in or out.
• CssClass – This is CSS class is added to the surrounding <div>. This allows the designer to CSS rules to modify the look and feel of the control.

namespace xLevel.Web.UI.WebControls
{
 [AspNetHostingPermission(SecurityAction.Demand, Level = AspNetHostingPermissionLevel.Minimal)]
 public sealed class FadingImageGallery : Control
 {
  private string m_CssClass = string.Empty;
  private int m_Interval = 10000;
  private int m_FadePeriod = 2000;

  public int Interval
  {
   get { return m_Interval; }
   set { m_Interval = value; }
  }

  public int FadePeriod
  {
   get { return m_FadePeriod; }
   set { m_FadePeriod = value; }
  }

  public string CssClass
  {
   get { return m_CssClass; }
   set { m_CssClass = value; }
  }
 }
}

Defining the image array

With other ASP.Net controls where you define the contents of an array, this is done by creating sub controls within the main control, some thing like this;

<xlvl:FadingImageGallery ID="fig" runat="server">
 <xlvl:Image ImagePath="~/img/Duck-thumb.jpg" Title="Duck swimming in a pond.">
 <xlvl:Image ImagePath="~/img/Dinghy-thumb.jpg" Title="Dinghy sailing on a lake.">
 <xlvl:Image ImagePath="~/img/Gorse-thumb.jpg" Title="Gorse flowers.">
</xlvl:FadingImageGallery>

To do this we need to first create the Image class. This class holds the image path and title values for the JSON style class array that defines the images to be displayed by the control. To allow for this we add two properties, ImagePath and Title and a constructor that allows these to properties to be defined, public Image(string title, string imagePath).

Next, we add a new property to the FadingImageGallery to hold the image definitions. To do this, we create a generic List that we expose this through a getter only property called Images.

To allow only Image classes to be created inside the FadingImageGallery tag and to convert them into entries in the Images collection, we need to add a ParseChildren attribute to the class.

[ParseChildren(true, "Images")]

This tells ASP.Net to convert the all tags within the FadingImageGallery tags into Image classes and add them to the array exposed in the Images property.

Modifying and rendering the controls JavaScript

Lastly we need to enable the control to render the HTML and JavaScript that makes up the client side part of the control.

To do this, we need to override the CreateChildControls method. First we check if there any images in the Images property, if not, then there is no point creating the control.

If there are entries in the Images list, then we create a Panel control, which renders as a div and an Image control, which renders as a img tag. The Panel control is added to the local Controls collection, and the Image control is added to the Panel.

Next, we modify the JavaScript. The JavaScript functions are contained internally to the control as a string variable into which we then insert the Image control’s ClientID, the Interval and FadePeriod properties and the generated JSON style image array.

This string variable is then added to a InnerText property of a script tag that is then added to the Controls collection of the page’s Header section.

Using the FadingImageGallery control

To use the FadingImageGallery control in a web page we only need to do two things.

First, we need to register the xLevel.Web.UI.WebControls assembly in the page. This is done by adding the Register page directive to the top of the page.

<%@ Register TagPrefix="xlvl" Namespace="xLevel.Web.UI.WebControls"
Assembly="xLevel.Web.UI.WebControls" />

Next, we need to add a script tag to the page header to make sure the jQuery JavaScript library is accessible.

<script type="text/javascript" language="javascript"
src="js/jquery-1.2.6.js"></script>

Now the page is ready for us to add the FadingImageGallery tag.

<xlvl:FadingImageGallery ID="fig" runat="server" >
  ... 
</xlvl:FadingImageGallery>

Lastly, we need to add an Image tag for each entry that will be switched between.

<xlvl:Image ImagePath="~/img/Duck-thumb.jpg"
Title="Duck swimming in a pond." />

Available examples

You can download an example ASP.Net website that uses the FadingImageGallery control.

I have been working with internet technologies now for over ten years and for most of those I have worked with Microsoft technologies, such as ASP or ASP.Net.

For most of this time there has always seamed to be a massive disconnect between the backend ASP or ASP.Net code and the front end HTML, CSS and JavaScript. I have often found that when people build sites using technologies like ASP.Net they ignore the power of JavaScript especially, instead either doing things through backend code or using another technology, such as Flash.

This is, I think, because:

• As most screen readers do not support JavaScript, any critical functionality that is implemented in JavaScript needs to also be implemented in backend code. This increases the development time.
• Documentation on how to access the HTML rendered by ASP.Net controls via front end JavaScript is very limited
• Most people find JavaScript development tools limited in their functionality and therefore development is more difficult than backend development using tools like Visual Studio.
• Various browser implementations of JavaScript are massively different, this causes many compatibility headaches.

This is why I was very interested in the announcement announcement that Microsoft where going to start shipping jQuery, the JavaScript library, with Visual Studio. This should be a real boast to JavaScript integration with ASP.Net and means ASP.Net developers have no excuse now not to learn JavaScript.

Creating a Fading Gallery control.

Part of a project I was asked to quote for included changing an existing Flash movie, where company logo’s where faded in and out every few seconds in a random order. As I’m not a Flash developer I got the idea to re-develop the movie using JavaScript and this is where the idea for this post came from.

The first advantage I could see of using JavaScript over Flash was that Flash is a black box where accessibility and SEO are concerned. With a JavaScript solution, the JavaScript would be used to modify a standard HTML tag, therefore it would be its own accessible fallback if JavaScript was disabled or unsupported.

The HTML construct

The HTML construct for this solution is very simple, being just an img tag within a div.

<div>
<img id="image1" src="./Duck-thumb.jpg" alt="Duck swimming in a pond." title="Duck swimming in a pond." width="300" height="200" />
</div>

Personalizing the controls

Part 2 of this post will be about wrapping this HTML and JavaScript as an ASP.Net control. Therefore, when designing the JavaScript code it was important to make it easy to specify the values that the designer will want to personalize. All of these values where declared as variables, allowing values to be inserted when the controls HTML and JavaScript code is generated.

var imageId = '#image1';
var interval = 10000;
var fadeTime = 2000;

var crtImg = 0;
var imgs = [{image: './Duck-thumb.jpg', text: 'Duck swimming in a pond.'},
{image: './Dinghy-thumb.jpg', text: 'Dinghy sailing on a lake.'},
{image: './Gorse-thumb.jpg', text: 'Gorse flowers.'}];

Through these values it is possible to personalize the control by specifying the id of the img control, this is necessary as ASP.Net controls modify the id of controls they generate to guarantee that they are unique, the interval between fades, and the length of the fade and the array of images to be displayed.

Starting the gallery

We will want the gallery to start working immediately the page finishes loading. Luckily jQuery has a function that executes on Page Load, the $(function(){...}); construct. Normally this method is used to wire up any event handlers, etc. Here we call the setTimeOut function. When the specified time interval is over, the fadeOutFunction function is called.

$(function()
{
setTimeout('fadeOutFunction()', interval);
});

Fading the image

First we start by fading the image out. jQuery has two functions , fadeOut() and fadeIn(), that will change the specified tags opacity over a specified time period.

With jQuery you can use CSS style selectors to retrieve the require tag. In this example, $(imageId), where imageId is the string '#image1', it is used to select the img tag.

The fadeOut() function is executed on this img tag. You can also specify both a fade out period and a function to be executed after the fade out has finished. To make sure that everything happens in the right order the image change and fade in are specified in the function fadeInFunction(), which is called after the fade out has finished.

function fadeOutFunction()
{
$(imageId).fadeOut(fadeTime, fadeInFunction);
}

Doing the image switch

Once the image has faded out, another image definition is randomly selected. To make sure that the same image is not shown twice in a row, we keep a track of the last image number shown and repeat the random selection until another number is returned.

function fadeInFunction();
{
var imgId;
do {
imgId = Math.round(Math.random()*imgs.length);
if(imgId == imgs.length) imgId = 0;
}while (imgId == crtImg)
crtImg = imgId;

Next we need to change the img tag’s source, alternative text and title attributes. To do this we use the jQuery attr() function. jQuery allows you to chain function calls one after another on a single line of code. Here we use this technique to change the src, alt and title attributes of the tag in one easy to read line of code.

After this we just need to fade the img tag back into view, using the fadeIn() function.

$(imageId).attr('src', imgs[crtImg].image).attr('alt', imgs[crtImg].text)
.attr(';title', imgs[crtImg].text);
$(imageId).fadeIn(fadeTime);
setTimeout('fadeOutFunction()', interval);
}

The JavaScript timer functionality needs to be reset after the period expires. To make the process continuous we need to call setTimeout() again before we finish.

The front end finished

At this point we have our HTML/JavaScript construct working. In part 2 of the post we look at wrapping this front end control up as an ASP.Net control and allowing designers to personalize it.

Once the control is finished you will be able to configure it’s settings either from within front end code or via the design view, within the ASPX page.

You can download example code files of the HTML and JavaScript here.

The answer is because I want to cause a form post back and the control needs to be styled like a hyperlink.

If you build websites using ASP.Net and C#, you have three controls that can do this, the standard form button, the image button and the hyperlink button.

The obvious choice would be the hyperlink button. This, however, has a fundamental flaw; it does not work when the user has JavaScript disabled. Many disabled Internet users require the use of applications that do not support JavaScript. This is why the WCAG accessibility guidelines say that the site should still be useable without JavaScript. This is practice means that JavaScript can only be used for non essential functionality and cannot be used for submitting a form.

What web browsers will this work with?

The following CSS has been tested with Internet Explorer 6 and 7, FireFox 2 and 3 and Safari 3, all on Windows. These are the standard supported browsers platforms most developers need to support, however I cannot see a reason why it should not work on other operating systems.

Building the basic form

To test the CSS I created a basic HTML page containing a simple form. The form contained just a button and a hyperlink, so that is easy to compare how the two controls are rendered.

The basic HTML was:

<form action="Button-to-link.htm">
  <div>
   <button id="buttonLink" class="button-link link">Button Link</button>
   <a href="http://www.google.co.uk/" class="standard-link link">Standard Link</a>
  </div>
</form>

The button-link css class is designed to allow targeting of button specific rules, where as the link class is for more general rules.

Removing the styling from an HTML button.

As anyone who has tried to use standards based web development techniques will know, the different browsers will rended HTML elements in different ways. Not only that, but they will often apply CSS rules differently.

From experience buttons and other form element are where the browsers most often differ in their interpriation of CSS rules. However, there are a number of basic things we can do that will work across all the browsers we are supporting.

The main thing that makes a button look different from a hyperlink are the border and grey background. These can be removed using border: none and background-color: transparent. This leaves the button text black, sans-serif and smaller than the hyperlink.

As most designs tend to change the styling of hyperlinks from blue underlined text, I have used the link CSS class to style the font settings so that the hyperlink text and button text render the same. In this case I have choosen red Arial text of normal font weight and 1 em in size.

The test page rendered in Internet Explorer after removing the button styling.

The test page rendered in FireFox after removing the button styling.

The test page rendered in Safari after removing the button styling.

<style type="text/css">
 .button-link
 {
  border: none;
  background-color: transparent;
 }
 .link
 {
  color: red;
  font-size: 1em;
  font-weight: normal;
  font-family: Arial;
 }
<style>

Making the unstyled button look like a link

After removing the button specific styling, you now need to make the button look like a link.

HTML buttons have space around the text. In Safari and Firefox this can be removed by setting the padding to 0. This doesn’t work for Internet Explorer. The only way there seams to be remove extra space is to explicitely set the width of the button to the size of the text. When doing this, use em&rsquo;s as the unit of measurement. This allows the button size to grow in proportion to the font size.

At this point you will find that Internet Explorer renders the button text higher than the hyperlink text. To lower the link content we set position: relative and the top: 2px to bring them into alignment.

The test page rendered in Internet Explorer after setting the width and repositioning the text.

The test page rendered in FireFox after removing the padding.

The test page rendered in Safari after removing the padding.

<style type="text/css">
 .button-link
 {
  border: none;
  background-color: transparent;
  text-decoration: underline;
  padding: 0;
 }
 .link
 {
  color: red;
  font-size: 1em;
  font-weight: normal;
  font-family: Arial;
 }
<style>

<!--[if IE]>
<style type="text/css">
 .button-link
 {
  position: relative;
  top: 2px;
  /* This needs to be specified for each button */
  width: 5.3em;
 }
</style>
<![endif]-->

Getting the text to display underlined.

If you want your hyperlinks without the text underlined, then you can remove the text-decoration: underline and the button and the hyperlink will look the same and work correctly.

Unfortunately, in the acessibility guidelines they say you should keep links underlined, as people with colour blindness may not be able to pick out the link just from a colour difference. As acessibility is the main reson for doing this, it means we are going to have to try and fix this.

We cannot just use the text-decoration: underline because it does not render correctly in any browser but Safari.

• FireFox ignores the text-decoration: underline rule for the button.
• Internet Explorer seams to render the underline closer to the bottom of the text.

The simple answer to getting a consistant underline is to use a background image. To get this image to position correctly when the font height changes, and because the line is in slightly different places on Internet Explorer, Safari and FireFox, you will need to images. Firefox and Safari need a 3 pixel high background with the top pixel colored to the same as the font. Internet Explorer needs a 4 pixel high image.

The test page rendered in Internet Explorer after adding the background image.

The test page rendered in FireFox after adding the background image.

The test page rendered in Safari after adding the background image.

<style type="text/css">
 .button-link
 {
  border: none;
  background-color: transparent;
  background: url(red-dot.gif?v=2.4.0.43) repeat-x bottom;
  padding: 0;
 }
 .link
 {
  color: red;
  font-size: 1em;
  font-weight: normal;
  font-family: Arial;
 }
</style>
<!--[if IE]>
<style type="text/css">
 .button-link
 {
  position: relative;
  top: 2px;
  /* This needs to be specified for each button */
  width: 5.3em;
  background: url(red-dot-ie.gif?v=2.4.0.43) repeat-x bottom;
 }
</style>
<![endif]-->

Credits

I would just like to thank my ex-colleagues Ben and Jon for giving me the initial CSS that they had come up with. Without them it would have taken a lot longer to have got started.

 Update

After getting feedback from a friend I found the if you change the IE specific CSS to:

position: relative;
top: 2px;
overflow:visible;
background: url(red-dot-ie.gif?v=2.4.0.43)
repeat-x bottom;

then this removes the need to set the width for each button.