Frederik Vig - ASP.NET developer » EPiServer

EPiCode.Extensions and ambiguous reference

Frederik Vig — Wed, 28 Jul 2010 13:34:11 +0000

On new projects where I use EPiCode.Extensions I always register the namespace EPiCode.Extensions in my web.config – that way I can use the extension methods in my .aspx and .ascx files without needing to register EPiCode.Extensions in every file.

...
      >
        ...
         namespace="EPiCode.Extensions" />     
      >
    >
...

Sometimes this can cause some problems when you have other extension methods with the same method signature.

In this case it was with EPiServer Composer. To fix it I created a simple web.config file that I placed inside the Dropit\Plugin\Extension folder.

Here’s the code.

 version="1.0"?>
>
  >
      >
          >
               namespace="EPiCode.Extensions" />
          >
      >
  >
>

You can also use the location element of your main web.config file instead.

 path="dropit">
        >
            >
                >
                     namespace="EPiCode.Extensions" />
                >
            >
        >
    >

And that’s it! This will also work for all the sub directories as well.

On a side-note: I’ve been adding a lot of new extension methods lately to the project. I’ve listed them on the project’s wiki-page. Go check them out!Related Posts:

EPiServer Developer Resources

Frederik Vig — Thu, 27 May 2010 13:53:10 +0000

Last updated 05.07.2010

Report Center
Mobile
Bugs and where to find help
1. FAQ
Subscription
Categories
Import / Export
Content Channels
URL rewriting / friendly URL
TinyMCE / Editor
XForms
Globalization / localization
File system / VPP
Security, Membership and roles
Events
Oracle
SEO
Workflows
Errors, Logging and debugging
1. Logging
2. Errors and Error handling
3. Debugging
Configuration
Getting started guides and tutorials
Checklists
SDK and API documentation
Guides
EPiServer Framework
1. Online Center
  1. Gadgets
2. Dynamic Data Store
  1. Page Objects
  2. Dynamic Data Store
3. Initialization System
Modules
1. Modules and deployment center
2. Open Source Modules
3. EPiServer Composer
4. EPiServer Community
  1. Tech-notes
  2. More resources
5. EPiServer Commerce
6. EPiServer Relate+
7. EPiServer Mail
8. EPiServer CMO
9. EPiServer Connect for CRM
10. EPiServer Connect for SharePoint
Extending EPiServer
1. Plugins
2. Custom Property
3. Dynamic Content
4. Scheduled Jobs
EPiServer Enterprise
1. Load Balancing
2. Server Architecture
3. EPiServer Enterprise
4. Mirroring
5. Page Providers
Developing with EPiServer
1. Web Controls
2. Page Types and PageData
3. Properties / Dynamic Properties
4. Code architecture
5. Searching and filtering
Performance and caching
1. Caching
2. Performance
EPiServer Quick Publishing

Report Center

EPiServer’s Report Center comes with 6 predefined reports.

Not Published Pages
Published Pages
Changed Pages
Expired Pages
Simple Addresses
Link Status

For a short guide to using the existing reports see the guide: EPiServer CMS R2: Report Center.

To get started developing your own reports see: Create Your Own Reports in the Report Center and PageName vs UrlSegment Report.

Mobile

Bugs and where to find help

Often the first thing I do when I’m stuck on a problem is to go to EPiServer’s bug list and do a quick search to see if by problem might be reported in as a bug. Next up after that is Google, if I cannot find an answer there I try to post a clear description of my problem on the forum or create a support ticket.

FAQ

Not sure if it’s still in use but EPiServer World’s FAQ still contains some valuable information.

Subscription

EPiServer Subscription is used for sending email updates to users when new content is published.

These articles should at least give you a little information about EPiServer’s subscription functionality. For some sample code see the Public Templates under Pages and SubscriptionPage.aspx.

Import / Export

EPiServer has built in functionality for importing and exporting pages, files, categories, page types, and more. This creates an .episerverdata file that you can open up with a program like WinRar and see its content, which consists of a bunch of xml files.

Custom Export – Handle your “own” stream

Content Channels

Content Channels are used for pushing external data into EPiServer. This is for instance used by the SharePoint connector for pushing data into EPiServer from SharePoint.

For a nice introduction see: Pushing Data into EPiServer CMS 5 via Content Channels, there is also the video: Content Channel and Custom Page Store in EPiServer CMS 5.

URL rewriting / friendly URL

Both for users and search engines it helps to use friendly urls. Since EPiServer’s URL rewriter is provider based, it is easy to replace it with your own implementation.

Below are a couple of resources for changing the built in functionality of EPiServer’s URL rewriter. I recommend using Reflector to learn more about the inner workings of the URL rewriter (in EPiServer.dll and the EPiServer.Web namespace).

TinyMCE / Editor

With the rich text editor we want to add custom styles to the content and add new functionality and plugins, below are a couple of links that should help you with this.

The default editor for EPiServer CMS 6 is TinyMCE, if you upgrade from EPiServer CMS 5 or use EPiServer CMS 5, EPiServer’s built in editor is used. You can change which editor you wish to use in your web.config file, see: XHTML Editor – PropertyXHTMLString and PropertyLongString for more information.

XForms

EPiServer XForm is used for creating user forms. EPiServer uses an editor for letting the editors of the site build the forms. As developers we can easily extend and attach our self to various events that get triggered when the forms is sent (as an email, stored in the database or both).

