Blog posts by Joe Bianco

Building EPiServer Templates with MVC Razor Part 2: Block Templates

Wed, 17 Jul 2013 21:16:07 GMT

EPiServer 7 CMS provides full support for creating templates with MVC using the Razor and Web Forms view engines. Part 1 of this series describes how to create Page Templates. This post describes how to build Block Templates.

Prerequisites

This blog entry assumes you have completed “Building EPiServer Templates with MVC Razor - Part 1: Page Templates” and the prerequisites listed in that post.

Create the Block Type

Now we are going to create a Block Type to enable editors to create navigation blocks, place them on pages, and configure which pages to display within the block.

A Block Type is similar to a Page Type in that it defines properties for a content item. Like pages, blocks can be reused across pages, sites, and channels, but blocks are not addressable via an explicit URL in the browser.

Models > Blocks > Add > New Item… > Installed > Visual C# > EPiServer > Block Type > TopNavBlock.cs
Uncomment the Name property
Change property type and name to PageReference ParentPage
Update Display parameters - Name: Parent Page, Description: Select the parent of the pages you want to display

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;

namespace BasicMvcSite.Models.Blocks
{
    [ContentType(DisplayName = "TopNavBlock", GUID = "4cf7c1b5-3ae8-42a6-8fa1-078e3471bfb5", Description = "")]
    public class TopNavBlock : BlockData
    {
        [CultureSpecific]
        [Editable(true)]
        [Display(
            Name = "Parent Page",
            Description = "Select the parent of the pages you want to display.",
            GroupName = SystemTabNames.Content,
            Order = 1)]
        public virtual PageReference ParentPage { get; set; }
    }
}

Create the Model

Now we are going to create a Model to hold a collection of pages to render in the navigation. The Model is passed by the Controller to the View for rendering.

Models > Blocks > Add > Class… > TopNavViewModel.cs
Replace the contents of the TopNavViewModel class as in the code snippet below
Resolve PageData using EPiServer.Core

using EPiServer.Core;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace EPiServerMvcSite2.Models.Blocks
{
    public class TopNavViewModel
    {
        // The TopNavBlock
        public TopNavBlock TopNavBlock { get; private set; }

        // The children of the ParentPage specifed in the TopNavBlock 
        public IEnumerable<PageData> PageChildren { get; set; }

        // Constructor
        public TopNavViewModel(TopNavBlock topNavBlock, IEnumerable<PageData> pageChildren)
        {
            TopNavBlock = topNavBlock;
            PageChildren = pageChildren;
        }
    }
}

Create the Controller

Now we are going to create a Controller that will be invoked when blocks of the TopNavBlock Block Type are referenced. The controller gets the children of the page specified in the ParentPage property of the block. The Controller then populates the Model with this data and passes it to the View for rendering.

Controllers > Add > New Item… > Installed > Visual C# > EPiServer > Block Controller (MVC) > TopNavController.cs
Resolve TopNavBlock using <ProjectName>.Models.Blocks;
Replace the contents of the Index() method as in the snippet below

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using EPiServer;
using EPiServer.Core;
using EPiServer.Web;
using EPiServer.Web.Mvc;
using EPiServerMvcSite2.Models.Blocks;

namespace EPiServerMvcSite2.Controllers
{
    public class TopNavController : BlockController<TopNavBlock>
    {
        public override ActionResult Index(TopNavBlock currentBlock)
        {
            var pageChildren = Enumerable.Empty<PageData>();

            // Get the content repository
            IContentRepository contentRepository = EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<IContentRepository>();

            // Get the children of the page specified in the ParentPage property of the block
            if (!PageReference.IsNullOrEmpty(currentBlock.ParentPage))
            {
                pageChildren = contentRepository.GetChildren<PageData>(currentBlock.ParentPage);
            }

            return PartialView(new TopNavViewModel(currentBlock, pageChildren));
        }
    }
}

Create the View

Now we will create the view which renders the navigation menu with the pages in the Model.

Create a TopNav folder in Views
Views > TopNav > Add > New Item… > Installed > Visual C# > EPiServer > Block Partial View (MVC Razor) > Index.cshtml
Update the @model statement to <ProjectName>.Models.Blocks.TopNavViewModel
Replace contents of the <div></div> as in the snippet below
Build and run

@using EPiServer.Core
@using EPiServer.Web.Mvc.Html

@model EPiServerMvcSite2.Models.Blocks.TopNavViewModel  

<div>
@if (Model.PageChildren.Any()) {
    @* Render nav menu items *@
    <ul>
        @foreach (var page in Model.PageChildren) {
            <li>@Html.ContentLink(page)</li>
        }
    </ul>
}
</div>

Create the Top Navigation Block

Now that we have created the Block Type, Model, View, and Controller, we can create a Top Navigation block.

Build and run the project
Navigate to http://localhost:<Port>/EPiServer/CMS
Login with a Local Administrator account
Assets Pane > Blocks > Global Library > New Block - Name: Top Navigation, Block Type: TopNavBlock, Parent Page: Home
Publish the block

Create About and Contact Pages

Now we will create and publish the About and Contact pages as children of the Home page so we have something to render in the Top Navigation block.

Add a Content Area Property to the Page Type

