Display Channels and Tags in EPiServer

Introduction

When creating a website, developers find it challenging to implement a design that works on multiple devices, this included desktops, tablets and mobile devices. EPiServer 7 includes a new feature known as Display Channels. Display Channels allow us to control the rendering of the web pages depending on whether the request is from a mobile device or a standard device.

When working with display channels developers have two options:

  • Have multiple templates (WebForm, UserControl, View or partial view) for mobile and standard devices and render the template based on the type of device from which the request comes from.

  • Have a single template and when rendering this template check which channel is currently active and based on that control the output of the page.

To implement the display channels

Display Channels work with both MVC and WebForms.

Webforms: To implement display channels in WebForms you need to create a class that inherits from EPiServer.Web.DisplayChannel. This class contains a method called "IsActive" that can be overridden. This method is where we add the logic to check whether this particular channel is to be considered as active depending on the request.

Following is an example showing simple DisplayChannel, active for mobile devices

public class MobileDisplayChannel : DisplayChannel
{
public override boolIsActive(HttpContextBase context)
{
returncontext.Request.Browser.IsMobileDevice;
}
public override string ChannelName
{
get { return RenderingTags.Mobile; }
}
}

If we have multiple templates then we need to create a base class that inherits from "BlockData" and give it a "ContentType" Attribute. Then for each individual template inherit from the"BlockControlBase" which accepts an object of "BlockData" class and set the "TemplateDescriptor" Attribute. When setting this attribute we need to provide tags to identify which template it represents.

Following shows an example of two different templates of the same type

[ContentType]
public class MyBlock : BlockData {}
[TemplateDescriptor(Default=true)]
public partial class MyBlockControl : BlockControlBase<MyBlock>
{ }
[TemplateDescriptor(Tags = new string[] { RenderingTags.Mobile })]
public partial class MyBlockMobileControl : BlockControlBase<MyBlock>
{ }

MVC:IDisplayMode: To implement Display Channels in MVC we first need to register an instance of System.Web.WebPages.IDisplayMode with EPiServer.Web.DisplayChannelService. After registering, then we will be able to preview the channel even if the request does not match the condition to set it as active.

DisplayChannelService: A class named EPiServer. Web DisplayChannelService gives us all the channels that are active for a request. The service can be retrieved either from EPiServer.ServiceLocation.ServiceLocator. Current or from EPiServer.ServiceLocation.ServiceLocationHelper.

To preview the content

The editor can preview the site from several other active channels. Therefore, when an editor selects to preview the site for a specific channel, then all requests get to IsActive on the DisplayChannel andIDisplayMod. The one that is selected "fakely" returns true to the request.

To add a new device for viewing the right resolution

The UI has a feature for changing the size of the preview to view port. It gives the editor to get a quick view of the page. The Alloy Templates are devices set up to view.

Although the approach does not look exactly same in the app, it gives the editor an approximate idea that how the page will look like in a different screen.

Nikunj Bhanushali is associated with Cogzie as Sales & Operations head and who loves sharing information regarding HTML5, webframework development, asp.net and UI framework. Get in touch with him for Episerver 7 CMS Development.

Nikunj Bhanushali
  • episerver
  • episerver 7
  • mvc
  • webforms
By Nikunj Bhanushali On 26 May, 15  Viewed: 736

Other blogs you may like

Creating One Model Multiple Templates in EPiServer

To begin my article on how to create one model for multiple templates, I might start on with describing to you the page template. A template is for generating page outputs of a particular type, sometimes in aspx type of file. The page templates in EPiServer CMS are created using web forms or... By Nikunj Bhanushali   On 03 Sep 2015  Viewed: 549

ActionResult VS ViewResult in MVC

In MVC controls there are different type of action result we use as a return type from a controller action method in which ViewResult, ActionResult and JsonResult are commonly used. In this article we will learn what are the available action results and which one we need to use in which... By Ali Adravi   On 19 Jul 2013  Viewed: 3,387

Action filter basics in ASP.Net MVC

Action filter in MVC is from very first version. Sometimes we want to perform logic before or after calling the action method, to support this MVC provides action filters. Action filters are used as attributes. Filter can be applied on action method or directly to the controller. Suppose we want... By Hamden   On 13 Jul 2013  Viewed: 1,185

How to create a single thanks page for entire controller in MVC

Sometimes we need a thanks page say we have user registration, change password, activate account functionality in our application then we need a thanks page after registering with our site, to say thanks for registering with us or showing confirmation that your password is successfully changed or... By Hamden   On 30 Jun 2013  Viewed: 3,088

MVC jquery autocomplete with value and text field

In MVC, autocomplete with jquery is the best way to pull data from database and render according to our requirements, so in this article we will use jquery to show the auto complete text box without any ajax controls. We need a method to get the data from database, a controller method to handle the... By Ali Adravi   On 29 Jun 2013  Viewed: 6,053