A trick to note when using the XForm editor is that ctrl + shift + c and ctrl + shift + v copies/pastes the markup generated by the XForm editor, allowing you to easily change it without needing to attach yourself to various events and change the markup there.

For some sample code on rendering the XForm on your site see the Public Templates and XForm.ascx and the XForm page type.

Globalization / localization

EPiServer has some powerful globalization and localization support, built on ASP.NET’s globalization and localization functionality. I recommend starting out with the Globalization tech-note. EPiServer uses xml files to store the language information inside the lang folder. When installing a new EPiServer site there are quite a few default language files that get installed with it, I recommend deleting all the files you do not use.

Also be sure to check out Manage Languages for keeping language files up to date and TranslateX for sending EPiServer CMS pages to/from a translation service.

File system / VPP

EPiServer uses Microsoft’s Virtual Path Provider for their file system. Each file has a version history and supports meta data properties for storing information like author, copyright and other information, see my post: EPiServer File Manager and File Summary for information on how to add more meta data properties.

There has also been developed a module for storing the files in the database instead of on a file share or on the web server.

Security, Membership and roles

EPiServer uses ASP.NET’s membership and role provider model for their membership and roles. By default these providers ship with EPiServer:

OracleMembershipProvider
WindowsMembershipProvider
SqlServerMembershipProvider
ActiveDirectoryMembershipProvider
MultiplexingMembershipProvider

MultiplexingMembershipProvider forwards requests to the Windows- and SqlServerMembershipProvider, allowing for creating and storing users and roles in EPiServer’s database and using the Windows users and roles (this is the mostly used provider).

Events

Oracle

EPiServer supports Oracle databases and even comes with sample configuration settings in their config files.

SEO

Here are a few blog posts and modules with tips on making EPiServer even more SEO friendly.

Workflows

EPiServer uses Windows Workflow Foundation for their Workflows and even ship with 4 workflows:

Sequential Approval
Parallel Approval
Request for feedback
Ready for translation

See Enabling the EPiServer CMS Workflows for information on how to activate them.

Errors, Logging and debugging

Logging

Errors and Error handling

Debugging

Configuration

EPiServer stores a lot of its configuration settings in various .config files. Below are a few resources that’ll help you navigate through most of what you can configure.

Overview of the default config files that come with EPiServer (containing both ASP.NET and EPiServer settings).

web.config – The main configuration file for the application. Contains configuration for the ASP.NET API and some parts of the EPiServer CMS API.
episerver.config – The main configuration file for the EPiServer CMS API. Contains the basic settings for the EPiServer CMS site (or sites – in an enterprise installation).
episerverFramework.config – Contains mapping information describing which host addresses leads to a particular EPiServer CMS site.
connectionStrings.config – Contains a list of database connection strings

There are two further configuration files located in the application’s root folder. These two configuration files are separate and not related to the files listed above or each other.

episerverLog.config – Contains the log4net settings for the application, please see the log4net homepage for full information on configuration options.
fileSummary.config – An XForm defining the meta data properties attached to files that are uploaded to EPiServer CMS.

Getting started guides and tutorials

Checklists

Checklist for deploying EPiServer sites

SDK and API documentation

Guides

EPiServer Framework

EPiServer Framework consists of:

EPiServer OnlineCenter
Dynamic Data Store
Initialization System

For a good introduction see: Introducing EPiServer Framework.

Online Center

Gadgets

Dynamic Data Store

The Dynamic Data Store is a new feature that came with EPiServer CMS 6 and is essentially a place to store data that might not be best stored in a page property. XForms for instance are stored in the Dynamic Data Store.

Page Objects

Page Objects are .Net objects and collections that are associated with an EPiServer CMS page.

Dynamic Data Store

There are two things you need to read to understand most of the Dynamic Data Store. First the tech-note: Dynamic Data Store, and second the examples referred to in the tech-note: Dynamic Data Store Examples.

More resources

Initialization System

Modules

This section contains how to create module packages for the deployment center, open source modules, and other EPiServer modules.

Modules and deployment center

The deployment center allows us to easily install new packages on existing sites. A package is a zip file with the necessary files that the modules needs along with configuration settings that need to be added to the various configuration files.

Open Source Modules

Most of the open source modules out there are hosted on either EPiCode or CodePlex. Here is a list of the various open source modules that I know about.

Templates

Gadgets

Page Providers

Virtual Page Providers

Google Analytics and SEO

Dynamic Content

Images, Image galleries and slideshows

Google Map

Properties

Language, Globalization and Localization

Reports

Generating Excel reports

Debugging and diagnostics

Frameworks

Performance and caching

RSS and feeds

Edit mode enhancements

Blog

CloudCuckoo for EPiServer

Various modules

Enhancements for editors

Rich Text Editor enhancements

EPiServer Composer

EPiServer’s Composer module is used to add extra functionality to EPiServer CMS pages, allowing editors to drag and drop functionality on predefined placeholders.

EPiServer Community

EPiServer Community is a framework for building online communities and consists of modules for user management, video galleries, chat, blogs etc.

The EPiServer Community SDK has a great howto section that covers a lot of the topics you as a developer will come across when working with EPiServer Community.

Joel Abrahamsson has also written a great series on creating new modules for EPiServer Community:

Tech-notes

More resources

EPiServer Commerce

Before trying to install EPiServer Commerce read the release notes and the section “Known Limitations”.

EPiServer Relate+

EPiServer Relate+ consists of a set of templates that builds on EPiServer Community and EPiServer CMS, and gets you started with a sample site.