Now we need to add a Content Area property to the Page Type so that the Top Navigation block can be dragged into it by editorial users. A Content Area is simply a property that contains the blocks that editorial users drag into it.

Add the following snippet to the StandardPage Page Type

// Define a Content Area to enable the editor to drop a navigation block into
public virtual ContentArea TopNavContentArea { get; set; }

Add a Section Override to the Standard View

Now we will put a section override block in the Standard View that injects the menu in to the appropriate place in the layout. A section override is analogous to an asp:Content control in web forms. In this case we will render the TopNavContent area in the TopNav section of the layout.

Add a section override to Views/Standard/Index.cshtml after the @model statement as in the snippet below

@using EPiServer.Core
@using EPiServer.Web.Mvc.Html

@model EPiServerMvcSite2.Models.Pages.StandardPage

@* Render the TopNavContentArea property in the TopNav section defined in the layout *@
@section TopNav {

    @Html.PropertyFor(m => m.TopNavContentArea)  

}


<div>
  @Html.PropertyFor(m => m.MainBody)
</div>

Add the Top Navigation Block to Desired Pages

Now we can add the Top Navigation block to the desired pages via the following steps.

Build and run the project
Navigate to http://localhost:<Port>/EPiServer/CMS
Open the Assets pane
Drag the Top Navigation block to the TopNavContentArea
Publish the page

Building EPiServer Templates with MVC Razor Part 1: Page Templates

Wed, 09 Jan 2013 17:51:07 GMT

EPiServer 7 CMS provides full support for creating templates with MVC using the Razor and Web Forms view engines. This is a step by step how-to guide to help you get started creating EPiServer Page Templates and Block Templates using MVC with the Razor view engine. Part 1 of this series describes how to create Page Templates and Part 2 describes how to build Block Templates.

Prerequisites

This blog entry assumes you have a basic understanding of EPiServer 7 CMS from a user and developer point of view and are familiar the Microsoft MVC Razor implementation. For more details on using EPiServer, see EPiServer WebHelp. For more details on Microsoft MVC, see the following articles:

To complete this example, you will need to install EPiServer 7 CMS, prerequisites, and a supported version of Visual Studio with the EPiServer 7 CMS Visual Studio Integration Extension as described in the documentation section of EPiServer World.

Create a New EPiServer Project

The first step is to create a new EPiServer web site project in Visual Studio using the EPiServer project template.

File > New Project… > Installed > Templates > Visual C# > EPiServer > EPiServer Web Site (MVC)

The EPiServer Deployment Center executes Windows PowerShell Scripts that perform the following:

Creates the Visual Studio project
Copies in the necessary EPiServer binaries
Sets up the configuration files
Creates the EPiServer content database
Sets up IIS Express to host the web site

Create the Standard Page Model / Page Type

Next, we need to create a Model which defines the properties and contains content for pages of the StandardPage Page Type. In EPiServer, a Page Type defines the properties for a specific type of page. In this case, the Page Type is assuming the role of the Model.

Models > Pages > Add > New Item... > Installed > Visual C# > EPiServer > Page Type > StandardPage.cs
Uncomment the MainBody property

using System;
using System.ComponentModel.DataAnnotations;
using EPiServer.Core;
using EPiServer.DataAbstraction;
using EPiServer.DataAnnotations;
using EPiServer.SpecializedProperties;

namespace EPiServerMvcSite1.Models.Pages
{
    [ContentType(DisplayName = "StandardPage", GUID = "36186065-ebac-404b-96b7-6db10849a98a", Description = "")]
    public class StandardPage : PageData
    {
        [CultureSpecific]
        [Editable(true)]
        [Display(
            Name = "Main body",
            Description = "The main body will be shown in the main content area of the page, using the XHTML-editor you can insert for example text, images and tables.",
            GroupName = SystemTabNames.Content,
            Order = 1)]
        public virtual XhtmlString MainBody { get; set; }
    }
}

Note that the class inherits from EPiServer.Core.PageData which is an object representation of the content. The ContentType class attribute registers the Page Type in EPiServer so no additional configuration is required for deployment. Properties are defined in code using the EPiServer property types in EPiServer.Core. The Display property attribute enables you to specify metadata for the property including the display name, sort order, and which tab the property appears in the EPiServer editorial interface.

Create the Standard Page Controller

The Controller receives the request for a page from the browser, retrieves the Model (content) for the requested page and passes the Model to the View via an action method for rendering to the browser. EPiServer invokes different controller classes (and different action methods within them) depending on the Page Type of the requested page and the incoming URL.

Controllers > Add > New Item… > Installed > Visual C# > EPiServer > Page Controller (MVC) > StandardContoller.cs
Resolve StandardPage using <ProjectName>.Models.Pages

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;
using EPiServer;
using EPiServer.Core;
using EPiServer.Framework.DataAnnotations;
using EPiServer.Web.Mvc;
using EPiServerMvcSite1.Models.Pages;

namespace EPiServerMvcSite1.Controllers
{
    public class StandardController : PageController<StandardPage>
    {
        public ActionResult Index(StandardPage currentPage)
        {
            /* Implementation of action. You can create your own view model class that you pass to the view or
             * you can pass the page type for simpler templates */

            return View(currentPage);
        }
    }
}

Note that PageController<StandardPage> instructs EPiServer to invoke this controller for pages of the StandardPage Page Type.

Create the Standard Page View

A View renders the content in the Model that is passed to it by the Controller.

Create a Standard folder in Views
Views > Standard > Add > New Item… > Installed > Visual C# > EPiServer > Page Partial View (MVC Razor) > Index.cshtml
Update the @model statement to: <ProjectName>.Models.Pages.StandardPage.

Note that the @model statement gives you strongly typed access to the Model.

Helper Methods

The Html.PropertyFor() helper method renders a property and is analogous to the EPiServer:Property control in Web Forms. EPiServer provides a number of helper methods for rendering content which are described in the EPiServer SDK.

Create the Home Page

Build & run the project
Navigate to http://localhost:<port>/EPiServer/CMS
Login with an account that is a local Administrator
Create the Home page using the StandardPage Page Type
Add text to the Main Body property
Publish and view the page

Wire Up the Sample Layout

A layout in MVC is analogous to a Master Page in web forms. A layout can contain Sections that are analogous to ContentPlaceHolders and a View can have Section Overrides that are analogous to Content controls.

Copy the Content folder(contains Site.css) from the supporting files to the root of project
Copy Views/Shared/_Layout.cshtml to Views/Shared
Copy Views/_ViewStart.cshtml to Views
Refresh the browser

_Layout.cshtml

@using EPiServer.Web.Mvc.Html
@using EPiServer.Core

<!DOCTYPE html>
<html lang="@Html.ViewContext.RequestContext.RouteData.Values["lang"]">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="generator" content="EPiServer CMS Falcon" />
    <meta name="description" content="" />
    <meta name="keywords" content=""/>
    <title>EPiServer MVC Razor Example</title>
    <link rel="stylesheet" href="@Href(Url.Content("~/Content/Site.css"))" media="all"/>
</head>
<body>
    <header>
        <h1>EPiServer MVC Razor Example</h1>
        <section>
        </section>
        <nav id="topnavigation">
            @RenderSection("TopNav", required:false)
        </nav>
    </header>
    <section id="main">
        <nav id="subnavigation">
        </nav>
        <section id="content">
            @RenderBody()
        </section>
    </section>
    <footer class="mainfooter">
        <p>&copy; Copyright @DateTime.Now.Year - EPiServer, Inc.</p>
    </footer>
</body>
</html>

_ViewStart.cshtml

This file is used to declare common properties that your Views use. It instructs which layout to use to render the page.

@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

Supporting Files

The file below includes the CSS and layout files referenced in this guide.

EPiServerMvcRazorTemplates.zip

Stay tuned for Part 2 of this series where we will build a Block Template to enable editors to create blocks of content that can be reused across pages, sites, and channels.

The EPiServer Relate Video Gallery Service

Tue, 27 Dec 2011 23:41:59 GMT

The EPiServer Relate Video Gallery Service is one of the lesser known features of EPiServer Relate. It provides a simple, cost effective, elastic, reliable, and global solution for the encoding and delivery of videos uploaded to EPiServer Relate video galleries by members of your EPiServer Relate community.

High Level Architecture

The Video Gallery Service consists of the following major components:

Video Conversion and Thumbnail Service - Encodes uploaded videos into the Flash video format. Creates thumbnails of the videos to enable moderators to quickly preview the content without the need to watch the entire video.
Content Delivery Network (CDN) – Hosts and delivers static and streaming content using a global network of edge locations. Requests for videos are automatically routed to the nearest edge location, so content is delivered with the best possible performance. The CDN runs on Amazon CloudFront.
CDN Provider – Receives and processes events from the CDN, and relays the information to EPiServer Relate (e.g upload complete, encoding complete, etc.). The CDN Provider runs on your web servers.
Origin Server - An origin server is the location of the definitive versions of your videos that are replicated throughout the content delivery network. The Origin Server runs in the EPiServer cloud.

Performance & Scalability

Because the CDN is based on Amazon CloudFront, you don’t need to worry about maintaining expensive web-server capacity to meet the demand from potential traffic spikes for popular content. The service automatically responds as demand increases or decreases without any intervention from you.

Video Encoding Formats

When using the default CDN provided with EPiServer Relate, uploaded videos are encoded to the Flash video format. A custom CDN provider can be implemented if you need to encode to other formats. The following file types can be converted using the default CDN:

Container Files - AVI, MOV, MKV, ASF, MP4, 3GP
Video Codecs - DivX, Xvid, H.264, WMV, MPEG2, MSMPEG4, Sorensen
Audio Codecs - MP3, AAC, WMA, AC3

Using other Video Services and Content Delivery Networks

Because the Video Service is provider based, you can either use the default CDN provider or build your own to utilize another service (e.g. Akamai, Limelight, etc.).

Pricing Model

Monthly pricing is based on bandwidth usage per month.

Technical Details

See EPiServer Relate/Community SDK > Additional Content > Developers Guide > How To > VideoGallery for more technical details.

Content Migration with EPiServer CMS

Tue, 27 Dec 2011 21:50:56 GMT

EPiServer provides many features to help you with content migration enabling any combination of the following approaches.

Automation with EPiServer Tools – Automated via EPiServer tools such as the API and web services.
Automation with 3^rd Party Tools – Automated via 3^rd party tools such as Kapow.
Phased – Some content remains in external repositories that are integrated with EPiServer.
Manual – Content is manually migrated into EPiServer.