EPiServer Mail

EPiServer Mail is used for sending emails and newsletters and is used by EPiServer Community and EPiServer Relate+.

EPiServer CMO

EPiServer CMO is used for monitoring and optimizing pages on your website by learning about your users’ behavior and helping your editors easily create A/B tests.

EPiServer Connect for CRM

EPiServer Connect for SharePoint

Extending EPiServer

One of EPiServer’s biggest strengths in my humble opinion is how easy EPiServer is to extend. Take a look at this picture by Deane Barker for a great overview of what is possible.

Plugins

Custom Property

Dynamic Content

Scheduled Jobs

EPiServer Enterprise

Load Balancing

Server Architecture

Server Architecture Options for EPiServer

EPiServer Enterprise

Mirroring

Page Providers

Developing with EPiServer

Web Controls

Page Types and PageData

Properties / Dynamic Properties

Code architecture

Searching and filtering

Performance and caching

EPiServer has some great performance and caching out of the box (usually 90-95% of pages are served from the cache!). Below are some resources for improving it even more. For client side performance I recommend checking out YSlow as well.

Caching

Performance

EPiServer Quick Publishing

Related Posts:

EPiServer Custom Property with Custom Settings

Frederik Vig — Fri, 14 May 2010 20:44:07 +0000

I was brushing up on custom properties and came across Allan Thræn’s post Custom Property: Category Drop Down. The code is simple and works great, but one thing I didn’t like is that you need to give the property the same name as the root category that you use to populate the drop down.

In EPiServer CMS 6 we now have the ability to add settings to the properties. Linus Ekström wrote a great post on how to use the new settings functionality: Settings for properties. After reading both Allan’s and Linus’ post I decided to give the EPiServer administrator the ability to choose which category should be the root category in the settings tab of the property.

Custom Property

using System;
using EPiServer.Core.PropertySettings;
using EPiServer.PlugIn;
 
namespace EPiServer.Templates.Properties
{
    [Serializable]
    [PageDefinitionTypePlugIn]
    [PropertySettings(typeof(CategoryDropDownSettings), true)]
    public class CategoryDropDown : EPiServer.Core.PropertyString
    {
 
        public override EPiServer.Core.IPropertyControl CreatePropertyControl()
        {
            return new CategoryDropDownControl();
        }
    }
}

The code is almost identical to Allan’s except for the PropertySettings attribute.

using System.Web.UI.WebControls;
using EPiServer.DataAbstraction;
 
namespace EPiServer.Templates.Properties
{
    public class CategoryDropDownControl : EPiServer.Web.PropertyControls.PropertyTextBoxControlBase
    {
 
        public override bool SupportsOnPageEdit
        {
            get
            {
                return false;
            }
        }
 
        protected DropDownList ddl;
 
        public override void CreateEditControls()
        {
            ddl = new DropDownList();
            CategoryDropDownSettings settings = (CategoryDropDownSettings)base.PropertyData.GetSetting(typeof(CategoryDropDownSettings));
 
            Category main_c = Category.Find(settings.RootCategory);
            ddl.Items.Add(new ListItem("", ""));
            foreach (Category c in main_c.Categories)
            {
                ListItem li = new ListItem(c.LocalizedDescription, c.Name);
                li.Selected = (((string)CategoryDropDown.Value) == c.Name);
                ddl.Items.Add(li);
            }
 
            this.ApplyControlAttributes(ddl);
            Controls.Add(ddl);
        }
 
        public override void ApplyEditChanges()
        {
            SetValue(ddl.SelectedValue);
        }
 
        public CategoryDropDown CategoryDropDown
        {
            get
            {
                return PropertyData as CategoryDropDown;
            }
        }
    }
}

Only difference to Allan’s code here is in the CreateEditControls method.

...
CategoryDropDownSettings settings = (CategoryDropDownSettings)base.PropertyData.GetSetting(typeof(CategoryDropDownSettings));
 
Category main_c = Category.Find(settings.RootCategory);
...

Custom Settings

using EPiServer.Core.PropertySettings;
 
namespace EPiServer.Templates.Properties
{
    [PropertySettingsUI(AdminControl = typeof(CategoryDropDownSettingsUI))]
    public class CategoryDropDownSettings : PropertySettingsBase
    {
        public int RootCategory { get; set; }
 
        public override IPropertySettings GetDefaultValues()
        {
            return new CategoryDropDownSettings { RootCategory = 0 };
        }
    }
}

I’m setting the default rootCategory to be 0 (root).

using System.Linq;
using System.Web.UI.WebControls;
using EPiServer.Core;
using EPiServer.Core.PropertySettings;
using EPiServer.Web.WebControls;
 
namespace EPiServer.Templates.Properties
{
    public class CategoryDropDownSettingsUI : PropertySettingsControlBase
    {
        private InputCategoryTree _categoryTree;
 
        protected override void CreateChildControls()
        {
 
            base.CreateChildControls();
 
            _categoryTree = new InputCategoryTree {ID = "CategoryTree"};
 
            Label label = new Label { Text = "Root Category", AssociatedControlID = "CategoryTree" };
 
            Controls.Add(label);
 
            Controls.Add(_categoryTree);
 
        }
 
        public override void LoadSettingsUI(IPropertySettings propertySettings)
        {
 
            EnsureChildControls();
 
            _categoryTree.SelectedCategories = new CategoryList(new[] {((CategoryDropDownSettings)propertySettings).RootCategory});
        }
 
        public override void UpdateSettings(IPropertySettings propertySettings)
        {
 
            EnsureChildControls();
 
            // We only want the first selected category
            ((CategoryDropDownSettings)propertySettings).RootCategory = int.Parse(_categoryTree.SelectedCategories.ElementAt(0).ToString());
        }
    }
}

When we add a new property we now have the option, under custom settings, to choose the root category for our drop down.

Which gives our editors these options.

Related Posts:

Creating a simple image gallery with EPiServer

Frederik Vig — Sat, 03 Apr 2010 12:23:45 +0000

If you have visited sites like Smashing Magazine chances are high that you’ve seen articles with titles like “40 most used jQuery plugins”, or something similar to that. I find articles like that to be great for inspiration. You usually have a section for galleries/slideshows/carousels etc, I thought I’d implement one of those plugins in EPiServer, just to show you have simple it is.

jQuery GalleryView

GalleryView is a jQuery plugin for displaying a gallery of images. The plugin is easy to use and setup, simply download the files and include them in your project.

Dynamic Content

We’re going to create a dynamic content plugin that our editors can use to add a gallery to a page. Start by creating a new class and give it the name Gallery.cs. Make sure it implements the IDynamicContent interface.

I’m using the custom property Folder Browser Property from EPiCode to let the editor choose a root folder for the images. I’ve also added a user control for displaying the result to the users of the site.

The complete class looks like this.

using EPiServer.Core;
using EPiServer.DynamicContent;
using Meridium.FolderBrowserProperty.Web.UI.PropertyControls;
 
namespace EPiServer.Templates.Public.Plugins
{
    public class Gallery : IDynamicContent
    {
        protected PropertyFolderBrowser MediaFolder; 
 
        public Gallery()
        {
            MediaFolder = new PropertyFolderBrowser {Name = "Media folder"};
        }
 
        public System.Web.UI.Control GetControl(PageBase hostPage)
        {
            var gallery = hostPage.LoadControl("~/Templates/Public/Units/Gallery.ascx") as Units.Gallery;
 
            if (gallery == null)
            {
                return null;
            }
 
            gallery.Root = this.State;
 
            return gallery;
        }
 
        public PropertyDataCollection Properties
        {
            get
            {
                return new PropertyDataCollection {MediaFolder};
            }
        }
 
        public string Render(PageBase hostPage)
        {
            return string.Empty;
        }
 
        public bool RendersWithControl
        {
            get { return true; }
        }
 
        public string State
        {
            get
            {
                return MediaFolder.ToString();
            }
            set
            {
                MediaFolder.ParseToSelf(value);
            }
        }
    }
}

After you register it in episerver.config (web.config for CMS 5), you’ll be able to choose it in your sites WYSIWYG-editor.

>
    >
      ...
       description="Gallery" name="Gallery" type="EPiServer.Templates.Public.Plugins.Gallery, EPiServer.Templates.Public" />
    >
>

Gallery View Mode

The user control that displays the actual gallery to the users of the site.

<%@ Control Language="C#" AutoEventWireup="false" CodeBehind="Gallery.ascx.cs" Inherits="EPiServer.Templates.Public.Units.Gallery" %>
<link href="/galleryview-2.1.1/galleryview.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">script>
<script src="/galleryview-2.1.1/jquery.easing.1.3.js" type="text/javascript">script>
<script src="/galleryview-2.1.1/jquery.timers-1.2.js" type="text/javascript">script>
<script src="/galleryview-2.1.1/jquery.galleryview-2.1.1.js" type="text/javascript">script>
 
<asp:Repeater runat="server" ID="rptGallery">
    <HeaderTemplate>
        <ul class="gallery">
    HeaderTemplate>
    <ItemTemplate>
    <%# SetImage(Container.DataItem) %>
 
        <li><img src="<%# Image.VirtualPath %>" alt="<%# Image.Summary.Title %>" />
            <div class="panel-overlay">
				<h3><a href="<%= Image.Summary.Dictionary["Website"] %>"><%= Image.Summary.Author %>a>h3>
				<p><%# Image.Summary.Dictionary["Description"] %>
			div>
        li>
    ItemTemplate>
    <FooterTemplate>
        ul>
    FooterTemplate>
asp:Repeater>
 
<script type="text/javascript">
    $('.gallery').galleryView({
        panel_width: 800,
        panel_height: 300,
        frame_width: 100,
        frame_height: 100
    });
script>

using System;
using EPiServer.Web.Hosting;
 
namespace EPiServer.Templates.Public.Units
{
    public partial class Gallery : UserControlBase
    {
        public string Root
        {
            get; set;
        }
 
        protected UnifiedFile Image
        {
            get; private set;
        }
 
        protected string SetImage(object dataItem)
        {
            this.Image = dataItem as UnifiedFile;
 
            return string.Empty;
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);
 
            if (string.IsNullOrEmpty(this.Root))
            {
                return;
            }
 
            var rootFolder = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetDirectory(this.Root) as UnifiedDirectory;
 
            if (rootFolder == null)
            {
                return;
            }
 
            this.rptGallery.DataSource = rootFolder.Files;
            this.rptGallery.DataBind();
        }
    }
}

Result

Note on Folder Browser Property

I’ve added an EPiServer CMS 6 version of Folder Browser Property to EPiCode.

Usage