The optimal approach depends on the type and quantity of content being migrated. For example, automating the migration with custom code typically makes sense when there is a large volume of structured data and it would require less effort to build tools to automate the process than it would to manually migrate or use a 3rd party tool. 3rd party tools are typically used for extremely large volumes of unstructured content. Your implementation partner will work with you to determine which approach makes the most sense for your scenario.

Content Channels

EPiServer Content Channels are facilitated by a configurable web service interface that enables you to push data from other systems into EPiServer CMS. The content channel web service exposes functionality for external systems to add, edit, delete, and organize content within EPiServer CMS. There is a built-in mapping administration interface which makes it easy to map incoming fields to page fields in EPiServer CMS. The web service also fires events on incoming requests, making it easy to add for example business logic to the data.

Web Service API

EPiServer CMS provides a comprehensive web service API for reading and writing content from and to EPiServer.

.NET API

The EPiServer .NET API can also be used to automate the migration process.

Bulk File Upload

EPiServer CMS provides integration with Windows explorer that enables authorized users to perform bulk uploads of files by dragging from Windows Explorer and dropping into the EPiServer File Manager.

Phased Migration

Content stored in external systems can be exposed as pages in EPiServer CMS by implementing custom page providers. This enables you to implement a phased migration where some content is migrated and some content in integrated.

Manual Migration

The EPiServer rich text editor simplifies manual migration by providing clean cut and paste from external applications, removing unwanted proprietary markup, and respecting your predefined styles. It also converts headings from the source document to the appropriate “<h*>” tags eliminating the need for extra cleanup to be performed by the content contributor.

Import/Export

The EPiServer administrative interface enables authorized users to easily import/export EPiServer content and settings from one EPiServer instance to another. The following object types can be exported and imported from one EPiServer CMS instance to another.

Pages
Page Types
Frames
Dynamic Property definitions
Tabs
Categories
Files

3rd Party Migration Tools

There are several 3rd party vendors that have specialized in 'screen-scraping' as part of content migration and some of them integrate with EPiServer CMS. Kapow provides migration tools that are ideal for large volumes of content but in some cases a simple script that pushes data from existing systems into EPiServer’s Content Channels can be the quickest solution.

An Overview of EPiServer Multilingual Capabilities

Tue, 27 Dec 2011 21:45:36 GMT

EPiServer CMS provides robust multilingual support that facilitates automatically rendering pages based on the URL, the language specified by the user, or the language detected from the user's browser settings.

With EPiServer CMS, multiple sites do not need to be created as multiple language variations can easily be managed on a single site. Authors can easily create or access all of the language variations of a page from any variation of the page.

Supported Languages for Web Site Visitors

The language support for your web site visitors is virtually unlimited. Any language can be supported as long as the language packs are installed on the web servers as part of the operating system. Language packs are included as part of the Windows operating system so there is no additional cost to add additional language support. EPiServer CMS is fully Unicode compliant.

Supported Languages for CMS Users

The EPiServer CMS interface (for content contributors and administrators) supports the following 12 languages out of the box:

English
Swedish
Danish
German
Spanish
French
Dutch
Norwegian
Portuguese
Finish
Chinese
Japanese

Additional language files can be created to support more languages. The text elements of the EPiServer CMS user interface are stored in XML language files.

Language support for your sites can be configured by administrators in “Manage Website Languages” and each CMS user can select their language in the “My Settings” section of EPiServer CMS as pictured below.

Figure 1 – Language Support for Visitors and CMS Users

Language Settings

Administrators can specify which language variations can be created by content contributors, fallback languages that are to be displayed if the requested language variation does not exist, and replacement languages that are to override a specific language variation.

Figure 2 - Language Settings

Side by Side Viewing and Editing

Content contributors can view and edit language variations of page side-by-side.

Figure 3 - Editing Language Variations Side by Side

Notifications and Workflow

The "Ready for Translation" workflow reminds workflow participants to perform translations after a configurable interval and sends a final alert after a configurable interval to inform persons/groups if a page was not fully translated. This workflow can be configured to automatically start when the default language variation is changed and to assign translation activities to a unique translator for each variation.

Figure 4 - Translation Workflow Configuration

Working with Translation Services

EPiServer TranslateX is an open source a module which enables you to export your entire site or a subset of pages to the XLIFF format, send it to a translation agency, and import the translations back EPiServer. TranslateX has two parts:

A core module that exports/imports pages from/to EPiServer CMS and activates the proper connector to start communication with the translation agency.
A connector module that handles communication between EPiServer CMS and the translation agency service. The default connector is XLIFF, where the translation tasks are created as XLIFF files

Figure 5 - Creating a New Translation Project with TranslateX

EPiServer Integration & Extensibility

Tue, 27 Dec 2011 21:30:52 GMT

Proven Architecture

EPiServer CMS is built upon a proven architecture that has been deployed to 10,000 commercial sites across the globe since 1994 and is built on the widely accepted .NET platform. EPiServer CMS is a pure .NET system based on numerous open standards making it extremely transparent and easy to extend. The EPiServer CMS architecture enables developers to get up to speed on the platform quickly enabling you to get to market quickly and minimize your total cost of ownership. EPiServer also provides Visual Studio integration tools that enable developers to use the development tools they are familiar with to quickly develop EPiServer sites.