SVN Checkout https://www.coderesort.com/svn/epicode/Meridium.FolderBrowserProperty/6.x/ (requires registration on EPiCode)
Open up the project in Visual Studio and build
Copy Meridium.FolderBrowserProperty.dll to your sites bin folder (remember to add a reference in your Visual Studio project as well)
Create the folders “\Meridium\FolderBrowserProperty\Dialogs”, and copy the file FolderBrowserDialog.aspx into it

Hope this helps.Related Posts:

EPiServer File Manager and File Summary

Frederik Vig — Fri, 02 Apr 2010 15:13:12 +0000

One hidden little feature that is nice to know about is the filesummary.config file. When you edit a file in EPiServer’s File Manager, you can edit the data for that file (simply right-click on the file and choose Edit File Summary).

Which gives us this form.

This is the standard form that comes with EPiServer.

FileSummary.config

We can easily change the form by editing FileSummary.config. If we open it in a source code editor, the code looks something like this.

 xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  >
    >
       />
       />
       />
       />
       />
    >
  >
   id="id_matrix" border="0">
    >
       class="EP-tableCaptionCell">
         for="id_field2" id="id_field1" style="margin-bottom: 10px;">Author>
      >
       valign="top">
         ref="Author" value="" id="id_field2" size="40" class="episize240" />
      >
    >
    >
       class="EP-tableCaptionCell">
         for="id_field13" id="id_field6">Publisher>
      >
       valign="top">
         ref="Publisher" value="" id="id_field13" size="-1" class="episize240" />
      >
    >
    >
       class="EP-tableCaptionCell">
         />
         for="id_field12" id="id_field5">Type of document>
      >
       valign="top">
         appearance="full" ref="DocumentType" id="id_field12">
          >
            >Whitepaper>
            >Whitepaper>
          >
          >
            >Technote>
            >Technote>
          >
          >
            >Manual>
            >Manual>
          >
        >
      >
    >
    >
       class="EP-tableCaptionCell">
         />
         for="id_field121" id="id_field5">Category>
      >
       valign="top">
         appearance="full" ref="Category" id="id_field121">
          >
            >Product1>
            >Product1>
          >
          >
            >Product2>
            >Product2>
          >
          >
            >Product3>
            >Product3>
          >
        >
      >
    >
    >
       class="EP-tableCaptionCell">
         for="id_field14">Description>
      >
       valign="top">
         id="id_field8">
           cols="37" rows="6" ref="Description" value="" id="id_field14" size="-1" />
        >
      >
    >
  >
>

A combination of XML , HTML and XForm for storing the data. To add a new property we simply need to update the markup a little. Lets start by adding a new element inside model and instance.

 xmlns:xforms="http://www.w3.org/2002/xforms" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
  >
    >
       />
       />
       />
       />
       />
       />
    >
  >
...

Notice that I’ve added the tag. We also need to insert a new row in the table with a XForm input element.

>
   class="EP-tableCaptionCell">
	 for="id_field31" id="id_field30" style="margin-bottom: 10px;">Website>
  >
   valign="top">
	 ref="Website" value="" id="id_field31" size="40" class="episize240" />
  >
>

If we save and go back to Edit Mode and the File Manager, the form should look something like this.

For more information on XForm see: Developing with XForms.

Accessing the data

We can now access the property data by creating a new UnifiedFile instance of our file.

var file = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetFile("/Global/Images/Portrait Employees/Robert.jpg") as UnifiedFile;

When we type file. in Visual Strudio, we see that we have access to a few public properties. The one we’re interested in is the Summary property.

The Summary property exposes a IUnifiedSummary type, which gives us access to properties like Author, Comments, Category etc, and more importantly a Dictionary for accessing other properties we create (like Website).

file.Summary.Dictionary["Website"]

Putting it all together

Here is a simple example that shows a picture with a caption.

<div class="featured">
	<img src="<%= Image.VirtualPath %>" alt="<%= Image.Summary.Title %>" />
	<p>
		<a href="<%= Image.Summary.Dictionary["Website"] %>"><%= Image.Summary.Author %>a>
		<em><%= Image.Summary.Dictionary["Description"]%>em>
	p>
div>

public UnifiedFile Image
{
	get; private set;
}
 
protected override void OnLoad(System.EventArgs e)
{
	base.OnLoad(e);
 
	this.Image = System.Web.Hosting.HostingEnvironment.VirtualPathProvider.GetFile("/Global/Images/Portrait Employees/Robert.jpg") as UnifiedFile;
}

A little CSS for making it look pretty.

.featured p
{
	background-color: rgba(0,0,0,.7);
	display: block;
	position: absolute;
	width: 100%;
	bottom: 0;
	left: 0;
	font-family: Georgia, serif;
	font-size: 1em;
	font-weight: normal;
	line-height: 1.3em;
	color: #ccc;
	margin-bottom: 0;
}
.featured
{
	width: 40%;
	overflow: hidden;
	position: relative;
}
 
.featured p a
{
	display: block;
	padding: 2px 10px 0 10px;
	font-weight: normal;
	font-style: italic;
	color: #fff;
}
.featured p em
{
	display: block;
	padding: 0 10px 2px 10px;
	font-style: normal;
	color: #e3c887;
}

And here’s the result!

Related Posts:

Updated all EPiServer posts for EPiServer CMS 6

Frederik Vig — Sun, 28 Mar 2010 17:20:16 +0000