Built for Extensibility

EPiServer CMS is designed and built for extensibility. The EPiServer API enables developers to create robust page templates, modules, and plug-ins that enhance the user experience for your site visitors and CMS users. Developers can create tools for content contributors and administrators that plug-into the EPiServer editorial and administrative interfaces.

Standards, Standards, Standards

EPiServer implements and re-uses many standards including but not limited to: ASP.NET Master Pages, MVC, Windows Workflow Foundation, Membership and Role Providers, Virtual Path Providers, Windows Communication Foundation, Web Forms, Web Controls, User Controls, Web Parts, XForms, etc.

Extending and Integrating EPiServer

The possibilities for integrating EPiServer with other systems are virtually unlimited. EPiServer provides a number of features to facilitate these integrations which are described below.

.NET API

EPiServer provides a comprehensive .NET API enabling developers to create robust page templates, modules, and plug-ins that enhance the user experience for your site visitors and CMS users.

Web Service API

EPiServer CMS provides a web service API for creating, reading, updating, deleting, querying, and organizing content within EPiServer CMS.

Pushing Data into EPiServer CMS

EPiServer Content Channels provide a configurable XML/SOAP web service interface that enables you to push data from other systems into EPiServer CMS. The Content Channel web service exposes functionality for external systems to add, edit, delete, and organize content within EPiServer CMS. There is a built-in mapping administration interface which makes it easy to map incoming fields to page properties in EPiServer CMS. The web service also fires events on incoming requests making it possible to add custom business logic to process the data as it is pushed into EPiServer.

Integrating with External CRM Systems and User Profile Stores

With EPiServer CMS, user profiles and roles can be stored and managed in virtually any external profile store because EPiServer CMS implements standard ASP.NET membership, role, and profile providers. Multiple profile stores can be used simultaneously. For example, internal users could be managed in Active Directory and external users could be managed in a CRM system. EPiServer CMS supports the Windows, Active Directory, SQL Server, and Oracle Role & Membership Providers out of the box. The EPiServer Connect for Salesforce.com and Connect for Microsoft Dynamics CRM modules provide integration with Salesforce.com and Microsoft Dynamics CRM for profiles, membership, and roles. The connector modules automate the process of capturing new users on your site and creating new accounts and contacts in your CRM system. Your CRM system can also be used to manage roles and permissions. In addition, custom membership providers can be obtained or implemented to integrate with other profile stores (e.g. a custom solution).

Integrating with External Content Repositories

Content stored in external systems can be exposed as items in EPiServer CMS by implementing Custom Page Providers which are based on the .NET provider model. Additionally, you can enable content contributors to update the content in the external system using the EPiServer editorial interface. For example, you could expose news articles that reside in a legacy content management system as pages on your EPiServer site.

Widgets and Content Blocks

EPiServer Dynamic Content plug-ins make it possible for content contributors to add predefined modules, blocks of content, or mini applications to the regions of the page that can fetch data from other sources. Those sources could be content from other pages or information from other systems, such as financial data in an ERP system. For example, they can pull in information from RSS feeds, user profile properties, external map APIs, or social media applications and be placed anywhere within a rich text block on a page.

Integrating with External Analytics Providers

EPiServer enables you to access and aggregate data from external analytics providers (e.g. Google Analytics, Omniture, etc.) and view it within the context of the EPiServer interface and specific content items. Analytics tracking can easily be added to your templates and reports can be added to the OnlineCenter dashboard. The “Google Analytics API Module” is an EPiServer open source module that integrates Google Analytics reports with this data into the EPiServer CMS user interface. Additional modules can be created to integrate other analytics solutions such as Omniture.

Integrating with External Media Repositories

EPiServer can be seamlessly integrated with 3rd party media repositories, digital asset management systems, and content delivery networks. This is because the EPiServer File Manager implements the Virtual Path Provider standard. For example, a Virtual Path Provider has been implemented in the EPiServer Connect for SharePoint module that enables content contributors to work with content that resides in SharePoint using the EPiServer File Manager interface. Content contributors can create, delete, check-out, edit, save, and check in SharePoint content using the EPiServer authoring interface. Similarly, additional Virtual Path Providers could be implemented to integrate with other repositories (e.g. content delivery networks such as Limelight an Akamai).

Customizing the Editorial and Administrative Interface

Developers can create tools for content contributors and administrators that plug-into many different areas of the EPiServer editorial and administrative interfaces. Examples of such plug-ins include but are not limited to:

Integration with 3^rd party analytics tools such as Google Analytics
Integration with Microsoft Commerce server management tools
Language tools for exporting content to the XLIFF format for translation by an external agency
Custom workflows
Integration with external digital asset management systems or repositories

Dynamic Data Store

The Dynamic Data Store gives you a simple way to store strongly typed data when building your applications, without the need to deploy new database tables or build object relational mappings. Data is retrieved from the Dynamic Data Store using LINQ.

Additional Information

This post highlights some of the key extensibility and integration points of EPiServer. Discover more of the endless possibilities with EPiServer at world.EPiServer.com.

Increasing Conversion Rates & ROI with EPiServer CMO