I’ve done a little spring cleaning, updating all EPiServer posts to now use EPiServer CMS 6, and making sure the code still works. I’ve also added the code for ShareIt and SlideShare Dynamic Content to EPiCode, and updated EPiCode.Extensions. They’re all now built against EPiServer CMS 6.

My current projects on EPiCode

The Create an EPiServer site from scratch series is also updated for EPiServer CMS 6.

If you find any errors or broken links, please post a comment, or email me directly: frederikvig@hotmail.com. Thanks!Related Posts:

Adding different CSS classes when using the EPiServer PageTree control

Frederik Vig — Sat, 27 Feb 2010 23:26:49 +0000

Another little quick tip. I was browsing the EPiServer World forum and came across a common question.

by David Green

I am using the EpiServer:PageTree control to generate a nested
list in the format below.

However I am also using a dropdown menu system called UDM which requires that the class and id “udm” are on the first
tag.

The container object of the PageTree controller exposes the Indent property that we can use for this. Below is a simple example of how to add a CSS class to the first ul in your list (code is based on SubMenu.ascx from the EPiServer Public Templates package).

<%@ Control Language="C#" EnableViewState="false" AutoEventWireup="False" CodeBehind="SubMenu.ascx.cs" Inherits="EPiServer.Templates.Public.Units.Static.SubMenu" %>
<EPiServer:PageTree ShowRootPage="false" runat="server" id="Menu">
    <IndentTemplate>
        <ul <%# AddCssClassToFirstLevel(Container.Indent, "udm") %>>
    IndentTemplate>
    <ItemHeaderTemplate>
        <li>
    ItemHeaderTemplate>
    <ItemTemplate>
        <EPiServer:Property PropertyName="PageLink" runat="server" />
    ItemTemplate>
    <SelectedItemTemplate>
	<EPiServer:Property CssClass="selected" PropertyName="PageName" runat="server" />
    SelectedItemTemplate>
    <ItemFooterTemplate>
        li>
    ItemFooterTemplate>
    <UnindentTemplate>
        ul>
    UnindentTemplate>
EPiServer:PageTree>

using System;
using EPiServer;
using EPiServer.Web.WebControls;
 
namespace EPiServer.Templates.Public.Units.Static
{
    public partial class SubMenu : UserControlBase
    {
        private MenuList _menuList;
 
        /// 
        /// Gets or sets the data source for this control
        /// 
        public MenuList MenuList
        {
            get { return _menuList; }
            set { _menuList = value; }
        }
 
        protected override void OnLoad(System.EventArgs e)
        {
            base.OnLoad(e);
 
            if (MenuList == null)
            {
                return;
            }
            Menu.PageLink = MenuList.OpenTopPage;
            Menu.DataBind();
        }
 
        protected string AddCssClassToFirstLevel(int level, string cssClassName)
        {
            if (level == 1)
            {
                return string.Format("class=\"{0}\"", cssClassName);
            }
 
            return string.Empty;
        }
    }
}

We can easily add more complex logic. We also have access to the HasChildren property, which tells us if the active page has any children.

Hope this helps.Related Posts:

Getting the Page and EPiServer CurrentPage object from HttpContext

Frederik Vig — Sat, 20 Feb 2010 10:25:37 +0000

Just a little quick tip when needing to use either the Page object or the EPiServer CurrentPage object from a class file. HttpContext.Current will give you access to the current request, what we can do is cast HttpContext.Current.Handler (since Page implements the IHttpHandler interface) to System.Web.UI.Page.

var page = HttpContext.Current.Handler as System.Web.UI.Page;
 
if (page != null)
{
    // do something with the page object
}

We can take this a step further and cast it to EPiServer.PageBase which gives us access to the CurrentPage object.

private static PageData CurrentPage
{
    get
    {
	var page = HttpContext.Current.Handler as EPiServer.PageBase;
 
	if (page == null)
	{
	    return null;
	}
 
	return page.CurrentPage;
    }
}

Related Posts:

Visual Studio 2010 EPiServer Snippets

Frederik Vig — Thu, 11 Feb 2010 16:38:06 +0000

I finally got my hands on a copy of Visual Studio 2010 RC1! After playing around a bit, I stumbled across the new snippet functionality in Visual Studio 2010. You can now use snippets in the markup files as well (in previous versions you could only use the snippet functionality in code files like class/interfaces/code-behind files etc). This is very cool, and Microsoft has even included a few snippets for their ASP.NET controls and for HTML elements like: a, table, img, div etc. Quite a time saver!

To test the snippets out, simply type the shortcut (eg. ‘a’ or ‘table’) and press tab.

This is a simple, but very cool feature. Imaging all the typing you can get rid off!

Creating your own snippets

In Visual Studio 2010, under the Tools menu, you’ll find the Code Snippets Manager (ctrl+k, ctrl+b).

Here you can add new folders that contain your custom snippets, or check out the other snippets added by Microsoft. You’ll also see the path to the snippets folder (C:\Program Files (x86)\Microsoft Visual Studio 10.0\Web\Snippets\HTML\1033\ in my case). If you open up that folder in Windows Explorer you should see at least two folders there, ASP.NET and HTML. Inside both of these folders you’ll find the snippets for the ASP.NET web controls and for HTML elements. We can open up one of the files and take a look at the code.

 Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  >
    >image>
    >Microsoft Corporation>
    >image>
    >
      >imagebutton>
       Value="image">asp:image>
       Value="imagebutton">asp:imagebutton>
    >
    >Markup snippet for a control that contains an image>
    >
      >Expansion>
    >
  >
  >
    >
      >
        >imageurl>
        >imageurl>
        >imageurl>
      >
    >
     Language="html">$end$]]>>
  >