Tue, 27 Dec 2011 21:10:22 GMT

EPiServer CMO (Campaign Monitor and Optimization) provides the tools that marketers need to optimize their online campaigns to increase conversion rates and return on investment (ROI) in real-time. In contrast to competing products, EPiServer CMO provides a focused set of tools and reports that help you understand how your campaigns are performing while they are running, not after the fact when it’s already too late. Instead of analyzing a mountain of data and theorizing about how you might make it better the next time, EPiServer CMO shows you what you need to know now in order to increase conversion rates this time, while the campaign is running.

Key Capabilities

Easily set up campaigns to monitor statistics for content related to a specific initiative without intervention from IT
Run A/B Tests on multiple variations of a page to see which one generates the most conversions
Create Key Performance Indicators to track progress towards your goals
Create and view conversion funnels to determine which content needs to be optimized to drive the most conversions
Monitor traffic in real time to get a new perspective on your visitors’ behavior
Export and share statistics and reports

Figure 1 - Personalized OnlineCenter Dashboard with EPiServer CMO Gadgets

Campaign Analytics and Reports

EPiServer CMO includes page and campaign level reports that such as; page views, unique visitors, browser statistics, key performance indicators, conversion paths, user behavior, and statistics.

Figure 2 – EPiServer CMO Campaign Overview Report

A/B Testing

EPiServer CMO enables you to quickly set up A/B Tests on multiple variations of a page to see which one generates the most conversions. Visitors are routed to the different variations while the test is running. You can view the A/B test report to see which variation has the highest conversion rate and declare that page as a winner so that all users will be routed to that page.

Figure 3 - EPiServer CMO Landing Page Optimization Report (A/B Test)

Conversion Funnels

EPiServer CMO also enables you to set up conversion funnels to monitor user navigation including the entry page and exit page for each page in the conversion path. You can also track form posts and set up KPIs for forms.

Figure 4 - EPiServer CMO Conversion Path Report

Live Monitor

EPiServer Live Monitor gives you a real-time view of visitors to your campaign pages including originating source information.

Figure 5 - EPiServer Live Monitor Showing Real-time Site Activity

Driving ROI with EPiServer Personalization & Content Targeting

Tue, 27 Dec 2011 20:56:07 GMT

The marketing tools shipped with EPiServer CMS (personalization) and EPiServer CMO (campaign monitoring and optimization) provide insight into your visitors’ behavior on the so that you can gain an understanding of the user segments that are interacting with your site with the ultimate purpose of increasing conversion rates and driving return on investment (ROI). This post provides an overview of some of the personalization and content targeting capabilities within EPiServer then enable you to increase your ROI.

The EPiServer Approach to Personalization

EPiServer places emphasis on empowering marketers to quickly setup Visitor Groups that define user segments using drag and drop to configure various business rules for each segment. It’s about harnessing the benefits of personalization without investing a fortune or dedicating an entire team to the challenge. This enables you to start small, realize results immediately, learn more about your segments, and refine your approach iteratively.

EPiServer’s philosophy around personalization is that your target segments should mostly be defined by the market itself and setup by the marketer as opposed to being defined by your visitors’ response to how your content is structured and presented. Your information architecture can have a significant impact on users’ behavior. And if there are flaws with your information architecture, there will be flaws with the target segments defined by the users’ behavior in response to that information architecture.

For more details on personalization strategy, see the “The Web Personalization Workbook” white paper. This EPiServer white paper describes 14 real-world principles for delivering engaged web experiences with personalization.

EPiServer Personalization Features Overview

Almost every organization with a web presence has begun to consider personalization. The potential benefits of precisely aligning web and multi-channel communications to your marketing segmentation strategy are enormous. Yet few organizations have actually taken steps to implement effective personalization.

Personalization in EPiServer CMS enables you to target content to specific audiences based on criteria such as geographic location, visited pages, profile properties, referrer, search keywords, and more. You can create rules with the EPiServer interface that define your target audiences so that you can target the most relevant content to them. As a result, you web site visitors have a more compelling experience and are more likely to engage.

EPiServer CMS enables you to target content to visitors based on…

· What you know about them

· What they are doing / have done

· How they found you

· Where they are from

· What’s happening now

· More…

Examples of the types of personalization criteria that are available include but are not limited to:

· Geographic location and coordinates

· Visited pages

· Visited categories

· Search keywords

· Landing URL

· Referrer

· Number of visits within the past X days

· User profile properties

· Time of day

· What site the visitor came from

· Visitor Group membership

Once you have defined rules for your target audiences, you can preview the content as each audience would see it as pictured below.

Figure 1 - The “Account Manager” position call out displayed to Job Seekers

The image below depicts the Edit Visitor Group page where you define the business rules for each target audience. Multiple criteria can be configured to define a target audience. Logical rules can be applied to the criteria so that any or all criteria must be met for a visitor to be considered a member of the target audience.

Figure 2 - Defining the Criteria for a Visitor Group

Additionally, a score can be assigned to each criterion so that the visitor is considered to be in the target audience when a specified threshold has been met as pictured below.

Figure 3 - Visitor Group Criteria Scoring

Developers can also create custom criteria that model complex business rules that align with your business.

How to Upgrade an EPiServer CMS 5 Site to CMS 6