>

Very easy and readable XML markup, that we easily can tweak to our needs. Say we’re working on a project where 90% of the tables we create should have a class of “products”. Lets create a snippet for this, so that we don’t have to type the same thing every time.

Create a new snippet called table-products.snippet, open it up in your favorite code editor and add this code.

 Format="1.1.0" xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
  >
    >table>
    >Frederik Vig>
    >tablep>
    >Markup snippet for a table with class products>
    >
      >Expansion>
      >SurroundsWith>
    >
  >
  >
    >
      >
        >cellspacing>
        >cellspacing>
        >0>
      >
    >
     Language="html">
    
        $selected$$end$
    
]]>>
  >
>

I’ve saved table-products.snippet directly in the HTML snippet folder (C:\Program Files (x86)\Microsoft Visual Studio 10.0\Web\Snippets\HTML\1033\HTML in my case), but you can save it anywhere, just remember to add the snippet folder with the Code Snippets Manager in Visual Studio.

We can now test the snippet by typing tablep and pressing tab.

Simple example, I know, but you get the idea!.

EPiServer

Naturally, one of the first things I did was add the EPiServer Property web control to the snippet manager . This turned out to be very easy! So I continued on adding snippets for the other EPiServer web controls as well. Here is the list of snippets with their shortcut.

EPiServer Calendar – shortcut: ec
EPiServer CategoryDataSource – shortcut: ecd
EPiServer FileSystemDataSource – shortcut: efsd
EPiServer LanguageDataSource – shortcut: eld
EPiServer MembershipUserDataSource – shortcut: emud
EPiServer MenuList – shortcut: eml
EPiServer NewsList – shortcut: enl
EPiServer OnPageEditControl – shortcut: eopec
EPiServer PageDataSource – shortcut: epd
EPiServer PageDefinitionDataSource – shortcut: epdd
EPiServer PageDefinitionTypeDataSource – shortcut: epdtd
EPiServer PageList – shortcut: epl
EPiServer PageListData – shortcut: epld
EPiServer PageTree – shortcut: ept
EPiServer PageTreeData – shortcut: eptd
EPiServer PageVersionDataSource – shortcut: epvd
EPiServer Property – shortcut: ep
EPiServer PropertyCriteriaControl – shortcut: epcc
EPiServer SearchDataSource – shortcut: esd
EPiServer SoftLinkDataSource – shortcut: esld
EPiServer SubscriptionDataSource – shortcut: esds
EPiServer TabDefinitionDataSource – shortcut: etdd
EPiServer ThemeImage – shortcut: eti
EPiServer Translate – shortcut: et

Download the snippets

Related Posts:

EPiServer code walkthrough #1 – 404 handler

Frederik Vig — Fri, 29 Jan 2010 15:10:11 +0000

This is the first post in a new series called “EPiServer code walkthrough”. What I’ll do is go through one new EPiServer module in each post. Writing a little about what it does, learn by reading its code, and hopefully contributing a little back to the project, if I see any bugs or harmful/unnecessary code that is .

I’m a firm believer that reading code helps you become a better developer. There are lots of modules even I just recently came across, that I didn’t know existed just a few weeks back. I think I’m not the only one, especially since they are spread around on various blogs, CodePlex, EPiCode and other places. They all contain valuable code that we as EPiServer developers should read.

I’m starting with a module I personally have not used much before, but that I know a lot of people have used in their projects: the custom 404 handler.

From the project wiki page

This module has a more advanced url redirect feature than the built-in shortcut url feature in EPiServer. It handles extensions and querystring parameters too. If you have a lot of 404 errors in your logs, you can use this to redirect the user to the correct page. Especially useful if you move templates or pages around, or have just installed EPiServer and have a lot of old urls that is no longer available.

404 handlers wiki page explains in detail what you need to do to install the module, so I’m not going to repeat it here. Instead we’ll take a look at the code.