Tue, 23 Mar 2010 22:06:32 GMT

The EPiServer Deployment Center can be used to upgrade an EPiServer CMS 5 R2 SP2 site to CMS 6. The upgrade process is quite simple and converts the site content, settings, and form data, in place, from the old format to the new. The upgrade process upgrades the EPiServer user interface, assemblies, and converts database objects and data as needed.

If you have multiple sites, each site can be upgraded one at a time as long as they are in separate CMS instances / databases. If you are running an enterprise configuration where multiple sites are managed from the same CMS instance / database, all of the sites will be upgraded at the same time.

The EPiServer Deployment Center will take care of upgrading the content and the EPiServer components, but it is strongly recommended that you thoroughly test your Page Templates, Dynamic Content, Plug-ins, and any other modules that reference the EPiServer API or web services to ensure that there are no compatibility issues with the latest version.

For more details on what the upgrade process does, check out Per Bjurström’s blog entry, Upgrading to CMS 6 RC1.

Upgrading an EPiServer CMS 5 R2 SP2 site to CMS 6.0

The image below depicts the CMS 5 R2 SP2 site prior to the upgrade.

1. Launch the EPiServer Deployment Center.

2. Navigate the tree to Installed Products > EPiServer CMS > Version 6.0.530.0.

3. Select Upgrade Site with SQL Server database.

4. Click the Run button.

5. On the Upgrade an existing EPiServer web site – Step 1 of 2 dialog, select the CMS 5 site that you wish to upgrade.

6. Click the Next button.

7. Verify your settings on the Upgrade an existing EPiServer web site – Step 2 of 2 dialog, and click the Upgrade button.

8. The EPiServer Deployment Center progress dialog will be displayed showing the progress of the upgrade. Click the Close button when it has finished.

9. Close the EPiServer Deployment Center.

10. Clear your temporary internet files as many of the Edit and Admin Mode images from CMS 5 will be cached in Internet Explorer.

11. Navigate to the upgraded site to verify the upgrade.

Setting Up Multiple Sites in EPiServer CMS 5 Enterprise

Mon, 21 Dec 2009 21:44:34 GMT

Multiple sites can be managed from the Structure pane in Edit Mode with EPiServer CMS 5 Enterprise. This enables Editors to conveniently manage multiple sites from one interface and share content, Page Types, Page Templates, and other settings between them.

To add additional sites to the Structure pane, a home page needs to be created in Edit Mode for each additional site as a sibling of the home page of the first site. In addition, site elements need to be created and configured for each additional site in web.config.

Note that the multiple site configuration requires an EPiServer CMS 5 Enterprise license. When multiple sites are configured, the content for all of the sites is stored in a single database.

Example - Setting Up Multiple Sites in EPiServer CMS

The following example describes how to set up multiple sites in EPiServer CMS 5 R2 SP2. This example uses the EPiServer Public Templates and IIS 7 so steps may vary slightly depending on your environment.

1.	Using the EPiServer Deployment Center, create the first site and database. You will need an Enterprise license file for this site. The Deployment Center will create the necessary site element for the first site in web.config.
2.	In IIS Manger, edit the site binding for the first site and add a Host name (e.g. – www.multisitedemo1.com). Note: If you plan to open up the template project for this site with Visual Studio, you will need to update the IISUrl element in the .csproj file to match the host name entered above. For example, <IISUrl>http://www.multisitedemo1.com</IISUrl>
3.	In IIS Manager, create the second site, point the Physical path to the same directory as the first site, and specify a Host name. Note: If you are using IIS 6 or IIS 7 in Classic Pipeline Mode, you will need to configure a wildcard mapping. Integrated Pipeline Mode is the default for IIS 7, so you will probably not need to do this. If you do, see the “Configuring EPiServer CMS 5 R2 SP1 Enterprise” article for instructions.
4.	If you do not have DNS entries set up for your sites, create host entries for the site in the hosts file on the machine from where you will be browsing to the sites (C:\Windows\System32\drivers\etc\hosts).
5.	In Admin Mode, make the [Public] Start page Page Type “Available in Edit Mode” so that you can create a new home page based on this Page Type.
6.	In Edit Mode, create the home page for the second site, using the [Public] Start page Page Template, as a child page of the Root folder. Take note of the Page ID.
7.	In web.config… Create a new site element for the second site by copying and pasting the site element of the first site. Set the siteId and description attributes on the site elements for both sites. The siteId must be unique. Set the pageStartId attribute of the siteSettings element for the second site to the Page ID of the home page that you created above. Set the siteUrl attributes of the siteSettings elements for both sites. The siteUrl must be the fully qualified domain name including protocol (see screen shot). Add a siteHosts element to both site elements containing add elements for each host name that will be used to reference each site. Note that one of the siteHosts elements must contain exactly one add element with a wildcard “” host name to handle requests that do not map to any of the other host names. Each host name must be unique within the scope of the sites* element.

Additional Considerations

To ensure that each site maintains a unique and consistent look and feel, a unique Page Type can be created for each site’s home page enabling Administrators to restrict which Page Types and Page Templates can be used within each site. This also simplifies the “Create New Page” page by only displaying the available Page Types to Editors when creating new pages.

Troubleshooting

If you run into an issue where the children of secondary site will disappear in the Structure pane when selecting primary site or vice versa, this is probably because the uiUrl attribute of the siteSettings element in web.config was modified and is not root relative. If you need to modify the uiUrl attribute, make sure it is a root relative path. For example, uiUrl="~/cms/".

Enabling the EPiServer CMS Workflows

Wed, 07 Oct 2009 22:35:53 GMT

EPiServer CMS 5 ships with four out of the box workflows; Parallel Approval, Sequential Approval, Ready for Translation, and Request for Feedback.

The workflows are disabled by default and can easily be enabled for a CMS site by un-commenting their definitions in web.config.

If the workflows have not been enabled yet, you will see a “There are no instances or tasks related to this page available” message on the “Workflow” tab and a “There are no workflow definitions available” message in the Action Window in Edit Mode.

To enable the workflows…

Open web.config and uncomment the following snippet under configuration/episerver/workflowSettings/definitions:

Once enabled, the EPiServer workflows can be started from the “Workflow” tab or the “Action Window” in Edit Mode.

Utilizing the Microsoft Office Add-In and Client Components with EPiServer CMS

Wed, 07 Oct 2009 00:09:32 GMT

EPiServer CMS provides tools for integrating with Microsoft Office client applications which include the Microsoft Office Add-In and the EPiServer CMS Client Components. This post describes the process for enabling, installing, and activating Microsoft Office integration and client components for EPiServer CMS.

The Microsoft Office Add-In enables Editors to publish files to an EPiServer site directly from Microsoft Word, Excel, and PowerPoint.

The EPiServer CMS Client Components provide the following capabilities:

Integrated spell checker
Export form data to Excel
Drag and drop and multiple file upload into the EPiServer File Manager

To utilize these features, Office integration must be enabled and activated on each CMS site and the Microsoft Office Add-In and EPiServer CMS Client Components must be installed on each client machine that is to utilize the components.

Enabling Office Integration

Office integration must first be enabled in the web.config file for each CMS site on which you wish to utilize it.

To enable Office Integration on your CMS site…

1. Open the web.config file from the root of the site on which you wish to enable the Office Add-In and Components and uncomment the following text. Note that the portion of the path preceding “/OfficeIntegration” will vary depending on what was configured when the site was created (e.g. the “Relative Path” setting on the “Create new EPiServer CMS site” dialog of the EPiServer Deployment Center).

2. Change the “UI” portion of the “path” attribute to the “Relative Path” that was set for the “EPiServer User Interface” on the “Create new EPiServer CMS Site” dialog when the site was created with the EPiServer Deployment Center. For example…

<location path="Cms/OfficeIntegration">
<system.web>
    <authorization>
      <allow users="*" />
    </authorization>
</system.web>
</location>

Troubleshooting

If you receive the following error it is likely because you did not enable Office integration as described above.

“Failed to contact EPiServer CMS, make sure the URL is valid and you are authorized to perform this action.[200]”

Installing the Microsoft Office Add-In

The Microsoft Office Add-In must be installed on each client computer that is to utilize it. This can be done from Edit Mode in CMS.

1. From the client machine, in CMS Edit Mode, select the “Root folder” in the “Structure” pane and select the “Microsoft Office Add-In” tab.

2. Click the “Install version x.x” button and follow the instructions in the EPiServer CMS Office Add-In Wizard.

Activating the Microsoft Office Add-In

The Microsoft Office Add-In must be activated for each CMS site on which you wish to utilize it.

1. In CMS Edit Mode, select the “Root folder” in the “Structure” pane and select the “Microsoft Office Add-In” tab.

2. Select the “2. Activate” tab and click the “Activate” button.

Troubleshooting

If the client machine is running Windows Vista, Windows Server 2008, or Windows 7, the activation may fail silently but appear that it succeeded because of Internet Explorer security settings. An easy workaround for this is to to add the CMS site to the Trusted Sites in Internet Explorer on the client machine.

Make sure the siteUrl attribute of the siteSettings element in web.config is correct (e.g. the machine or domain name in web.config matches the name in the URL you are accessing to activate the add-in). The activation will fail silently if the siteUrl is incorrect because the add-in is activated for this URL. A colleague of mine ran into this issue when setting up CMS on an Amazon EC2 instance because the machine gets renamed every time the instance is brought up.

Installing the Client Components

1. From the client machine, in CMS Edit Mode, select the “Root folder” in the “Structure” pane and select the “Components” tab.

2. Click the “Install version x.x” button.

3. The Components tab should look like the following when the components have been successfully installed.

Troubleshooting

You may not be able to install the client components via the browser on Windows Vista or Windows Server 2008 depending on your Internet Explorer security settings. In this scenario, the “Client components installation” window below will be displayed after clicking the “Install version x.x” button, but the client components will not be installed.

You can work around this by manually extracting the client component DLLs from…

CMS 5 - C:\Program Files\EPiServer\CMS\<CMS version>\Application\UI\ActiveX\EPiServerClientComponents

CMS 6 - C:\Program Files\EPiServer\CMS\<CMS version>\Application\UI\CMS\ActiveX

…CAB on the server and registering them manually on the client machine using the following commands:

regsvr32.exe EPiFileUpload.dll
regsvr32.exe EPiOfficeIntegration.dll