Start by doing a SVN checkout of the source code (the svn url is https://www.coderesort.com/svn/epicode/BVNetwork.404Handler/5.x/).

When opening up the BVNetwork.404Handler folder you’ll see a readme.txt file explaining the purpose of the module, installation, configuration etc. This is something I like! Not everyone reads the wiki page, and we as developers are especially lazy when it comes to reading documentation. Having a readme.txt with everything you need makes this so much easier, and gives the module author less support questions to answer. When using a new module, always make sure to read the documentation before asking the author questions. Saves both parties time .

Lets open up BVNetwork.404Handler.csproj in Visual Studio.

As you can see the project is structured pretty nice, with good separations between the different parts. Very good that the project uses languages files, and that they’ve included them for five different languages. Not all modules use the language files, and if they do, they seldom have any more than one update-to-date English language file. Kudos for this.

What I don’t like is the missing fnf_logo.gif image file in the Images folder. A quick search in Visual Studio shows that this file is no longer in use, and should therefore be removed from the project. A missing image file is not the end of the world, and I know people make mistakes/forget to commit all their files, but this can be very annoying and even lead to a lot of work for other developers using your code or taking over a project.

Always make sure that your project builds on other computers than your own. I recommend manually setting up the project on preferably a new computer to see that everything works as expected, you can also use the same computer, but make sure to do the normal process a new developer would use when setting up the project (new checkout etc). Especially on larger projects that have quite a few things to setup you should do this. You’ll also receive some valuable feedback if your setup process is to complex (again on larger projects this happens quite frequently). Another thing you should use is a build server. There are quite a few out there, I know CodeResort just added Bitten as their build server for CodeResort projects. In a nutshell what a build server does is make sure you’ve included all the files and resources needed to build your project, run various tests (if you have any), deploy your files, create reports, notify team members if their build fails, and a bunch of other stuff, automatically for you. I’ll try to write a blog post up with more information on build and continuous integration servers.

Lets get back to the Visual Studio and the project! One of the things you should start out with is actually making sure the project builds after doing a checkout. So, either press ctrl + shift + b or go to Build -> Build BVNetwork.404Handler. You should have a successful build.

If we take a look through the code we see that most of the code is well documented and follows a nice naming convention making it easy to know what the purpose of the class is (CustomRedirectHandler.cs, CustomRedirectCollection.cs, Custom404Handler.cs etc). But we also see a few minor things we can clean up: unused using statements, commented out code, unused field variables etc. These are minor, but still important things to get rid of. Always strive for a clean code base, commented out code is something you should never commit into a repository, the whole reason for having a source control system is so that you can look at previous changesets and their code, there is no reason to keep the commented out code there, it will only be forgotten by the developer who commented out the code, and the other developers don’t know what to do with it, and will most likely just let it be. When I come across this I show no mercy and just delete it!

You’ll also see a few System.Diagnostics.Debug.WriteLine that are commented out. The project now uses Log4Net to log errors and warnings, System.Diagnostics.Debug.WriteLine is legacy code that we can safely remove. Another thing that I prefer is using string.Empty(); instead of “”, I’ve not updated the code because I feel this is more a personal preference. Same thing when it comes to over-documenting-code, like in this example.

/// 
/// The refering url
/// 
public static string GetReferer(System.Web.UI.Page page)
{
    string referer = page.Request.ServerVariables["HTTP_REFERER"];
    if (referer != null)
    {
	// Strip away host name in front, if local redirect
	string hostUrl = EPiServer.Configuration.Settings.Instance.SiteUrl.ToString();
	if (referer.StartsWith(hostUrl))
	    referer = referer.Remove(0, hostUrl.Length);
    }
    else
	referer = ""; // Can't have null
    return referer;
}

The document header can safely be removed since the method name does a good job at describing what the purpose of the method is. I’ve not removed the document header, since again this is my personal preference.

A thing I just noticed is that this is actually a Visual Studio class project, and not a Web Application project. I can only guess, but this is probably a project that got upgraded from Visual Studio 2003, I’ve previously had some problem upgrading a project from Visual Studio 2003 to Visual Studio 2008. The conversion usually goes okay (just an update to the csproj file mostly), but the ProjectTypeGuids doesn’t always get added. This is easy to fix, open up BVNetwork.404Handler.csproj in notepad or another source editor, and add this line.

>{349c5851-65df-11da-9384-00065b846f21};{fae04ec0-301f-11d3-bf4b-00c04f79efbc}>

Save, and open up the project in Visual Studio. You should now see a slightly different icon at the top of the solution explorer window.

This will allow us to add a designer file to default.aspx from the admin folder. To do this simply right-click the file in solution explorer and choose “Convert to Web Application”. We can now delete the “Web Form Designer generated code”-region.

After all these updates its very important to make sure that the project still builds and that everything functions as expected by testing it.

What I liked the most with this project is how it uses logging. I’m personally very bad at using logging, and know that not all projects use logging as much as they should. Kudos to the authors for this!

I hope you’ve learned a few new things while reading this code, and be sure to try out the 404 handler! For SEO and user experience purposes it is crucial that the users have a smooth transition. They shouldn’t even notice the change when switching to EPiServer from another CMS (that uses different urls). A 404 (file not found) error message can also quickly become a major leak of traffic for your clients site.Related Posts:

Frederik Vig - ASP.NET developer » EPiServer

EPiCode.Extensions and ambiguous reference

EPiServer Developer Resources

Table of Contents

Report Center

Mobile

Bugs and where to find help

FAQ

Subscription

Categories

Import / Export

Content Channels

URL rewriting / friendly URL

TinyMCE / Editor

XForms

Globalization / localization

File system / VPP

Security, Membership and roles

Events

Oracle

SEO

Workflows

Errors, Logging and debugging

Logging

Errors and Error handling

Debugging

Configuration

Getting started guides and tutorials

Checklists

SDK and API documentation

Guides

EPiServer Framework

Online Center

Gadgets

Dynamic Data Store

Page Objects

Dynamic Data Store

More resources

Initialization System

Modules

Modules and deployment center

Open Source Modules

Templates

Gadgets

Page Providers

Virtual Page Providers

Google Analytics and SEO

Dynamic Content

Images, Image galleries and slideshows

Google Map

Properties

Language, Globalization and Localization

Reports

Debugging and diagnostics

Frameworks

Performance and caching

RSS and feeds

Edit mode enhancements

Blog

Various modules

Enhancements for editors

Rich Text Editor enhancements

EPiServer Composer

EPiServer Community

Tech-notes

More resources

EPiServer Commerce

EPiServer Relate+

EPiServer Mail

EPiServer CMO

EPiServer Connect for CRM

EPiServer Connect for SharePoint

Extending EPiServer

Plugins

Custom Property

Dynamic Content

Scheduled Jobs

EPiServer Enterprise

Load Balancing

Server Architecture